"Contact Form - One page "
Bootstrap 3.3.0 Snippet by kastya

<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 ----------> <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <section id="contact"> <div class="section-content"> <h1 class="section-header">Get in <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Touch with us</span></h1> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3> </div> <div class="contact-section"> <div class="container"> <form> <div class="col-md-6 form-line"> <div class="form-group"> <label for="exampleInputUsername">Your name</label> <input type="text" class="form-control" id="" placeholder=" Enter Name"> </div> <div class="form-group"> <label for="exampleInputEmail">Email Address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder=" Enter Email id"> </div> <div class="form-group"> <label for="telephone">Mobile No.</label> <input type="tel" class="form-control" id="telephone" placeholder=" Enter 10-digit mobile no."> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for ="description"> Message</label> <textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea> </div> <div> <button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button> </div> </div> </form> </div> </section>
/*Contact sectiom*/ .content-header{ font-family: 'Oleo Script', cursive; color:#fcc500; font-size: 45px; } .section-content{ text-align: center; } #contact{ font-family: 'Teko', sans-serif; padding-top: 60px; width: 100%; width: 100vw; height: 550px; background: #3a6186; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color : #fff; } .contact-section{ padding-top: 40px; } .contact-section .col-md-6{ width: 50%; } .form-line{ border-right: 1px solid #B29999; } .form-group{ margin-top: 10px; } label{ font-size: 1.3em; line-height: 1em; font-weight: normal; } .form-control{ font-size: 1.3em; color: #080808; } textarea.form-control { height: 135px; /* margin-top: px;*/ } .submit{ font-size: 1.1em; float: right; width: 150px; background-color: transparent; color: #fff; }

Related: See More


Questions / Comments:

Beautiful contact us form. do you have an updated version with Bootstrap version 4?

GIGltd () - 4 years ago - Reply 0


if i want to change the background image in my application using this snippet how could i do this.....plzz help....and as i am inserting one more text box its coming out of the background image please help to sort it out

Faizan Khan () - 6 years ago - Reply 0


hello faizan , change the background property's in your css to background : url("/image.jpg");
and its done and regarding extra text box set it proper hieght by using a proper grid system and media query

hope it helps

kaustubh () - 6 years ago - Reply 0


Grate work

Varsha Sharma () - 6 years ago - Reply 0


Thanks..

kaustubh () - 6 years ago - Reply 0


I have use your snipp in my website http://kalarikendramdelhi.com/ it is working awesome

amar singh () - 6 years ago - Reply 0


thanks am happy that my snippet proved help full to you

kaustubh () - 6 years ago - Reply 0


Great Work!!

Chespirithor () - 6 years ago - Reply 0


thanks

kaustubh () - 6 years ago - Reply 0


Missing </div> tag on line 40 to end "container" div. Other than that, great work!

MrSmithr () - 6 years ago - Reply 0


ThANKS :)

kaustubh () - 6 years ago - Reply 0


Sorry, this is a dummy comment.

Ricardo Machado () - 6 years ago - Reply 0


In the css there is a width: 100vw; that will ruin your day.

Curtis Linville () - 6 years ago - Reply 0


Help always welcomed :)

kaustubh () - 6 years ago - Reply 0


Look so Cool, and easy to applied to prepared page composition ( I guest)

Lintang pinanjera () - 6 years ago - Reply 0


thanks :)

kaustubh () - 6 years ago - Reply 0