"Two column form"
Bootstrap 3.3.0 Snippet by Salehin

<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 ----------> <div class="container"> <div class="row"> <div class="inner contact"> <!-- Form Area --> <!-- Form --> <form id="contact-us" method="post" action="#"> <!-- Left Inputs --> <div class="col-sm-6 col-xs-12 big-gutter" data-wow-delay=".5s"> <!-- Business Name --> <div class="form-group"> <div class="text-effect"> <span>Business Name</span> <input type="text" autocomplete="off" class="form-control focus-text field-input" /> </div> </div> <div class="form-group"> <div class="text-effect"> <span>Address</span> <input type="text" autocomplete="off" class="form-control focus-text field-input" /> </div> </div> <div class="row"> <div class="col-sm-6 col-xs-12"> <!-- City --> <div class="form-group"> <div class="text-effect"> <span>City</span> <input type="text" autocomplete="off" class="form-control focus-text field-input" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <select class="field-select form-control"> <option value="" disabled selected>State</option> <option value="Ahmedabad">Gujarat</option> </select> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-xs-12"> <!-- City --> <div class="form-group"> <div class="text-effect"> <span>Zip</span> <input autocomplete="off" type="text" class="form-control focus-text field-input" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <select class="form-control field-select"> <option disabled="" selected="">Country</option> <option value="Afghanistan"> India </option> <option value="...">...</option> </select> </div> </div> </div> </div> <!-- End Left Inputs --> <!-- Right Inputs --> <div class="col-sm-6 col-xs-12 big-gutter" data-wow-delay=".5s"> <!-- Web URL --> <div class="form-group"> <div class="text-effect"> <span>Web URL</span> <input autocomplete="off" type="text" class="form-control focus-text field-input" /> </div> </div> <!-- Phone --> <div class="form-group"> <div class="text-effect"> <span>Phone</span> <input autocomplete="off" type="text" class="form-control focus-text field-input" /> </div> </div> <!-- Contact Name --> <div class="form-group"> <div class="text-effect"> <span>Contact Name</span> <input autocomplete="off" type="text" class="form-control focus-text field-input" /> </div> </div> <!-- Contact Email --> <div class="form-group"> <div class="text-effect"> <span>Contact Email</span> <input autocomplete="off" type="text" class="form-control focus-text field-input" /> </div> </div> </div> <!-- End Right Inputs --> <!-- Captcha start --> <div class="relative fullwidth col-xs-12 col-md-12 text-center"> <!-- Captcha --> <img class="mt-20 mb-40" src="capcha.png"> </div> <!-- Captcha end --> <div class="relative fullwidth col-xs-12 col-md-12"> <!-- Send Button --> <button type="submit" id="submit" name="submit" class="form-btn semibold">Get My Competitors</button> </div> <!-- End Bottom Submit --> <!-- Clear --> <div class="clear"></div> </form> <!-- End Contact Form Area --> </div> <br/> <br/> <br/> <div class="container"> <div class="row"><a href="#" data-toggle="modal" data-target="#myModal" class="btn-compitetor pull-right"><i class="fa fa-plus" aria-hidden="true"></i> Add Competitor</a></div> <div class="row"> <div class="list-group list-group-flex"> <div class="left-side"> <label> <input type="checkbox" value=""> <span class="checkmark"> </span> </label> </div> <div class="right-side"> <h4 class="listing-title">Hotel Nikko</h4> <div class="listing-detials"> <ul class="list-inline"> <li><i class="fa fa-map-marker" aria-hidden="true"></i> <span>222, Mason St, san Francisco, CA 94102</span></li> <li><i class="fa fa-phone" aria-hidden="true"></i> <span>+01 1245 2541</span></li> <li> <span>www.hotelnikko.com</span></li> </ul> </div> </div> </div> <div class="list-group list-group-flex"> <div class="left-side"> <label> <input type="checkbox" value=""> <span class="checkmark"> </span> </label> </div> <div class="right-side"> <h4 class="listing-title">Hotel Nikko</h4> <div class="listing-detials"> <ul class="list-inline"> <li><i class="fa fa-map-marker" aria-hidden="true"></i> <span>222, Mason St, san Francisco, CA 94102</span></li> <li><i class="fa fa-phone" aria-hidden="true"></i> <span>+01 1245 2541</span></li> <li> <span>www.hotelnikko.com</span></li> </ul> </div> </div> </div> </div> <div class="relative fullwidth col-xs-12 col-md-12 mt-40 mb-40"> <!-- Send Button --> <a href="#" class="form-btn semibold">Generate Report</a> </div> </div> <!-- Modal --> <div class="modal fade competitor-popup" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header border-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h3 class="modal-title text-center" id="myModalLabel">Add Competitor</h3> </div> <div class="modal-body"> <!-- Form --> <div class="row"> <div class="inner contact"> <!-- Form Area --> <div class="contact-form"> <!-- Form --> <form id="contact-us" method="post" action="#"> <!-- Left Inputs --> <div class="col-xs-12 wow animated slideInLeft" data-wow-delay=".5s"> <!-- Business Name --> <input type="text" name="name" id="name" required="required" class="field-input" placeholder="Business Name" /> <!-- Address --> <input type="text" name="address" id="address" required="required" class="field-input" placeholder="Address" /> <!-- Subject --> <div class="row"> <div class="col-xs-6"> <!-- City --> <input type="text" name="City" id="city" required="required" class="field-input" placeholder="City" /> </div> <div class="col-xs-6"> <select class="field-select form-control"> <option value="" disabled selected>State</option> <option value="Ahmedabad">Ahmedabad</option> </select> </div> </div> <div class="row"> <div class="col-xs-6"> <!-- City --> <input type="text" name="Zip" id="zip" required="required" class="field-input" placeholder="Zip" /> </div> <div class="col-xs-6"> <select class="field-select form-control"> <option value="" disabled selected>Country</option> <option value="India">India</option> </select> </div> </div> </div> <!-- End Left Inputs --> <!-- Right Inputs --> <div class="col-xs-12 wow animated slideInRight" data-wow-delay=".5s"> <!-- Web URL --> <input type="text" name="name" id="name" required="required" class="field-input" placeholder="Web URL" /> <!-- Phone --> <input type="text" name="Phone" id="mail" required="required" class="field-input" placeholder="Phone" /> </div> <!-- End Right Inputs --> <div class="relative fullwidth col-xs-12 mt-40 mb-40"> <!-- Send Button --> <button type="submit" id="submit" name="submit" class="form-btn semibold">Send Message</button> </div> <!-- End Bottom Submit --> <!-- Clear --> <div class="clear"></div> </form> </div> <!-- End Contact Form Area --> </div> <!-- End Inner --> </div> <!-- End Contact Form Area --> </div> </div> </div> </div> <!-- End Inner --> </div> </div>
/*---------------Listing start--------------------*/ .list-group-flex{ display: flex; align-items: center; justify-content:flex-start; background: #f0f0f0; font-weight:600; font-family: 'Roboto', sans-serif; margin-bottom:0; border-bottom:1px solid #fff; } .btn-compitetor{color:#111;padding:14px 0;font-family: 'Roboto', sans-serif;font-size: 15px;} .list-group-flex .left-side{padding:30px 32px;background:#e5e5e5;position:relative;} .list-group-flex .right-side{padding-left:30px;} .list-group-flex .listing-title{font-weight:600;} .listing-detials ul li{padding-right:60px;font-weight: 400;font-size: 1.65rem;} .listing-detials ul li i{color: #0265c0;font-size: 1.6rem;margin-right: 5px;} input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: relative; top: 0; left: 0; height: 22px; width: 22px; background-color: #fff; border: 2px solid #111; padding: 0 7px; } input:checked ~ .checkmark { background-color: #0265c0; border:2px solid #0265c0; } .checkmark:after { content: ""; position: absolute; display: none; } input:checked ~ .checkmark:after { display: block; } .checkmark:after { left: 6px; top: 1px; width: 7px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .border-0{border:none;} .competitor-popup .modal-content{padding:50px;border-radius:0;} .competitor-popup .modal-header .close { margin-top: 0; position: absolute; right: -10px; top: -10px; background: #000; color: #fff; opacity: 1; width: 30px; height: 30px; line-height: normal; border-radius: 100%; padding-bottom: 6px; border: 1px solid #fff; } .competitor-popup .modal-header .close span{position: relative;top: -1px;} /*---------------Listing end--------------------*/ /*---------------Inpput Animate start--------------------*/ .focus-t span { bottom: 30px !important; color: #000; font-size: 11px; transition: all 0.8s ease 0s; z-index:1; } .focus-t span:-webkit-autofill ~ label { bottom: 30px !important; color: #000; font-size: 11px; transition: all 0.8s ease 0s; z-index:1; } input.field-input, .field-select { box-shadow: none !important; z-index:2; background: no-repeat bottom,50% calc(100% - 1px); background-size: 0 100%,100% 100%; border: 0; -webkit-transition: background 0s ease-out; transition: background 0s ease-out; background-image: -webkit-linear-gradient(bottom,#3f51b5 2px,rgba(63,81,181,0) 0),-webkit-linear-gradient(bottom,rgba(0,0,0,.26) 1px,transparent 0); background-image: linear-gradient(0deg,#3f51b5 2px,rgba(63,81,181,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0); } .focus-t input{ border-color:rgba(0,0,0,0.26); background-size:100% 100%, 100% 100%; -webkit-transition-duration:.3s; transition-duration:.3s; } .text-effect { position: relative; height:55px; } .text-effect span { bottom:15px; position: absolute; z-index:1; pointer-events: none; } .focus-text{ } /*---------------Input Animate end--------------------*/ .contact .big-gutter { padding-left:35px; padding-right:35px; } .contact-text { margin:45px auto; } .mt-40{margin-top:40px;} .mb-40{margin-bottom:40px;} .mt-20{margin-top:20px;} .mb-20{margin-bottom:20px;} /* Input Styles */ .field-input, .field-select { width: 100%; padding:25px 15px 5px 0; background-color:transparent; margin-bottom: 25px; border-radius:0; color:#151515 !important; font-size: 14px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border: none; height:auto; box-shadow:none !important; } * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; } *:focus { outline: 0; box-shadow: none; } /* Generic Button Styles */ .form-btn { max-width:290px; width:100%; display: block; height: auto; padding:18px 15px; color:#fff; background:#111; border:none; border-radius:0; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; margin:auto; text-align:center; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10); -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10); } .form-btn:hover, .form-btn:focus {background:#333;color:white;border:none;} .form-btn:active{opacity: 0.9;} @media only screen and (max-width : 768px) { .listing-detials ul li {padding-right:10px;} } @media screen and (max-width: 767px) { .list-group-flex .right-side {padding-left: 15px;} .contact .big-gutter{padding-left:15px;padding-right:15px;} .field-input, .field-select{margin-bottom:5px;} .mtb-40{margin-bottom:20px;margin-top:20px;} }
$(document).ready(function () { $('.focus-text').focus(function(){ $(this).closest('div').addClass('focus-t'); }) $('.focus-text').blur(function(){ if($('.focus-text').length > 0 && $('.focus-text').val() != '1'){ $(this).closest('div').addClass('focus-t'); } else{ $(this).closest('div').removeClass('focus-t'); } }) });

Related: See More


Questions / Comments: