Create an AWESOME jQuery Contact Form

A jQuery contact form can help gain new customers and boost sales as your website visitors can send you a message and they don’t have to leave your website. Plus, you can add custom replies to the jQuery contact form to show the visitor once they submit the form, which personalizes their experience with your business.

In this tutorial, I will be guiding you through the process of building this great jQuery contact form for your website! This contact form is based on a script I modified a few years ago, which has been updated to include a simple validation within the form to make sure your site’s visitors aren’t missing any information before sending the message to you.

Step 1: Add the CSS styling

In the page that your contact form is going on, add this code to your <head> or add it to your CSS stylesheet (without the <style> tags).

<style> #jcf * { padding:0; margin:0; font-size: 18px; box-sizing: border-box; font-family:"Helvetica"; } #jcf { max-width:500px; } #jcf .error { background-color:rgba(255,184,185,0.80)!important; border:solid 1px #D8000C!important; } #jcf .error, #jcf .error::placeholder { color:#D8000C!important; } #jcf .success { background-color:rgba(193,255,198,0.80)!important; border:solid 1px #044406!important; } #jcf .success, #jcf .success::placeholder { color:#044406; } #jcf .msg { display:none; padding:10px; margin-bottom:5px!important; width:99%; border-radius: 3px; } #jcf .contact_message { height:200px; } #jcf #send_message { text-transform:uppercase; cursor:pointer; } #jcf button object { margin: -18px -5px!important; width:50px!important; } #jcf select, #jcf input, #jcf textarea, #jcf button { outline:none; background:none; border:solid 1px #505050; transition: box-shadow .2s, width .2s; width:99%; max-width:99%; min-width: 99%; appearance:none; padding:10px!important; margin:0 0 5px!important; border-radius:3px;background:rgba(255,255,255,0.8); border:solid 1px #505050; } #jcf select:focus, #jcf input:focus, #jcf textarea:focus, #jcf button:hover { border:solid 1px #0066FF; box-shadow:rgba(0,0,0,0.3) 0px 2px 4px; width:100%; } </style>

 

Step 2: Add the jQuery scripts

Next, you’ll add the following code in the <head> of the page.

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){  $('#send_message').click(function(e){  e.preventDefault();  var error = false;  var topic = $('#topic').val();  var name = $('#name').val();  var email = $('#email').val();  var subject = $('#subject').val();  var message = $('#message').val();  if (topic.length == 0){   var error = true;    $('.contact_topic')     .queue(function(){$(this).addClass('error').dequeue();})     .delay(5000)     .queue(function(){$(this).removeClass('error').dequeue();});   } else {    $('#topic').removeClass('error');   }   if (name.length == 0){    var error = true;    $('.contact_name')     .queue(function(){$(this).addClass('error').dequeue();})     .queue(function(){$(this).attr('placeholder', 'Please type your name').dequeue();})    .delay(5000)     .queue(function(){$(this).removeClass('error').dequeue();});  } else {   $('.contact_name').removeClass('error');   }  if (email.length == 0 || email.indexOf('@') == '-1'){   var error = true;   $('.contact_email')    .queue(function(){$(this).addClass('error').dequeue();})    .queue(function(){$(this).attr('placeholder', 'Please enter your email').dequeue();})    .delay(5000)    .queue(function(){$(this).removeClass('error').dequeue();})   } else {    $('.contact_email').removeClass('error') } if (subject.length == 0){  var error = true;  $('.contact_subject')   .queue(function(){$(this).addClass('error').dequeue();})   .queue(function(){$(this).attr('placeholder','Please write a subject').dequeue();})   .delay(5000)   .queue(function(){$(this).removeClass('error').dequeue();}); } else {  $('.contact_subject').removeClass('error') } if (message.length == 0){  var error = true;  $('.contact_message')   .queue(function(){$(this).addClass('error').dequeue();})   .queue(function(){$(this).attr('placeholder', 'Please type your message').dequeue();})   .delay(5000)   .queue(function(){$(this).removeClass('error').dequeue();}); } else {  $('.contact_message').removeClass('error'); } if (error == true) {  $('#send_message')   .queue(function(next) {    $(this).html('<object data="http://eliwedel.com/ewpd/demos/jquery-contact-form-v2/error.svg" type="image/svg+xml"></object> Please correct the errors');    next();    $(this).dequeue();   })   .delay(5000)   .queue(function(next) {    $(this).html('Send Message');    next();    $(this).dequeue();   }); } else if (error == false){  $('#send_message')   .html('<object data="http://eliwedel.com/ewpd/demos/jquery-contact-form-v2/send.svg" type="image/svg+xml" height="32" style="margin:-10px -5px!important;"></object> Sending')   .delay(2000)   .queue(function(next) {    $.post("send_email.php", $("#contact_form").serialize(),function(result){     var r = result;     if (r == 1){      $('#contact_form')[0].reset();      $('#send_message')       .html('<object data="http://eliwedel.com/ewpd/demos/jquery-contact-form-v2/success.svg" type="image/svg+xml"></object> Message Sent')       .delay(5000)       .queue(function(next) {        $(this).html('Send Message'); next();       });      } else {       $('#send_message')        .html('<object data="http://eliwedel.com/ewpd/demos/jquery-contact-form-v2/error.svg" type="image/svg+xml"></object> Something went wrong. Please try again later.')        .delay(5000).queue(function(next) {         $(this).html('Send Message'); next();        });       }     });     next();    });   }  }); });

 

Step 3: Add the HTML form.

Next, you’ll create the contact form for your website. Put the following code within the <body> tag.

<div id="jcf"> <form action="" method="post" id="contact_form"> <select name="topic" id="topic" class="contact_topic"> <option value="">Choose an option...</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> </select> <input class="contact_name" type="text" name="name" id="name" placeholder="Name" /> <input class="contact_email" type="email" name="email" id="email" placeholder="Email" /> <input class="contact_subject" type="text" name="subject" id="subject" placeholder="Subject" /> <textarea class="contact_message" name="message" id="message" placeholder="Write your message..."></textarea> <button class="submit" type="submit" id="send_message" style="height: 43px;">Send Message</button> </form> </div>

Obviously you’ll want to change the option values to fit your needs. This could be departments within your company, or topics the customer may want to specify when sending the message.

Step 4: Create the PHP script

Next, you’ll want to create the php script that the jQuery code we added earlier will run once the user submits the form successfully. So, create a blank PHP page and insert the following script.

<?php $email_to = 'your@email.com'; //your email $business = 'Business Name'; //business name $topic = $_POST['topic']; $name = $_POST['name']; $email_from = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $autoResponse = true; //set to false if you don't want to send an auto reply $autoResponseSubject = "Demo Contact Form"; $autoResponseMessage = "Hi, thank you testing the JQuery Contact Form Demo."; $autoResponseHeaders = "From: $business <$email_to>\r\n"; $autoResponseHeaders .= "Reply-To: $business <$email_to>\r\n"; $headers = "From: $name <$email_from>\r\n"; $headers .= "Reply-To: $name <$email_from>\r\n"; if(@mail($email_to, $topic.': '.$subject, $message, $headers)){ if($autoResponse === true){ mail($email_from, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders); } echo '1'; } else { echo '0'; } ?>

Then change the following to fit your needs:

  • Line 2: Your email
  • Line 3: Your business’s name
  • Line 11: Auto response subject
  • Line 12: Auto response message

Finally, name this document send_email.php.

Step 5. Upload the files.

The very last step is to upload these files to your server. Make sure that the send_email.php file is in the same directory as the file with the contact form.

That’s it! Hope this helps!

 

Pin It on Pinterest