Skip to main content

jQuery Contact Form

Published on
I've finally started to dive into jQuery. I figured what better way to start than to make a contact form.  Check out the demo. Javascript
<script>

$('#contact-form').submit(function() {

var submit = true;

//Validate Email
if($('#field-email').val() == '') {
$('.email').show().fadeOut(8000);
submit = false;
}

//Validate Name
if($('#field-name').val() == '') {
$('.name').show().fadeOut(8000);
submit = false;
}

//Validate Subject
if($('#field-subject').val() == '') {
$('.subject').show().fadeOut(8000);
submit = false;
}

//Validate Subject
if($('#field-message').val() == '') {
$('.message').show().fadeOut(8000);
submit = false;
}


//Post form data to PHP mail script, script will print out true or false.
if(submit) {
  $.post('mailer.php', $('#contact-form').serialize(), function(data) {

//$("#form-div").html(data);
if(data == 'true') {
//alert('True!');
//Change these values to set a variable, see if that helps view submit() doc.
$('#form-div').html('Thank you for contacting us');

return true;

} else {

$('#error').text('Sorry, there was an error. Please try again').fadeOut(4000);
return false;
}
}

);
}
return false;
});
</script>
HTML
<div id="form-div">
  <form id="contact-form" action="#">
  <span id="error"></span>
  <p><label>Your Email*</label><input name="email" class="field" id="field-email" type="text" /></p>
<div class="email tip">Please enter a correct email address so we may contact you.</div>
        <p><label>Your Name*</label><input name="name" class="field" id="field-name" type="text" /></p>
<div class="name tip">Please enter your name.</div>
        <p><label>Subject*</label><input name="subject" class="field" id="field-subject" type="text" /></p>
<div class="subject tip">Please enter a subject</div>
        <p><label>Message*</label><textarea name="message" class="field" id="field-message" cols="" rows="10"></textarea></p>
<div class="message tip">Please enter your message</div>
<p>*Required</p>
<input type="submit"/>
  </form>
</div>
#