Bootstrap snippet: Highlighted contact form

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form,contact,user

<link rel="stylesheet" type="text/css" href="//"> <div class="container bootstrap snippet"> <section id="contact" class="gray-bg padding-top-bottom"> <div class="container bootstrap snippet"> <div class="row"> <form id="Highlighted-form" class="col-sm-6 col-sm-offset-3" action="contact.php" method="post" novalidate=""> <div class="form-group"> <label class="control-label" for="contact-name">Name</label> <div class="controls"> <input id="contact-name" name="contactName" placeholder="Your name" class="form-control requiredField Highlighted-label" data-new-placeholder="Your name" type="text" data-error-empty="Please enter your name"> <i class="fa fa-user"></i> </div> </div><!-- End name input --> <div class="form-group"> <label class="control-label" for="contact-mail">Email</label> <div class=" controls"> <input id="contact-mail" name="email" placeholder="Your email" class="form-control requiredField Highlighted-label" data-new-placeholder="Your email" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address"> <i class="fa fa-envelope"></i> </div> </div><!-- End email input --> <div class="form-group"> <label class="control-label" for="contact-message">Message</label> <div class="controls"> <textarea id="contact-message" name="comments" placeholder="Your message" class="form-control requiredField Highlighted-label" data-new-placeholder="Your message" rows="6" data-error-empty="Please enter your message"></textarea> <i class="fa fa-comment"></i> </div> </div><!-- End textarea --> <p><button name="submit" type="submit" class="btn btn-info btn-block" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-location-arrow"></i>Send Message</button></p> <input type="hidden" name="submitted" id="submitted" value="true"> </form><!-- End Highlighted-form --> </div> </div> </section> </div>
body{ background:#EEEEEE; } .contact-item h2{ font-size:18px; font-weight:600; margin-bottom:10px; } .contact-item .icon{ display:block; font-size:48px; color:#5cc9df; text-shadow:-2px 2px 0 rgba(0,0,0,0.1); -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } .contact-item .icon:hover{ color:#5cc9df; -webkit-transform:scale(1.3) translateY(-10px); transform:scale(1.3) translateY(-10px); } .bl_form { margin: 30px 0 0; } .bl_form input { padding-top: 15px; background: rgba(255,255,255,0.10); box-shadow: 0 4px 0px rgba(0,0,0,0.2); border: none; color: white; padding: 10px 15px; border-radius: 5px; font-size: 16px; outline: none; } .lb_wrap, .lb_wrap .lb_label.bottom { left: 66px !important; } .lb_wrap .lb_label.left { left: 0; } .lb_label { font-size:18px; line-height:32px; font-weight: 400; color: #ccc; } .no-placeholder .lb_label { display:none; } { color: #aaa; } #Highlighted-form .form-group label{ display:none; font-size:18px; line-height:24px; font-weight:100; text-transform:uppercase; } .form-group label{ display:block; } #Highlighted-form .controls { padding:0; margin-top:40px; } .controls { margin-top:0; } #Highlighted-form .form-control { display:inline; background:#fff; border:none; border-radius:5px; outline:none; box-shadow:0 4px 0 rgba(0,0,0,0.05); height:52px; font-size:18px; line-height:32px; color:#aaa; font-weight:400; padding-left:64px; vertical-align:top; } #Highlighted-form .form-group.half-width{ width:40%; float:left; } #Highlighted-form .form-group{ position:relative; } #Highlighted-form .form-group [class*=fa] { display:block; width:64px; position:absolute; top:0; left:5px; color:#eee; font-size:24px; line-height:52px; text-align:center; font-weight:300; -webkit-transition:color .3s ease-out; transition:color .3s ease-out; } #Highlighted-form .form-group [class*=fa].active{ color:#ccc; } .form-group [class*=fa]{ top:30px; } #Highlighted-form textarea.form-control { height:auto; max-width:100%; min-width:100%; font-size:18px; font-weight:400; line-height:24px; padding-top:14px; vertical-align:top; } #Highlighted-form .form-control:focus { outline:none; box-shadow:0 4px 0 rgba(0,0,0,0.05); } #Highlighted-form .error-message { padding:5px 0; position:absolute; top:-35px; right:0; font-size:15px; line-height:24px; font-weight:400; color:#ff3345; z-index:10; } .error-message { top:0; }

Highlighted contact form

  Jul 27th 2014, 14:28