"Contact Form2"
Bootstrap 3.3.0 Snippet by MikeClark

<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" style="min-height: 500px;"> <div class=""> <h2>Contact Me</h2> <form role="form" id="contact-form" class="contact-form" action=""> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" name="Name" autocomplete="off" id="Name" placeholder="Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail"> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <textarea class="form-control textarea" rows="3" name="Message" id="Message" placeholder="Message" cols=""></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <span id="EmailSent" class="pull-left" style="color:blue;">Thank you! Email has been sent.</span> <button type="submit" class="btn main-btn pull-right">Send a message</button> </div> </div> </form> </div> </div> </div>
@import url("https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css");
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js', function() { $('#contact-form').bootstrapValidator({ // live: 'disabled', message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { Name: { validators: { notEmpty: { message: 'The Name is required and cannot be empty' } } }, email: { validators: { notEmpty: { message: 'The email address is required' }, emailAddress: { message: 'The email address is not valid' } } }, Message: { validators: { notEmpty: { message: 'The Message is required and cannot be empty' } } } } }); //handle contact form; $("#EmailSent").hide(); $('#contact-form').submit(function(event) { event.preventDefault(); // send email to client before moving onto worldpay payment form var data = { action: 'mail_before_submit', toemail: $('#email').val(), // change this to the email field on your form message: $('#Message').val(), _ajax_nonce: $('#my_email_ajax_nonce').data('nonce'), }; //window.location.origin + $.post( "/bikes/wp-admin/admin-ajax.php", data, function(response) { $("#EmailSent").show(); //$('#contact-form').trigger('reset'); $("#contact-form").bootstrapValidator('resetForm', true); console.log('Got this from the server: ' + response); }); }); $('.form-control').focus(function(event) { $("#EmailSent").hide(); }); });

Related: See More

Questions / Comments: