Subscription Form With Validation

<div class="container"> <section class="contact-page-section"> <div class="auto-container"> <div class="row clearfix"> <div class="contact-column col-lg-4 col-md-12 col-sm-12 order-2"> <div class="inner-column"> <div class="sec-title"> <h2>Contact Info</h2> </div> <ul class="contact-info"> <li> <span class="icon fa fa-map-marker"></span> <p><strong>123, Any Street,</strong></p> <p>2nd Floor, Delhi ,India 110021</p> </li> <li> <span class="icon fa fa-phone"></span> <p><strong>Call Us</strong></p> <p>+91 1234 123 123</p> </li> <li> <span class="icon fa fa-envelope"></span> <p><strong>Mail Us</strong></p> <p><a href="mailto:[email protected]">[email protected]</a></p> </li> </ul> <ul class="social-icon-two social-icon-colored"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div>  <div class="form-column col-lg-8 col-md-12 col-sm-12"> <div class="inner-column"> <div class="contact-form"> <div class="sec-title"> <h2>Get in Touch</h2> </div> <form method="post" action="" id="contact-form"> <div class="row clearfix"> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <input type="text" name="username" placeholder="Name" required=""> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <input type="text" name="phone" placeholder="Phone" required=""> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <input type="email" name="email" placeholder="Email" required=""> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <input type="text" name="subject" placeholder="Subject" required=""> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <textarea name="message" placeholder="Message"></textarea> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <button class="btn btn-primary" type="submit" name="submit-form"><span class="btn-title">Submit Now</span></button> </div> </div> </form> </div> </div> </div> </div> </div> </section> </div>

$(document).ready(function(){ if($('#contact-form').length){ $('#contact-form').validate({ rules: { name: { required: true }, email: { required: true, email: true }, message: { required: true } } }); } })

Subscription Form With Validation

This is an example of a subscription form with validation, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts, CSS, and Bootstrap styles are imported to the code with their URLs. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the details in an orderly manner. JavaScript functions have been used to validate the name, email, and message details. The input fields of the form are given the styles of position as relative, display as block, width as 100%, font-size as 18px, color as #555555, line-height as 32px, padding as 15px 30px, border as 1px solid #f1f1f1, background-color as #f1f1f1, font-weight as 400, and height as 64px. The input fields take the border-color of #f20487, in a focus event. The text-area for the message section is given a height of 156px. The Submit button is given a text-transform style as capitalize to make the first letter of each word uppercase. Source: https://www.tolmatol.com/form-validation/

Web Designer Wall

Web Designer Wall

Subscription Form With Validation

Subscription Form With Validation

Subscription Form With Validation

Post Comment or Questions Cancel reply

Several Related Snippets