How to add a jquery/ajax contact form to Wordpress

Did you ever wanted to add a custom contact form to your Wordpress Theme? In this tutorial we will show you step by step how to easily add your own jquery/ajax featured contact form to your Wordpress installation. We will add some default styling which can be adopted and customized by yourself.

1. Adding a page template

Did you ever add a custom page template to one of your Wordpress Themes? No? It is really easy. The code below shows you how to do. We would advise you to copy your template’s page.php file and then copy the code from below and paste it in the content-div of your page.php copy. At the top of your file (name it contact.php f.e.) add the following (Before the get_header and everything else)

<br />
/*<br />
Template Name: Contact Form<br />
*/<br />

This code makes sure, that you can choose the page template, when adding a new page in your wordpress administration area. Now add the following code to your contact.php’s content-div:

</p>
<div class="contact">
<div id="node"></div>
<div id="success">Thank you for leaving a message.</div>
<form name="contact_form" id="contact_me"/>
        <label for="name">Your Name*</label></p>
<input type="text" name="name" value="" />
        <label for="company">Your Company</label></p>
<input type="text" name="company" value="" />
        <label for="telephone">Telephone Number</label></p>
<input type="text" name="telephone" value="" />
        <label for="mail">Your E-Mail*</label></p>
<input type="text" name="mail" value="" />
        <label for="message">Your Message*</label><br />
        <textarea name="message"></textarea></p>
<input type="submit" value="submit" />
    </form>
</div>
<p>

Allright! Now save your file and upload it to your wordpress-theme directory. After that, add a new page and choose “Contact Form” as your page template!

2. Adding the CSS to your syle.css

Now that we did the structuring, we need to style the html. To do so, copy the code from below and paste it in your theme’s style.css. Of course you can customize the whole CSS to adopt your theme’s look!

<br />
.contact {<br />
float: left;<br />
width: 100%;<br />
}<br />
.contact label {<br />
float: left;<br />
width: 150px;<br />
margin-bottom: 10px;<br />
clear: both;<br />
}</p>
<p>.contact input {<br />
float: left;<br />
width: 180px;<br />
border: 1px solid #CCC;<br />
padding: 3px;<br />
margin-bottom: 10px;<br />
}<br />
.contact textarea {<br />
float: left;<br />
width: 250px;<br />
height: 100px;<br />
border: 1px solid #CCC;<br />
}<br />
.contact #node {<br />
float: left;<br />
width: 360px;<br />
display: none;<br />
background-color: #CC5553;<br />
padding: 5px;<br />
color: #FFF;<br />
border: 1px solid #9B413F;<br />
margin-bottom: 10px;<br />
}<br />
.contact #success {<br />
float: left;<br />
width: 360px;<br />
background-color: #8ACC39;<br />
color: #FFF;<br />
padding: 5px;<br />
border: 1px solid #6DA32C;<br />
display: none;<br />
margin-bottom: 10px;<br />
}<br />
.contact input[type=submit] {<br />
float: left;<br />
width: auto;<br />
padding: 5px 20px;<br />
background-color: #FFF;<br />
border: 1px solid #CCC;<br />
text-align: center;<br />
margin-top: 10px;<br />
cursor: pointer;<br />
clear: both;<br />
margin-left: 150px;<br />
}<br />

3. Adding the Javascript/Ajax Function

Now we will have to add some jQuery Code to your theme, to make the contact form work! You will need to add the following code to a new file (we name it contact.js).

<br />
jQuery(document).ready(function($) {<br />
       jQuery("#contact_me").submit(function() {<br />
	var str = jQuery(this).serialize();<br />
	jQuery.ajax({<br />
	    type: "POST",<br />
	    url: "/wp-admin/admin-ajax.php",<br />
	    data: 'action=contact_form&'+str,<br />
	    success: function(msg) {<br />
		jQuery("#node").ajaxComplete(function(event, request, settings){<br />
                if(msg == 'sent') {<br />
                    jQuery(".contact #node").hide();<br />
		    jQuery(".contact #success").fadeIn("slow");<br />
                }<br />
                else {<br />
                    result = msg;<br />
                    jQuery(".contact #node").html(result);<br />
		    jQuery(".contact #node").fadeIn("slow");<br />
		}<br />
		});<br />
	    }<br />
	});<br />
	return false;<br />
    });<br />
});<br />

Now that we have the new file “contact.js”, upload it to your theme directory.

4. Handling the Ajax Post-Values

Now that we have the javascript, we will need to handle the values which are sent by the form. Now it’s a little tricky because we are using Wordpress-built-in Ajax function. Open up your theme’s functions.php (if doesn’t exist add a new file) and paste the following code:

<br />
add_action('init', 'add_contact_script');<br />
function add_contact_script() {<br />
    wp_register_script('contact', get_bloginfo('template_directory') . '/contact.js', array('jquery'), '1.0' );<br />
    wp_enqueue_script('contact');<br />
}<br />
function ajax_contact() {<br />
    if(!empty($_POST)) {<br />
	$name = $_POST['name'];<br />
	$company = $_POST['company'];<br />
	$telephone = $_POST['telephone'];<br />
	$mail = $_POST['mail'];<br />
	$admin_mail = get_bloginfo('admin_email');<br />
	$msg = $_POST['message'];<br />
	$error = "";<br />
	if(!$name) {<br />
	    $error .= "Please tell us your name<br/>";<br />
	}<br />
	if(!$mail) {<br />
	    $error .= "Please tell us your E-Mail address<br/>";<br />
	}<br />
	if(!$msg) {<br />
	    $error .= "Please add a message";<br />
	}<br />
	if(empty($error)) {<br />
	    $subject = "New contact form received";<br />
	    $message = "You've received a new contact form. \n\n<br />
			Name: ".$name."\n<br />
			Company: ".$company."\n<br />
			Telephone: ".$telephone."\n<br />
			Mail: ".$mail."\n<br />
			Message: ".$msg."\n";<br />
	    $mail = mail($admin_mail, $subject, $message,<br />
	    "From: ".$name." <".$mail.">rn"<br />
	    ."Reply-To: ".$mail."rn"<br />
	    ."X-Mailer: PHP/" . phpversion());<br />
	    if($mail) {<br />
		echo "sent";<br />
	    }<br />
	    die();<br />
	} else {<br />
	    echo $error;<br />
	    die();<br />
	}<br />
    }<br />
}<br />
add_action('wp_ajax_nopriv_contact_form', 'ajax_contact');<br />

Make sure that your theme has already included the jQuery Framework, otherwise it won’t work!

Now that you have all the files uploaded and updated you can have a look at your new contact page and try to write a new contact request. Hope this tutorial was helpful for you! Build your own jquery ajax contact form in Wordpress in just 4 steps!