Here we are give you free code of contact us form,address,social icon with map location. this is fully responsive contact us page design. this single contact us page design we create usign html,css and bootstrap. you can esaly implement in your progamming language php,.net,java,android etc..

We allows to free snippets of contact us page template free download , you can download full code of contact us page design in html code layout. Here in this post i will give you example of bootstrap contact us page with map snippet and you will get simple code of html, css and jquery. In bootstrap contact form page example snippet i give you three tab with html, css and js, you can easily get code of responsive contact form with map layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head> <body> <br><br> <div class="container"> <div class="row"> <div class="col-lg-8 offset-lg-2 col-12"> <div class="row"> <div class="col-lg-12 col-12 p-0 contact-us"> <h4 class="">CONTACT US</h4><hr> </div> </div> <div class="row bg-light pt-3 pb-3 mb-4"> <div class="col-lg-12"> <h6>ADDRESS :</h6> </div> <div class="col-lg-4 col-4"> Saint Marco Street, 6th floor,Tokyo, Japan, 123456. </div> <div class="col-lg-4 col-4"> <p class="m-0 text-danger"><i class="fa fa-phone-square" aria-hidden="true"></i> +91 1234567890 </p> <p class="m-0 text-info"><i class="fa fa-envelope" aria-hidden="true"></i> example@gmail.com </p> </div> <div class="col-lg-4 col-4 address-icon text-center text-danger"> <i class="fa fa-map-marker" aria-hidden="true"></i> </div> </div> <div class="row bg-light pt-3 pb-3 mb-4"> <div class="col-lg-6 col-12"> <form> <div class="form-row mb-3"> <div class="col"> <input type="text" class="form-control" placeholder="Name :"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Company :"> </div> </div> <div class="form-row mb-3"> <div class="col"> <input type="text" class="form-control" placeholder="Email :"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Mobile :"> </div> </div> <div class="form-group"> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message :"></textarea> </div> <button type="submit" class="btn btn-danger mb-4">Send</button> </form> </div> <div class="col-lg-6 col-12"> <div style="width: 100%"><iframe width="100%" height="300px" src="https://www.mapsdirections.info/en/custom-google-maps/map.php?width=100%&height=600&hl=ru&q=Malet%20St%2C%20London%20WC1E%207HU%2C%20United%20Kingdom+(Your%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=A&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"><a href="https://www.mapsdirections.info/en/custom-google-maps/">Create Google Map</a> by <a href="https://www.mapsdirections.info/en/">Measure area on map</a></iframe></div> <div class="icons"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-linkedin"></i></a> <a href=""><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> </div> </body> </html>
body{ background:#ACD7E5; } .address-icon i{ font-size: 36px; line-height: 32px; } .icons i{ color: #fff; padding: 8px 0px; text-align: center; height: 30px; width: 30px; margin-right: 5px; } .fa-facebook{ background-color: #3A5A99; } .fa-twitter{ background-color: #39CBFA; } .fa-linkedin{ background-color: #3D99C0; } .fa-github{ background-color: #000; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog