Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Contact Form . Stylish contact page"
Bootstrap 3.3.0 Snippet by
itworks
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
477
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section id="contact" style=""> <div class="container"> <div class="row"> <div class="about_our_company" style="margin-bottom: 20px;"> <h1 style="color:#fff;">Write Your Message</h1> <div class="titleline-icon"></div> <p style="color:#fff;">Lorem Ipsum is simply dummy text of the printing and typesetting </p> </div> </div> <div class="row"> <div class="col-md-8"> <form name="sentMessage" id="contactForm" novalidate=""> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Name *" id="name" required="" data-validation-required-message="Please enter your name."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Your Email *" id="email" required="" data-validation-required-message="Please enter your email address."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required="" data-validation-required-message="Please enter your phone number."> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea class="form-control" placeholder="Your Message *" id="message" required="" data-validation-required-message="Please enter a message."></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="clearfix"></div> <div class="col-lg-12 text-center"> <div id="success"></div> <button type="submit" class="btn btn-xl get">Send Message</button> </div> </div> </form> </div> <div class="col-md-4"> <p style="color:#fff;"> <strong><i class="fa fa-map-marker"></i> Address</strong><br> 1216/Mirpur_10 Beach, Dhaka(Bangladesh) </p> <p style="color:#fff;"><strong><i class="fa fa-phone"></i> Phone Number</strong><br> (+8801)7123456</p> <p style="color:#fff;"> <strong><i class="fa fa-envelope"></i> Email Address</strong><br> Email@info.com</p> <p></p> </div> </div> </div> </section>
section#contact { background-color: #222222; background-image: url('http://artdnaswitchbd.com/componants/images/map-image.png'); background-position: center; background-repeat: no-repeat; } section { padding: 30px 0PX; } section#contact .section-heading { color: white; } section#contact .form-group { margin-bottom: 25px; } section#contact .form-group input, section#contact .form-group textarea { padding: 20px; } section#contact .form-group input.form-control { height: auto; } section#contact .form-group textarea.form-control { height: 236px; } section#contact .form-control:focus { border-color: #fed136; box-shadow: none; } section#contact ::-webkit-input-placeholder { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 700; color: #eeeeee; } .gellary_bg_none img{ width: 100%; height: 250px; } section#contact :-moz-placeholder { /* Firefox 18- */ font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 700; color: #eeeeee; } section#contact ::-moz-placeholder { /* Firefox 19+ */ font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 700; color: #eeeeee; } section#contact :-ms-input-placeholder { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 700; color: #eeeeee; } section#contact .text-danger { color: #e74c3c; } .about_our_company{ text-align: center; } .about_our_company h1{ font-size: 25px; } .titleline-icon { position: relative; max-width: 100px; border-top: 4px double #F99700; margin: 20px auto 20px; } .titleline-icon:after { position: absolute; top: -11px; left: 0; right: 0; margin: auto; font-family: 'FontAwesome'; content: "\f141"; font-size: 20px; line-height: 1; color: #F99700; text-align: center; vertical-align: middle; width: 40px; height: 20px; background: #ffffff; }
Related:
See More
Free Template
Paper Kit
141.9K
51
Contact Form
203.5K
56
Bootstrap Contact Form
109.2K
47
Bootstrap Contact Form
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76