Skip to content

Commit 90ec9a6

Browse files
jeromehardawayjeromehardaway
authored
improve contact form (#630)
1 parent 3cf069a commit 90ec9a6

File tree

2 files changed

+39
-44
lines changed

2 files changed

+39
-44
lines changed

‎src/components/forms/contact-form.tsx‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,11 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
3838
const response = await axios.post("/api/contact", data);
3939
if (response.status === 200) {
4040
setServerMessage("Thank you for your message!");
41-
setShowEmojiRain(true); // Trigger the Emoji Rain on successful submission
42-
43-
// Optional: Hide the EmojiRain after a set duration
44-
setTimeout(() => setShowEmojiRain(false), 5000); // Adjust duration as necessary
45-
46-
reset(); // Reset the form fields
41+
setShowEmojiRain(true);
42+
setTimeout(() => setShowEmojiRain(false), 5000);
43+
reset();
4744
} else {
48-
setServerMessage(
49-
"There was an error. Please try again later."
50-
);
45+
setServerMessage("There was an error. Please try again later.");
5146
}
5247
} catch (error) {
5348
setServerMessage("There was an error. Please try again later.");
@@ -56,19 +51,19 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
5651

5752
return (
5853
<form
59-
className={clsx(className)}
54+
className={clsx("tw-space-y-6", className)}
6055
ref={ref}
6156
onSubmit={handleSubmit(onSubmit)}
6257
>
63-
<div className="tw-grid tw-grid-cols-1 tw-gap-5 tw-mb-5 md:tw-grid-cols-2 md:tw-gap-7.5 md:tw-mb-7.5">
64-
<div>
65-
<label htmlFor="name" className="tw-sr-only">
58+
<div className="tw-grid tw-grid-cols-1 tw-gap-5 md:tw-grid-cols-2 md:tw-gap-7.5">
59+
<div className="tw-space-y-2">
60+
<label htmlFor="name" className="tw-block tw-text-sm tw-font-medium tw-text-[#091f40]">
6661
Name
6762
</label>
6863
<Input
6964
id="name"
7065
placeholder="Your Name *"
71-
bg="light"
66+
className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
7267
feedbackText={errors?.name?.message}
7368
state={hasKey(errors, "name") ? "error" : "success"}
7469
showState={!!hasKey(errors, "name")}
@@ -77,37 +72,33 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
7772
})}
7873
/>
7974
</div>
80-
<div>
81-
<label htmlFor="phone" className="tw-sr-only">
75+
<div className="tw-space-y-2">
76+
<label htmlFor="phone" className="tw-block tw-text-sm tw-font-medium tw-text-[#091f40]">
8277
Phone
8378
</label>
8479
<Input
8580
id="phone"
8681
placeholder="Your Phone *"
87-
bg="light"
82+
className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
8883
feedbackText={errors?.phone?.message}
89-
state={
90-
hasKey(errors, "phone") ? "error" : "success"
91-
}
84+
state={hasKey(errors, "phone") ? "error" : "success"}
9285
showState={!!hasKey(errors, "phone")}
9386
{...register("phone", {
9487
required: "Phone is required",
9588
})}
9689
/>
9790
</div>
98-
<div>
99-
<label htmlFor="email" className="tw-sr-only">
91+
<div className="tw-space-y-2">
92+
<label htmlFor="email" className="tw-block tw-text-sm tw-font-medium tw-text-[#091f40]">
10093
Email
10194
</label>
10295
<Input
10396
type="email"
10497
id="email"
10598
placeholder="Your Email *"
106-
bg="light"
99+
className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
107100
feedbackText={errors?.email?.message}
108-
state={
109-
hasKey(errors, "email") ? "error" : "success"
110-
}
101+
state={hasKey(errors, "email") ? "error" : "success"}
111102
showState={!!hasKey(errors, "email")}
112103
{...register("email", {
113104
required: "Email is required",
@@ -118,33 +109,31 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
118109
})}
119110
/>
120111
</div>
121-
<div>
122-
<label htmlFor="subject" className="tw-sr-only">
112+
<div className="tw-space-y-2">
113+
<label htmlFor="subject" className="tw-block tw-text-sm tw-font-medium tw-text-[#091f40]">
123114
Subject
124115
</label>
125116
<Input
126117
id="subject"
127118
placeholder="Subject *"
128-
bg="light"
119+
className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200"
129120
feedbackText={errors?.subject?.message}
130-
state={
131-
hasKey(errors, "subject") ? "error" : "success"
132-
}
121+
state={hasKey(errors, "subject") ? "error" : "success"}
133122
showState={!!hasKey(errors, "subject")}
134123
{...register("subject", {
135124
required: "Subject is required",
136125
})}
137126
/>
138127
</div>
139128
</div>
140-
<div className="tw-mb-5 md:tw-mb-7.5">
141-
<label htmlFor="message" className="tw-sr-only">
142-
Comment
129+
<div className="tw-space-y-2">
130+
<label htmlFor="message" className="tw-block tw-text-sm tw-font-medium tw-text-[#091f40]">
131+
Message
143132
</label>
144133
<Textarea
145134
id="message"
146135
placeholder="Message"
147-
bg="light"
136+
className="tw-w-full tw-px-4 tw-py-3 tw-rounded-lg tw-bg-white tw-border tw-border-[#091f40] tw-text-[#091f40] focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#091f40] tw-transition tw-duration-200 tw-resize-none"
148137
feedbackText={errors?.message?.message}
149138
state={hasKey(errors, "message") ? "error" : "success"}
150139
showState={!!hasKey(errors, "message")}
@@ -153,9 +142,14 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
153142
})}
154143
/>
155144
</div>
156-
<Button type="submit" className="tw-w-[180px]">
157-
Submit
158-
</Button>
145+
<div className="tw-w-full">
146+
<Button
147+
type="submit"
148+
className="tw-w-full tw-bg-[#c5203e] hover:tw-bg-[#a91b35] tw-text-white tw-font-semibold tw-py-4 tw-px-6 tw-rounded-lg focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[#c5203e] focus:tw-ring-offset-2 tw-transition tw-duration-200 tw-ease-in-out tw-transform"
149+
>
150+
Submit
151+
</Button>
152+
</div>
159153
{serverMessage && (
160154
<Feedback state="success">{serverMessage}</Feedback>
161155
)}
@@ -165,4 +159,4 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
165159
}
166160
);
167161

168-
export default ContactForm;
162+
export default ContactForm;

‎src/containers/contact-form/layout-02/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ type TProps = TSection & {
1111
section_title?: SectionTitleType;
1212
};
1313
};
14+
1415
const ContactFormArea = ({ data: { section_title } }: TProps) => {
1516
return (
16-
<Section className="contact-form-area">
17+
<Section className="contact-form-area tw-min-h-screen tw-flex tw-items-center tw-justify-center tw-bg-white tw-p-4 sm:tw-p-6 lg:tw-p-8">
1718
<div className="tw-container">
1819
{section_title && (
1920
<motion.h2
20-
className="tw-max-w-[600px] tw-mx-auto tw-text-center tw-leading-none tw-mb-10 md:tw-mb-15"
21+
className="tw-text-3xl sm:tw-text-4xl tw-font-bold tw-text-[#091f40] tw-mb-6 sm:tw-mb-8 tw-text-center"
2122
initial="offscreen"
2223
whileInView="onscreen"
2324
viewport={{ once: true, amount: 0.4 }}
@@ -27,7 +28,7 @@ const ContactFormArea = ({ data: { section_title } }: TProps) => {
2728
</motion.h2>
2829
)}
2930
<AnimatedContactForm
30-
className="tw-max-w-[770px] tw-mx-auto"
31+
className="tw-w-full tw-max-w-4xl tw-mx-auto tw-bg-white tw-p-8 sm:tw-p-10"
3132
initial="offscreen"
3233
whileInView="onscreen"
3334
viewport={{ once: true, amount: 0.4 }}
@@ -38,4 +39,4 @@ const ContactFormArea = ({ data: { section_title } }: TProps) => {
3839
);
3940
};
4041

41-
export default ContactFormArea;
42+
export default ContactFormArea;

0 commit comments

Comments
 (0)