<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