"Best Contact Us Page"
Bootstrap 3.0.0 Snippet by Anita26

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="contact-pageheader"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="contact-caption"> <h1 class="contact-title">Don’t Be Shy, Talk to Me.</h1> <p class="contact-text">Here is a few approaches to get in touch with me. It would be ideal if you send an email, fill the contact form <strong>I'm looking forward to speaking with you.</strong> </p> </div> </div> <div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-12 col-xs-12"> <div class="contact-form"> <h3 class="contact-info-title">Contact Me</h3> <div class="row"> <form> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only " for="Name"></label> <input id="name" type="text" placeholder="Name" class="form-control" required> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only " for="email"></label> <input id="email" type="text" placeholder="Email" class="form-control" required> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only " for="Phone"></label> <input id="phone" type="text" placeholder="Phone" class="form-control" required> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label required sr-only" for="select"></label> <select class="form-control"> <option value="">What Are You Getting In Touch?</option> <option value="">Relationship</option> <option value="">Life Coaching</option> <option value="">Leadership</option> <option value="">Time Management</option> </select> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb20"> <div class="form-group"> <label class="control-label sr-only" for="textarea"></label> <textarea class="form-control pdt20" id="textarea" name="textarea" rows="4" placeholder="Message"></textarea> </div> </div> <div class="col-lg-12 col-md-12 col-sm-6 col-xs-12"> <button class="btn btn-primary btn-lg ">Send message</button> </div> </form> </div> </div> </div> </div> </div> </div> <div class="space-medium"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb60"> <hr> </div> </div> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div id="contact-map"></div> </div> <div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-6 col-xs-12"> <div class=""> <h3 class="title-bold">Contact Info</h3> <p>Please help us serve you better by sharing the following information. </p> </div> <div class="contact-section"> <div class="contact-icon"><i class="fa fa-map-marker"></i></div> <div class="contact-info"> <p>951 Meadow View Drive Bristol, Hog Camp Road USA06010</p> </div> </div> <div class="contact-section"> <div class="contact-icon"><i class="fa fa-phone"></i></div> <div class="contact-info"> <p>+180-123-4567</p> </div> </div> <div class="contact-section"> <div class="contact-icon"><i class="fa fa-envelope"></i></div> <div class="contact-info"> <p>john@lifecoach.com</p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> Created for <a href="https://goo.gl/NPfPMk" target="_blank">easetemplate</a> </div></div> </div> </div> <script> function initMap() { var uluru = { lat: 23.094197, lng: 72.558148 }; var map = new google.maps.Map(document.getElementById('contact-map'), { zoom: 14, center: uluru, scrollwheel: false }); var marker = new google.maps.Marker({ position: uluru, map: map, icon: 'https://easetemplate.com/free-website-templates/life-coach/images/map_marker.png' }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZib4Lvp0g1L8eskVBFJ0SEbnENB6cJ-g&callback=initMap"> </script>
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'PT Sans', sans-serif; letter-spacing: 0px; font-size: 18px; color: #525756; font-weight: 400; line-height: 2; } h1, h2, h3, h4, h5, h6 { color: #272d2c; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'PT Sans', sans-serif; } h1 { font-size: 42px; line-height: 42px; } h2 { font-size: 30px; line-height: 32px; } h3 { font-size: 24px; line-height: 30px; } h4 { font-size: 18px; line-height: 26px; } h5 { font-size: 16px; font-weight: 400; } h6 { font-size: 12px; font-weight: 400; } p { margin: 0 0 20px; line-height: 1.6; } p:last-child { margin: 0px; } ul, ol { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #272d2c; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #f8591b; } sub { bottom: 0em; } .lead { font-size: 23px; font-weight: 400; line-height: 1.5; font-family: 'PT Serif', serif; color: #272d2c; margin-bottom: 40px; } .form-group { margin-bottom: 5px; } .form-control { border-radius: 0px; color: #6b6c6d; font-size: 14px; font-weight: 600; width: 100%; height: 52px; padding: 0px; line-height: 1.42857143; border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #cbcfce; background-color: transparent; text-transform: uppercase; letter-spacing: 0px; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } .form-control:focus { color: #34b2a4 !important; outline: 0; -webkit-box-shadow: none; box-shadow: none; border-bottom-color: #34b2a4; font-size: 12px; } .input-group { position: relative; display: table; border-collapse: separate; } input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 12px; line-height: normal; } input::-webkit-input-placeholder { color: #6b6c6d !important; } input:focus::-webkit-input-placeholder { color: #34b2a4 !important; bottom: 20px; position: relative; } textarea::-webkit-input-placeholder { color: #6b6c6d !important; } textarea:focus::-webkit-input-placeholder { color: #34b2a4 !important; bottom: 20px; position: relative; font-size: 12px; } .input-group-addon { background-color: transparent; border: 1px solid #34b2a4; border-radius: 0px; } .focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #cbcfce; background-color: #fff; } .focus:focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #cbcfce; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .has-success .form-control { border-color: #3c763d; background-color: #fff; box-shadow: none; } .has-success .form-control:focus { border-color: #3c763d; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .has-error .form-control { border-color: #a94442; background-color: #fff; box-shadow: none; } .has-error .form-control:focus { border-color: #34b2a4; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .input-group-addon:last-child { border-left: 0; border-right: transparent; border-top: transparent; } .input-group-addon i { color: #34b2a4; } option { color: #6b6c6d; } hr { border-top: 1px solid #e4e9e8; margin-bottom: 40px; margin-top: 40px; } .mb60{margin-bottom:60px;} .btn { font-family: 'PT Sans', sans-serif; font-size: 18px; text-transform: capitalize; font-weight: 600; padding: 11px 30px; border-radius: 6px; line-height: 1.8; letter-spacing: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-primary { background-color: #f8591b; color: #fff; border: 1px solid #f8591b; } .btn-primary:hover { background-color: #e64c10; color: #fff; border: 1px solid #e64c10; } .btn-primary.focus, .btn-primary:focus { background-color: #e64c10; color: #fff; border: 1px solid #e64c10; } .space-medium { padding-top: 80px; padding-bottom: 80px; } .pdt20 { padding-top: 20px; } .contact-pageheader { position: relative; background: rgba(145, 238, 226, 1); background: -moz-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(145, 238, 226, 1)), color-stop(22%, rgba(145, 238, 226, 1)), color-stop(31%, rgba(145, 238, 226, 1)), color-stop(39%, rgba(145, 238, 226, 1)), color-stop(71%, rgba(57, 196, 182, 1)), color-stop(100%, rgba(57, 196, 182, 1))); background: -webkit-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%); background: -o-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%); background: -ms-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%); background: linear-gradient(to right, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91eee2', endColorstr='#39c4b6', GradientType=1); margin-bottom: 70px; } .contact-caption { position: relative; top: 180px; } .contact-title { font-family: 'PT Serif', serif; font-size: 50px; font-style: italic; margin-bottom: 40px; line-height:80px; } .contact-caption-text { font-size: 23px; color: #272d2c; } #contact-map { height: 450px; width: 100%; position: relative; } .contact-form { background-color: #fff; padding: 30px; text-align: center; position: relative; bottom: 0px; top: 100px; -webkit-box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29); -moz-box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29); box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29); } .contact-section { margin-bottom: 40px; margin-top: 40px; padding-bottom: 30px; border-bottom: 1px solid #e4e9e8; } .contact-section .contact-icon { float: left; margin-bottom: 20px; display: inline-block; font-size: 25px; color: #34b2a4; padding-right: 20px; position: initial; } .contact-section .contact-info { padding-top: 10px; font-weight: 700; } .contact-social {} .contact-social ul {} .contact-social ul li { float: left; } .contact-social ul li a { font-size: 16px; padding-right: 10px; color: #6b6c6d; } .contact-social ul li a:hover { color: #0084bf; } .location-block { border-radius: 2px; border: 1px solid #eaeaea; padding: 30px; margin-bottom: 20px; background-color: #fff; } .location-content {} .location-block ul {} .location-block ul li { line-height: 2.2; font-size: 15px; } .location-icon { color: #0084bf; padding-right: 10px; font-size: 15px; }

Related: See More


Questions / Comments: