<form onSubmit={newsletterHandler} className="w-100">
<div className="d-flex flex-column flex-lg-row justify-content-between w-100">
<div className=" pe-lg-5 w-100">
<label className="font-xsm w-100">
Name <br />
<input
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
value={formData.name}
className="w-100"
type="text"
name="Name"
/>
</label>
</div>
<div className="mt-3 mt-lg-0 w-100">
<label className="font-xsm w-100">
Email <br />
<input
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
value={formData.email}
className="w-100"
type="email"
name="Email"
/>
</label>
</div>
</div>
<div className="d-flex flex-column flex-lg-row justify-content-between mt-3 mt-lg-4 pt-lg-2">
<div className="pe-lg-5 w-100">
<label className="font-xsm w-100">
Mobile <br />
<input
onChange={(e) =>
setFormData({ ...formData, mobile: e.target.value })
}
value={formData.mobile}
className="w-100"
type="Number"
name="Mobile"
/>
</label>
</div>
<div className="mt-3 mt-lg-0 w-100">
<label className="font-xsm w-100">
Your Subject <br />
<input
onChange={(e) =>
setFormData({ ...formData, subject: e.target.value })
}
value={formData.subject}
className="w-100"
type="text"
name="Your Subject"
/>
</label>
</div>
</div>
<label className="font-xsm w-100 color-blue mt-4 pt-lg-2">
Message
<textarea
onChange={(e) =>
setFormData({ ...formData, message: e.target.value })
}
value={formData.message}
className="w-100 mt-2 mb-2 "
rows={5}
type="text"
name="Message"
placeholder="Type your message here "
></textarea>
</label>
<button
type="submit"
className="font-normal fw-bold mt-4 color-white mb-2 mb-lg-0"
>
Send Message
</button>
</form>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter