Input Form Shortcodes

										
<form action="mail.php" method="POST">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="contact-from-heading">
<h3>Style 1</h3>
</div>
<div class="contact-from-left">
<div class="input-text">
<input type="text" placeholder="Your name *" name="name" id="name"/>
</div>
<div class="input-text">
<input type="email" placeholder="Your Email *" name="email" id="email"/>
</div>
<div class="input-text">
<input type="text" placeholder="Your Phone *" name="subject" id="subject"/>
</div>
<div class="input-submit">
<input type="submit" value="send message" name="submitMessage" id="submitMessage"/>
</div>
</div>
<div class="contact-from-right">
<div class="input-message">
<textarea id="message" placeholder="Your message *" name="message"></textarea>
</div>
</div>
</div>
</form>

<div class="col-md-6 col-xs-12">
<h4>Log In Input Form</h4>
<div class="tb-login-form ">
<form action="#">
<p class="checkout-coupon top log a-an">
<label class="l-contact">
Email Address
<em>*</em>
</label>
<input type="email">
</p>
<p class="checkout-coupon top-down log a-an">
<label class="l-contact">
Password
<em>*</em>
</label>
<input type="password">
</p>
<div class="forgot-password1">
<label class="inline2">
<input type="checkbox" name="rememberme7">
Remember me! <em>*</em>
</label>
<a class="forgot-password" href="#">Forgot Your password?</a>
</div>
<p class="login-submit5">
<input class="button-primary" type="submit" value="login">
</p>
</form>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h4>Create New Account Form</h4>
<div class="tb-login-form res">
<form action="#">
<p class="checkout-coupon top log a-an">
<label class="l-contact">
Email Address
<em>*</em>
</label>
<input type="email">
</p>
<p class="login-submit5 ress">
<input value="SignUp" class="button-primary" type="submit">
</p>
</form>
<div class="tb-info-login ">
<h5 class="tb-title4">SignUp today and you'll be able to:</h5>
<ul>
<li>Speed your way through the checkout.</li>
<li>Track your orders easily.</li>
<li>Keep a record of all your purchases.</li>
</ul>
</div>
</div>
</div>										
										
									

										
.contact-from-heading h3{
font-size: 20px;
font-weight: 500;
margin-bottom: 45px;
position: relative;
}
.input-text input {
border: 1px solid #c9c9c9;
padding: 10px 15px;
width: 100%;
margin-bottom: 20px;
}
.input-message textarea {
border: 1px solid #c9c9c9;
width: 100%;
height: 166px;
padding: 15px;
}
.input-submit > input {
padding: 8px 30px;
}
.input-submit > input:hover{background:#363636;}
.contact-from-left {
float: left;
width: 38%;
}

/*Log in Css*/
.login-area {
padding-bottom: 66px;
padding-top: 78px;
}
.checkout-coupon.top-down.log {
width: 100%;
}
.checkout-coupon.top.log{
float: left;
width: 100%;
}
.forgot-password {
float: right;
}
.login-area .tb-login-form h5.tb-title, .tb-info-login  h5.tb-title4 {
border-bottom: 1px solid #f0f0f0;
color: #525151;
font-size: 20px;
font-weight: 400;
margin-bottom: 20px;
padding-bottom: 15px;
text-transform: uppercase;
line-height: 19px;
}
.tb-info-login h5.tb-title4 {
border-bottom: 0 solid #f0f0f0;
margin-top: 40px;
}
.login-area .tb-login-form > p {
color: #666666;
font-size: 15px;
font-weight: 400;
margin-bottom: 20px !important;
}
.login-area .tb-login-form .tb-social-login {
margin-bottom: 30px;
}
.tb-login-form .tb-social-login > a.tb-facebook-login {
background: #3d5c98 none repeat scroll 0 0;
}
.tb-login-form .tb-social-login > a {
color: #ffffff;
display: inline-block;
font-size: 15px;
min-width: 250px;
padding: 12px 30px;
text-align: center;
}
.tb-login-form .tb-social-login > a.tb-twitter-login {
background: #22aadf none repeat scroll 0 0;
float: right;
}
.tb-login-form .tb-social-login > a:hover {
opacity: 0.7;
}
.tb-login-form .tb-social-login > a > i {
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
.checkout-coupon.top.log.a-an, .checkout-coupon.top-down.log.a-an {
margin-bottom: 40px;
}
.inline2 > input {
margin-right: 11px;
}
.tb-login-form > form .forgot-password {
color: #ef6644;
float: right;
font-size: 14px;
font-weight: 400;
}
.tb-login-form > form > p.login-submit5 > input {
background: #363636 none repeat scroll 0 0;
border: 1px solid #363636;
color: #fff;
display: inline-block;
font-size: 12px;
line-height: 24px;
padding: 10px 30px 5px;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease 0s;
width: 120px;
}
.tb-login-form > form > p.login-submit5 > input:hover {
background: #24CCD7 none repeat scroll 0 0;
border-color: #24CCD7;
color: #ffffff;
}
.forgot-password1 {
margin-bottom: 33px;
}
.forgot-password1 .inline2 > em {
color: #ef6644;
font-size: 15px;
right: -10px;
top: 0;
}
.tb-register-form .tb-info > ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.tb-info-login  > ul > li::before {
color: #ef6644;
display: inline-block;
font-family: FontAwesome;
font-size: 14px;
margin-right: 10px;
vertical-align: middle;
}
.tb-info-login  > ul > li {
color: #8b8b8b;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
.tb-info-login > ul > li {
width: 100%;
}
.checkout-coupon.top-down > input[type="text"], p.checkout-coupon input[type="email"], p.checkout-coupon input[type="password"] {
width: 100%;
}
p.checkout-coupon input[type="text"], p.checkout-coupon input[type="email"], p.checkout-coupon input[type="password"] {
border: 1px solid #d3d3d3;
color: #777;
height: 42px;
padding-left: 10px;
width: 100%;
}