"Contact Form "
Bootstrap 4.1.1 Snippet by Shailesh Kushwaha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row no-margin footer2"> <div class="container m-pad aos-init aos-animate" data-aos="fade-up"> <h3 data-aos="fade-up" class="aos-init aos-animate">Book Site Visit</h3> <div class="col-md-12 col-xs-12 col-sm-12"> <form action="#" method="post" name="contact_form1" autocomplete="off"> <div class="col-md-4 col-xs-12 col-sm-12 frm1"> <input type="text" class="form-control" placeholder="Name" name="name" autocomplete="off" required=""> </div> <div class="col-md-4 col-xs-12 col-sm-12 frm1"> <input type="number" class="form-control" placeholder="Mobile Number" name="phone" autocomplete="off" required=""> </div> <div class="col-md-4 col-xs-12 col-sm-12 frm1"> <input type="email" class="form-control" placeholder="Email Id" name="email" autocomplete="off" required=""> </div> <div class="col-md-4 col-xs-12 col-sm-12 frm1"> <input type="text" class="form-control" placeholder="Interested in Site Visit.." value="Interested in Site Visit.." name="message" autocomplete="off" required=""> </div> <div class="col-md-4 col-md-offset-4 col-xs-12 col-sm-12 frm1"> <input type="submit" class="form-control" value="SUBMIT"> </div> </form> </div> </div> </div>
.footer2 { background: #343434; padding: 40px 0; } .frm1 { color: #fff; border-radius: 0px; background: transparent; margin-top: 10px; padding: 8px 4px 4px; font-family: 'Roboto', sans-serif; } .frm1 input[type="text"], input[type="email"], input[type="number"] { border-radius: 0; height: 45px; } .frm1 input[type="submit"] { border-radius: 0; height: 45px; background: #fcfcfc; font-size: 14px; font-weight: 600; color: #000; letter-spacing: 2px; } .frm1:hover input[type="submit"] { background: #000; color: #fff; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; display: none; overflow: auto; background: #0000009e; overflow-y: scroll; padding-top: 5%; } .modal-title { margin: 0; line-height: 1.42857143; text-transform: uppercase; font-family: 'Roboto', sans-serif; color: green; font-weight: 600; font-size: 24px; text-align: center; } .modal-title1 { margin: 0; line-height: 1.42857143; text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-weight: 700; font-size: 18px; text-align: center; } .sbmt1 { height: 30px; line-height: 4px; background: #000; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background-color: #000; }

Related: See More


Questions / Comments: