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

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

var submit = true;

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

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

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

//Validate Subject
if($('#field-message').val() == '') {
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) {

if(data == '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;
<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>
<input type="submit"/>

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️