7+ Bootstrap Contact Form Examples

This post contains a total of 7+ Bootstrap Contact Form Examples with Source Code. All these Contact Forms are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Contact Form Examples

1. By Ikbal Hossain

Made by Ikbal Hossain. Bootstrap Contact form design with Multi Contact Person. Source

Bootstrap Contact Form by Ikbal Hossain
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css'>
<style>
/*footer_con*/

.footer_contact_form_sec {
    padding: 100px 0px;
    background-color: #fff;
}

.left_foo_con_sec {
    box-shadow: 0 10px 60px 0 rgb(159 164 189 / 70%);
    padding: 30px;
    width: 95%;
}

.single_persion_con {
    box-shadow: 0 10px 60px 0 rgb(159 164 189 / 70%);
    margin-bottom: 40px;
    padding: 20px;
}

.con_foo_input_wrapper input,
.con_foo_input_wrapper select,
.con_foo_input_wrapper textarea {
    width: 100%;
    height: 40px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%);
    border: none;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
}

.con_foo_input_wrapper input::placeholder,
.con_foo_input_wrapper select::placeholder,
.con_foo_input_wrapper textarea::placeholder {
    font-weight: 600;

}

.con_foo_input_wrapper .file_type {
    height: 47px;
}

.con_foo_input_wrapper label {
    font-weight: 600;
    font-size: 14px;
}

.con_foo_input_wrapper textarea {
    height: 100px;
}

.con_foo_input_wrapper {
    margin-bottom: 20px;
}

.left_foo_con_sec h4 {
    font-weight: 700;
    margin-bottom: 20px;
}

.single_persion_con h4 {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.single_persion_con p {
    font-size: 13px;
    color: #777676;
    font-family: 'Poppins', sans-serif;
}

.single_persion_con ul li a {
    color: #484848;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
}
.single_persion_con ul li{
  list-style:none
}
.single_persion_con ul{
  padding-left:0;
}

.single_persion_con ul li a i {
    color: #e85516;
    font-size: 18px;
}
.banner_btn {
    border-radius: 50px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 50px;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin-top: 20px;
    transition: ease-in all 0.3s;
    background-image: linear-gradient(to right, #dd100e, #ea6117);
}
</style>
</head>
<body>
  <section class="footer_contact_form_sec">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="left_foo_con_sec" data-aos="fade-up" data-aos-duration="1500">
                        <h4>Personal Details</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>Name<sub>*</sub></label>
                                    <input type="text" class="" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>Email Address<sub>*</sub></label>
                                    <input type="text" class="" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>Phone Number<sub>*</sub></label>
                                    <input type="text" class="" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>Skype ID</label>
                                    <input type="text" class="" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>What is your interest?<sub>*</sub></label>
                                    <select>
                                        <option value="Select Option">Select Option</option>
                                        <option value="Website Development">Website Development</option>
                                        <option value="E-commerce Development">E-commerce Development</option>
                                        <option value="Branding">Branding</option>
                                        <option value="App Development">App Development</option>
                                        <option value="Domains &amp; Hosting">Domains &amp; Hosting</option>
                                        <option value="Just having a Coffee">Just having a Coffee</option>
                                        <option value="Working at TenTwenty">Working at TenTwenty</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="con_foo_input_wrapper">
                                    <label>Where did you here about us?<sub>*</sub> </label>
                                    <select>
                                        <option value="Select Option">Select Option</option>
                                        <option value="Google">Google</option>
                                        <option value="Clutch">Clutch</option>
                                        <option value="People Per Hour">People Per Hour</option>
                                        <option value="Good Firms">Good Firms</option>
                                        <option value="Personal Reference">Personal Reference</option>
                                        <option value="Social Media">Social Media</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="con_foo_input_wrapper">
                                    <label>Your Message</label>
                                    <textarea></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="con_foo_input_wrapper">
                                    <label>Attach files</label>
                                    <input class="file_type" type="file" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <a href="#" class="banner_btn animate__slideInUp animate__animated">Submit</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="right_persion_con_sec">
                        <div class="single_persion_con" data-aos="fade-up" data-aos-duration="500">
                            <h4 class="theme_color">Speak to Ali</h4>
                            <p>Director (India) & (UK)</p>
                            <ul>
                                <li><a href="#"><i class="las la-phone-volume"></i> +91 91224545755</a></li>
                                <li><a href="#"><i class="las la-envelope"></i> <span class="#">[email protected]</span></a></li>
                            </ul>
                        </div>
                        <div class="single_persion_con" data-aos="fade-up" data-aos-duration="1000">
                            <h4 class="theme_color">Speak to Roger</h4>
                            <p>Director (India) & (UK)</p>
                            <ul>
                                <li><a href="#"><i class="las la-phone-volume"></i> +91 91224545755</a></li>
                                <li><a href="#"><i class="las la-envelope"></i> <span class="#">[email protected]</span></a></li>
                            </ul>
                        </div>
                        <div class="single_persion_con" data-aos="fade-up" data-aos-duration="1500">
                            <h4 class="theme_color">Speak to Meril</h4>
                            <p>Director (India) & (UK)</p>
                            <ul>
                                <li><a href="#"><i class="las la-phone-volume"></i> +91 91224545755</a></li>
                                <li><a href="#"><i class="las la-envelope"></i> <span class="#">[email protected]</span></a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    </body>
</html>

2. By manoj

Made by manoj. Bootstrap Contact Form with Yellow Background. Source

Bootstrap Contact Form by manoj
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style>
html, 
body{
  color: #000;
  background-color: #fcda2e !important;
  font-family: "Roboto", sans-serif;
    }
    .contact-form {
        padding: 50px;
        margin: 30px auto;
    }	
    .contact-form h1 {
        font-size: 42px;
        font-family: 'Pacifico', sans-serif;
        margin: 0 0 50px;
        text-align: center;
    }
    .contact-form .form-group {
        margin-bottom: 20px;
    }
    .contact-form .form-control, .contact-form .btn {
        min-height: 38px;
        border-radius: 2px;
    }
	.contact-form .form-control {
		border-color: #e2c705;
	}
	.contact-form .form-control:focus {
		border-color: #d8b012;
		box-shadow: 0 0 8px #dcae10;
	}
    .contact-form .btn-primary {
        min-width: 250px;
        color: #fcda2e;
        background: #000;
        margin-top: 20px;
        border: none;
    }
    .contact-form .btn-primary:hover {
        color: #fff; 
    }
    .contact-form .btn-primary i {
        margin-right: 5px;
    }
    .contact-form label {
        opacity: 0.9;
    }
    .contact-form textarea {
        resize: vertical;
    }
    .bs-example {
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2 m-auto">
			<div class="contact-form">
				<h1>Get in Touch</h1>
				<form action="/examples/actions/confirmation.php" method="post">
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label for="inputName">Name</label>
								<input type="text" class="form-control" id="inputName" required>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label for="inputEmail">Email</label>
								<input type="email" class="form-control" id="inputEmail" required>
							</div>
						</div>
					</div>            
					<div class="form-group">
						<label for="inputSubject">Subject</label>
						<input type="text" class="form-control" id="inputSubject" required>
					</div>
					<div class="form-group">
						<label for="inputMessage">Message</label>
						<textarea class="form-control" id="inputMessage" rows="5" required></textarea>
					</div>
					<div class="text-center">
						<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
					</div>            
				</form>
			</div>
		</div>
	</div>
</div>
</body>
</html>

3. By Mey

Made by Mey. Contact form with left Sidebar. Source

Bootstrap Contact Form by Mey
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <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>
<style>
body{
		background-color: #25274d;
	}
	.contact{
		padding: 4%;
		height: 400px;
	}
	.col-md-3{
		background: #ff9b00;
		padding: 4%;
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
	}
	.contact-info{
		margin-top:10%;
	}
	.contact-info img{
		margin-bottom: 15%;
	}
	.contact-info h2{
		margin-bottom: 10%;
	}
	.col-md-9{
		background: #fff;
		padding: 3%;
		border-top-right-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
	}
	.contact-form label{
		font-weight:600;
	}
	.contact-form button{
		background: #25274d;
		color: #fff;
		font-weight: 600;
		width: 25%;
	}
	.contact-form button:focus{
		box-shadow:none;
	}
</style>
</head>
<body>
<div class="container contact">
	<div class="row">
		<div class="col-md-3">
			<div class="contact-info">
				<img src="https://image.ibb.co/kUASdV/contact-image.png" alt="image"/>
				<h2>Contact Us</h2>
				<h4>We would love to hear from you !</h4>
			</div>
		</div>
		<div class="col-md-9">
			<div class="contact-form">
				<div class="form-group">
				  <label class="control-label col-sm-2" for="fname">First Name:</label>
				  <div class="col-sm-10">          
					<input type="text" class="form-control" id="fname" placeholder="Enter First Name" name="fname">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="lname">Last Name:</label>
				  <div class="col-sm-10">          
					<input type="text" class="form-control" id="lname" placeholder="Enter Last Name" name="lname">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="email">Email:</label>
				  <div class="col-sm-10">
					<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
				  </div>
				</div>
				<div class="form-group">
				  <label class="control-label col-sm-2" for="comment">Comment:</label>
				  <div class="col-sm-10">
					<textarea class="form-control" rows="5" id="comment"></textarea>
				  </div>
				</div>
				<div class="form-group">        
				  <div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Submit</button>
				  </div>
				</div>
			</div>
		</div>
</body>
</html>

4. By Shamim khan

Made by Shamim khan. Bootstrap contact form with Image. Source

Bootstrap Contact Form by shamim khan
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
  <section id="reservation" class="book-table-wrapper">
  <div class="container">
    <div class="row">
      <div class="wow slideInRight col-xs-12 col-sm-6 animated" style="visibility: visible; animation-name: slideInRight;">
        <div class="booking-image">
          <img src="https://radiustheme.com/demo/html/redchili/redchili/img/chef/1.png" alt="Chef">
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="booking-back text-center">
          <div class="booking-form">
            <h1>book a table</h1>
            <p class="slogan">best of drinks experience</p>
            <form id="booking_form" name="bookingForm" method="post" action="php/reservation-main.php" abineguid="4319ACD2FE1E42D681759AED283E85CD">
              <div class="row">
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="tel" name="phone" placeholder="phone">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input id="email-reservation" class="form-control" type="email" name="mail" placeholder="e-mail">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="person-no" placeholder="number of person">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input id="datepicker" class="form-control hasDatepicker" type="text" name="date" placeholder="date">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="time" placeholder="time">
                </div>
                <div class="col-xs-12 col-sm-12">
                  <textarea class="form-control" rows="3" name="message" placeholder="message &amp; special request"></textarea>
                </div>
                <div class="form-group col-xs-12 reply">
                  <div id="reservation_mail_success" class="success" style="display:none;">Your message has been sent successfully. </div>
                  <div id="reservation_mail_fail" class="error" style="display:none;"> Sorry, error occured this time sending your message. </div>
                </div>
                <button id="send-message-reservation" type="submit" class="btn">make a reservation</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</section>
</body>
</html>

5. By Alexander

Made by Alexander. Simple Bootstrap Contact form. Source

Bootstrap Contact Form by alexander
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, input {
    overflow: visible;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    cursor: pointer;
}
textarea {
    overflow: auto;
    resize: vertical;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
      position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}
.col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
}
.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}
textarea.form-control {
    height: auto;
}

.form-group {
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
}
.mb-5, .my-5 {
    margin-bottom: 3rem !important;
}
.p-4 {
    padding: 1.5rem !important;
}
.p-md-5 {
    padding: 3rem !important;
}
.text-center {
    text-align: center !important;
}
.heading-section {
    font-size: 28px;
    color: #000;
}

.img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.form-control {
    height: 50px;
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    border-radius: 5px;
    border: none;
    -webkit-box-shadow: 0px 8px 19px -13px rgba(0, 0, 0, 0.09) !important;
    -moz-box-shadow: 0px 8px 19px -13px rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0px 8px 19px -13px rgba(0, 0, 0, 0.09) !important;
}

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(0, 0, 0, 0.3) !important;
}
textarea.form-control {
    height: inherit !important;
}

.wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.btn {
    padding: 12px 16px;
    cursor: pointer;
    border-width: 1px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    -webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
    position: relative;
    margin-bottom: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.btn.btn-primary {
    background: #71a95a !important;
    border-color: #71a95a !important;
    color: #fff;
}
.contactForm .label {
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.contactForm .form-control {
    border: none;
}
#contactForm .form-control {
    font-size: 16px;
}

#message {
    resize: vertical;
}

#form-message-warning, #form-message-success {
    display: none;
}

#form-message-warning {
    color: red;
}

#form-message-success {
    color: #28a745;
    font-size: 18px;
    font-weight: 500;
}

.submitting {
    float: left;
    width: 100%;
    padding: 10px 0;
    display: none;
    font-size: 16px;
    font-weight: 500;
}
</style>
</head>
<body>
  <section class="ftco-section">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-10">
					<div class="wrapper img" style="background-image: url(https://preview.colorlib.com/theme/bootstrap/contact-form-08/images/ximg.jpg.pagespeed.ic.y-LWuYha7u.webp);">
						<div class="row">
							<div class="col-md-9 col-lg-7">
								<div class="contact-wrap w-100 p-md-5 p-4">
									<h3 class="mb-4">Get in touch with us</h3>
									<div id="form-message-warning" class="mb-4"></div> 
				      		<div id="form-message-success" class="mb-4">
				            Your message was sent, thank you!
				      		</div>
									<form method="POST" id="contactForm" name="contactForm" class="contactForm" novalidate="novalidate">
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label class="label" for="name">Full Name</label>
													<input type="text" class="form-control" name="name" id="name" placeholder="Name">
												</div>
											</div>
											<div class="col-md-6"> 
												<div class="form-group">
													<label class="label" for="email">Email Address</label>
													<input type="email" class="form-control" name="email" id="email" placeholder="Email">
												</div>
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<label class="label" for="subject">Subject</label>
													<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject">
												</div>
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<label class="label" for="#">Message</label>
													<textarea name="message" class="form-control" id="message" cols="30" rows="4" placeholder="Message"></textarea>
												</div>
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<input type="submit" value="Send Message" class="btn btn-primary">
													<div class="submitting"></div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

</body>
</html>

6. By Submit Form App

Made by Submit Form App. Demo Contact Us Form. Source

Bootstrap Contact Form by submit form app
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<style>
body{
    background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
}
.contact-form{
    background: #fff;
    margin-top: 10%;
    margin-bottom: 5%;
    width: 70%;
}
.contact-form .form-control{
    border-radius:1rem;
}
.contact-image{
    text-align: center;
}
.contact-image img{
    border-radius: 6rem;
    width: 11%;
    margin-top: -3%;
    transform: rotate(29deg);
}
.contact-form form{
    padding: 14%;
}
.contact-form form .row{
    margin-bottom: -7%;
}
.contact-form h3{
    margin-bottom: 8%;
    margin-top: -10%;
    text-align: center;
    color: #0062cc;
}
.contact-form .btnContact {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    background: #dc3545;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.btnContactSubmit
{
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    color: #fff;
    background-color: #0062cc;
    border: none;
    cursor: pointer;
}
</style>
</head>
<body>
  <div class="container contact-form">
            <div class="contact-image">
                <img src="https://image.ibb.co/kUagtU/rocket_contact.png" alt="rocket_contact"/>
            </div>
            <form method="post" action="#">
                <h3>Drop Us a Message</h3>
               <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea>
                        </div>
                    </div>
                </div>
            </form>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</body>
</html>

7. By Godwin

Made by Godwin. Basic Bootstrap Form. Source

Bootstrap Contact Form by godwin
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css'>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<style type="text/css">
.outer-margin {
   margin:3px;
}
.wrapper{
  max-width:500px;
  margin:auto; /* position left. right and atuo for middle  */
  margin-top:20px;
  padding:20px;
  }
input[type='text'],
textarea { width:100%;
}
::-webkit-input-placeholder {
    color:#888;
}
:-moz-placeholder {
    color:#888;
}
::-moz-placeholder {
    color:#888;
}
:-ms-input-placeholder {
    color:#888;
}
/* Placeholder disappears on focus */
input:focus::-webkit-input-placeholder  {color:transparent !IMPORTANT;}
input:focus::-moz-placeholder   {color:transparent !IMPORTANT;}
input:-moz-placeholder   {color:transparent !IMPORTANT;}
textarea:focus::-webkit-input-placeholder  {color:transparent !IMPORTANT;}
textarea:focus::-moz-placeholder   {color:transparent !IMPORTANT;}
textarea:-moz-placeholder   {color:transparent !IMPORTANT;}
.style1 {color: #FF0000}
textarea {
 height:70px !IMPORTANT;
 }
 .input-row {
  display:block;
  min-height:85px;
  margin-bottom:-5px;
}
</style>
<!-- End Head -->
</head>
<body>
<!-- Place All in Body -->
<div class="outer-margin">
  <div class="wrapper">
    <form name="jQueryBootstrapForm" id="jQueryBootstrapForm" action="assets/formmail.php" method="post" enctype='multipart/form-data' autocomplete="on">
      <!-- Text input-->
      <div class="input-row">
        <label class="control-label" for="fullname">Full Name</label>
        <div class="inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input  name="fullname" id="fullname" placeholder="Full Name *" class="form-control" type="text">
          </div>
          <label style="color:red; font-weight:normal;" class="error" for="fullname" generated="true"></label>
        </div>
      </div>
      <!-- Text input-->
      <div class="input-row">
        <label class="control-label" for="email">E-Mail</label>
        <div class="inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
            <input name="email" id="email" placeholder="Email *" class="form-control" type="text">
          </div>
          <label style="color:red; font-weight:normal;" class="error" for="email" generated="true"></label>
        </div>
      </div>
      <!-- Text input-->
      <div class="input-row">
        <label class="control-label" for="phone">Phone </label>
        <div class="inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
            <input name="phone" id="phone" placeholder="Phone (Optional)" class="form-control optional phone" type="text">
          </div>
          <label style="color:red; font-weight:normal;" class="error" for="phone" generated="true"></label>
        </div>
      </div>
      <!-- Text area -->
      <div style="display:block; min-height:120px; margin-top:-5px;">
        <label class="control-label" for="comment">Comment</label>
        <div class="inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
            <textarea class="form-control" name="comment" id="comment" placeholder="Message *" onKeyUp="limitTextCount('comment', 'divcount', 1000);" onKeyDown="limitTextCount('comment', 'divcount', 1000);"></textarea>
          </div>
          <span id="divcount" style="font-size:0.8em; color:#999999; margin-top:4px; float:right;">1000 Countdown</span>
          <label style="color:red; font-weight:normal;" class="error" for="comment" generated="true"></label>
        </div>
      </div>
      <div class="input-row" style="margin-bottom:-20px;">
        <div>
          <input type="submit" value="Submit" class="btn btn-lg" style="position:relative;">
        </div>
      </div>
    </form>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

8. By Kyra

Made by Kyra. Bootstrap Contact Form with Captcha. Source

Bootstrap Contact Form by kyra
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
</head>
  <body>
  	<div class="container">
  		<div class="row">
  			<div class="col-md-6 col-md-offset-3">
  				<h1 class="page-header text-center">Contact Form Example</h1>
				<form class="form-horizontal" role="form" method="post" action="index.php">
					<div class="form-group">
						<label for="name" class="col-sm-2 control-label">Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
							
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
							<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" value="">

						</div>
					</div>
					<div class="form-group">
						<label for="message" class="col-sm-2 control-label">Message</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="4" name="message"></textarea>
							
						</div>
					</div>
					<div class="form-group">
						<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
				
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2">
							<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2">

						</div>
					</div>
				</form> 
			</div>
		</div>
	</div>   
</body>
</html>