"contact form design using bootstrap 4"
Bootstrap 4.1.1 Snippet by bootstraplily.com

<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="bg-blue"> <div class="container py-5"> <div class="row py-5"> <div class="col-md-4 col-12"> <p class="m-0 small dd2">For Our Honorable Clients</p> <h3 class="text-white">Free Consulting</h3> <p class="dd2">Call us 24/7 at +258 451 745 or fill out the form.</p> <p class="mb-4 text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at vulputate ex, non fermentum elit. Duis dapibus massa libero, sit amet vehicula lectus pretium nec. Cras ex dolor.</p> </div> <div class="col-md-8 col-12"> <form> <div class="row"> <div class="col-6 mb-4"> <input class="form-control dd5" placeholder="Name" type="text"> </div> <div class="col-6 mb-4"> <input class="form-control dd5" placeholder="Phone" type="text"> </div> <div class="col-6 mb-4"> <input class="form-control dd5" placeholder="Email" type="email"> </div> <div class="col-6 mb-4"> <select name="" class="form-control dd5"> <option class="form-control">Family Law</option> <option class="form-control">Personal Law</option> </select> </div> <div class="col-12 mb-4"> <textarea class="form-control dd5" name="" cols="" rows="" placeholder="Message"></textarea> </div> <div class="col-12 text-right"> <input type="submit" value="Send Message" class="btn btn-dark"> </div> </div> </form> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>
body { color: #020410; } .bg-blue { background: linear-gradient(0deg, rgba(2,4,16,0.8), rgba(2,4,16,0.8)), url(https://bootstraplily.com/demo/contact-form/form-two/blue-bg.jpg); background-size: cover; } .form-control { border-radius: 0; height: 42px; color: #fff !important; } .btn { border-radius: 0; padding: 8px 22px; } .btn-dark { background-color: #b9753f; border-color: #b9753f; } .dd2 { color: #b9753f; } .dd5 { border: 1px solid #e8c0a0; background-color: rgba(255,255,255,0.2); border-radius: 0; transition: all 0.3s ease; }

Related: See More


Questions / Comments: