Best Html5 Bootstrap Responsive Contact Form for Your Website Design
generating preview
<!DOCTYPE html>
<html>
<title>Best Html5 Bootstrap Responsive Contact Form for Your Website Design </title>
<body>
<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>
<section class="get-in-touch">
<h1 class="title">Contact Form</h1>
<form class="contact-form row">
<div class="form-field col-lg-6 col-md-6 col-sm-6">
<input id="name" class="input-text js-input" type="text" required>
<label class="label" for="name">First Name</label>
</div>
<div class="form-field col-lg-6 col-md-6 col-sm-6">
<input id="name" class="input-text js-input" type="text" required>
<label class="label" for="name">Last Name</label>
</div>
<div class="form-field col-lg-6 col-md-6 col-sm-6">
<input id="name" class="input-text js-input" type="text" required>
<label class="label" for="phone">Phone</label>
</div>
<div class="form-field col-lg-6 col-md-6 col-sm-6">
<input id="email" class="input-text js-input" type="email" required>
<label class="label" for="email">E-mail</label>
</div>
<div class="form-field col-lg- col-md-6 col-sm-6">
<input id="address" class="input-text js-input" type="text" required>
<label class="label" for="address">Address</label>
</div>
<div class="form-field col-lg-6 col-md-6 col-sm-6">
<input id="city" class="input-text js-input" type="text" required>
<label class="label" for="city">City</label>
</div>
<div class="form-field col-lg-12">
<input id="message" class="input-text js-input" type="text" required>
<label class="label" for="message">Message</label>
</div>
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="Submit">
</div>
</form>
</section>
<style>
.get-in-touch { max-width: 800px; margin: 20px auto; position: relative; border:1px solid #ccc; padding: 37px 64px; -webkit-box-shadow: 0 0 5px 5px #CCCCCC; box-shadow: 0 0 5px 5px #CCCCCC;}
.get-in-touch .title { text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 2.8em; line-height: 48px; padding-bottom: 48px; color: #5543ca; background: #5543ca; background: -moz-linear-gradient(left,#f4524d 0%,#5543ca 100%) !important; background: -webkit-linear-gradient(left,#f4524d 0%,#5543ca 100%) !important; background: linear-gradient(to right,#f4524d 0%,#5543ca 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.contact-form .form-field { position: relative; margin: 15px 0;}
.contact-form .input-text { display: block; width: 100%; height: 36px; border-width: 0 0 2px 0; border-color: #5543ca; font-size: 18px; line-height: 26px; font-weight: 400;}
.contact-form .input-text:focus { outline: none;}
.contact-form .input-text:focus + .label, .contact-form .input-text.not-empty + .label { -webkit-transform: translateY(-24px); transform: translateY(-24px);}
.contact-form .label { position: absolute; left: 20px; bottom: 11px; font-size: 18px; line-height: 26px; font-weight: 400; color: #5543ca; cursor: text; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;}
.contact-form .submit-btn { display: inline-block; background-color: #000; background-image: linear-gradient(125deg,#a72879,#064497); color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; padding: 8px 16px; border: none; width:200px; cursor: pointer;}
</style>
</body>
</html>
How to Use this Elements / Source Code:
You Can Use Best Html5 Bootstrap Responsive Contact Form for Your Website Design elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Best Html5 Bootstrap Responsive Contact Form for Your Website Design where ever you want for your project.
Usage of Best Html5 Bootstrap Responsive Contact Form for Your Website Design:
You Can Use this Free HTML Bootstrap Contact Form Template for Top Free HTML5 & CSS3 Contact Form Templates in 2021 for your website Designing. This is based on the default themed classic form. This is a Responsive Contact Form Template. Beginner level website designer search for How To Create a Responsive Form with html & CSS this They can used this html Structure. This is a very attractive contact form. You can also modify this form fields then you can modify as a Login form, Career form, Registration form etc.