OnceBuilder Contact Form

Author

OnceBuilder Developer

Category

Contact forms

Likes

120

Reviews

2 Reviews


<div id="footer-contact"> <div class="row"> <div class="col-md-12"> <div class="overview"> <h2>Contact us</h2> <div class="fluid"> <span class="nub"></span> </div> <p class="lead">Feel free to ask us anything, we enjoy helping.</p> </div> </div> </div> <div class="row"> <div class="container message-error col-md-6 col-md-offset-3"> <p>There are serious errors in your form submission, please see below for details.</p> <ol></ol> </div> <form id="contactForm" method="post" action="/ajax.php?c=contact&o=send_message" class="col-md-6 col-md-offset-3" data-require="/js/once.contact.js"> <div class="form-group col-md-12 message-sent"> <h6 class="sent">Your message has been sent. Thank you! We usually answer in 24hours.</h6> </div> <div class="form-group col-md-6"> <input title="Please write your name." class="form-control" name="name" placeholder="Name" required="" minlength="3" type="text"> </div> <div class="form-group col-md-6"> <input title="Please write your e-mail." class="form-control" name="email" placeholder="E-mail" required="" minlength="3" type="email"> </div> <div class="form-group col-md-12"> <textarea title="Please write your message!" class="form-control" name="message" rows="10" cols="7" placeholder="Message" pattern="^d{5,}$" required="" minlength="3"></textarea> </div> <div class="form-group col-md-12"> <input class="btn btn-default" value="Send Message" type="submit"> </div> </form> </div> </div>
.overview{padding-top: 50px;} .overview h1{text-transform:uppercase;} .overview,.service-block{text-align:center;} .overview .lead{margin:40px 10%;margin-bottom:80px;} #footer-contact {min-height: 305px; background: #F3F3F3; font-size: 14px; border-top: 15px solid #e7e7e7; padding-bottom: 50px;} #footer-contact input[type="submit"]{display: table; margin: 0 auto;} #footer-contact input{border-radius: 1px;} #footer-contact textarea{border-radius: 1px;} #footer-contact .form-control[disabled], fieldset[disabled] .form-control{cursor: unset;} #footer-contact .form-control:focus{box-shadow: unset;} #footer-contact input.error{border: 1px solid red;} #footer-contact input.valid{border: 1px solid #CCCCCC;} #footer-contact textarea.error{border: 1px solid red;} #footer-contact textarea.valid{border: 1px solid #CCCCCC;} #footer-contact .message-sent{display: none; color: green; text-align: center;} #footer-contact .message-error{display: none; color: red; padding-bottom: 20px;}

Realated Examples