"Bootstrap Contact Us Form"
Bootstrap 4.1.1 Snippet by mbejda

<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="container contact-form"> <div class="text-center"> <a href="https://submitform.app"> <img src="https://res.cloudinary.com/lqyghlh2f/image/upload/v1596495179/logo_ux9hpk.png" alt="submitform.app logo"/> <div class="d-block"> Send HTML form data and file uploads to Slack </div> </a> </div> <form method="post" action="https://submitform.app/P3_OEQY8x"> <h3>Drop Us a Message</h3> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" /> </div> <div class="form-group"> <input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" /> </div> <div class="form-group"> <input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" /> </div> <div class="form-group"> <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea> </div> </div> </div> </form> </div>
body{ background: -webkit-linear-gradient(left, #2EB67D, #2EB67D); } .contact-form{ padding: 10px; background: #fff; margin-top: 10%; margin-bottom: 5%; width: 70%; } .contact-form .form-control{ border-radius:1rem; } .contact-image{ text-align: center; } .contact-image img{ } .contact-form form{ padding: 14%; } .contact-form form .row{ margin-bottom: -7%; } .contact-form h3{ margin-bottom: 8%; margin-top: -10%; text-align: center; color: #0062cc; } .contact-form .btnContact { width: 50%; border: none; border-radius: 1rem; padding: 1.5%; background: #dc3545; font-weight: 600; color: #fff; cursor: pointer; } .btnContactSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; color: #fff; background-color: #0062cc; border: none; cursor: pointer; }

Related: See More


Questions / Comments: