JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/bootstrap.js"></script>
<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<section class="forms" id="formzakaz">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form action="" class="main_form" novalidate target="_blank" method="POST">
<h2>Отправьте заявку и получите ваш подарок!</h2>
<label class="form-group">
Ваше имя:
<input type="text" name="name" placeholder="Ваше Имя" data-validation-required-message="*Вы не ввели имя" required />
<span class="help-block text-danger"></span>
</label>
<label class="form-group">
Ваш номер телефона:
<input type="text" name="phone" placeholder="Ваш номер телефона" data-validation-required-message="*Вы не ввели номер телефона" required />
<span class="help-block text-danger"></span>
</label>
<label class="form-group">
Ваш E-mail:
<input type="email" name="Email" placeholder="Ваш E-mail" data-validation-required-match="email" data-validation-required-message="*Вы не ввели E-mail" required />
<span class="help-block text-danger"></span>
</label>
<button>Отправьте заявку</button>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
CSS
section.forms {background-color: #F0EDEB;margin-top:-15px}
section.forms .main_form {
background-color: #FFF;
border: 10px solid #dfdfdf;
border-radius: 10px;
margin: -11px auto;
width: 400px
}
section.forms .main_form h2 {
background-color: #FF7C66;
font-size: 18px;
color: #FFF;
text-transform: uppercase;
text-align: center;
padding: 15px;
border-bottom: 5px solid #db6b58;
margin-bottom: 30px;
margin-top: 0;
position: relative;
z-index: 100
}
section.forms .main_form h2::after,section.forms .main_form h2::before {
content: '';
position: absolute;
background: #ff7c66;
left: 50%;
bottom: -13px;
width: 20px;
height: 20px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-bottom: 5px solid #db6b58;
border-right: 5px solid #db6b58;
z-index: 1;
opacity: 0.99
}
section.forms .main_form .form-group {
display: block;
margin-bottom: 20px;
font-size: 14px;
color: #000;
font-weight: 600;
padding-left: 20px
}
section.forms .main_form .form-group input {
display: block;
width: 328px;
border: 1px solid #ccc;
margin-top: 5px;
line-height: 44px;
text-indent: 12px;
background-color: transparent;
font-size: 12px;
border-radius: 5px;
border: 2px solid #e0e0e0
}
section.forms .main_form .form-group .text-danger {color: red}
section.forms .main_form button {
border: none;
color: #FFF;
line-height: 52px;
padding: 0 25px;
font-size: 21px;
font-weight: 600;
margin-top: 10px;
width: 328px;
margin: 0 0 40px 20px;
background-color: #70C45D;
border-radius: 5px;
border-bottom: 3px solid #639a57;
background-image: url(../img/fa-arrow-circle-right.png);
background-position: 265px center;
background-repeat: no-repeat
}
JavaScript
$(document).ready(function() {
$("input").jqBootstrapValidation();
});