glamanate – php, mysql, jquery, and the web.

jQuery Contact Form

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>