How to create an AJAX form in WordPress

Below is an ajax newsletter subscription example i put together. It displays a single input field form that once submitted emails the subscriber details to a specified recipient. This script can be used in many ways, you could even change the function to add the details directly to a database.

The is the subscription the form, it can be added anywhere on the site.
Take note that the Submit is actually an <a href=”></a> tag and not an actual submit button. You can also make this a button input type as long as it has the ID “query”.

    <form id="enq" action="#"  method="post">
    <input type="text" name="email" id="email" value="Email Address"/>
    <a id="query" >Submit</a>
        <div id="meis" >* Please allow 24 hours for our staff to contact you.</div>
    </form>

The below actions are required when using ajax in wordpress. The first line is used if the user is logged in
and the second if the user is not logged. Copy and paste this into your themes functions.php file.

 add_action('wp_ajax_my_special_action', 'my_action_callback');
 add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');

The my_action_callback function is the callback which is run when the ajax post is submitted.
In this case the email address posted via the form is passed to this function via the Jquery ajax
function, the email address is then emailed to the specified recipient. Anything echo’d out from this function
is returned to the ajax function and is then used to populate a specified ID using jquery’s .html() function.

Copy and paste the below into your themes functions.php file.

function my_action_callback() {

$from = $_POST['email'];

$headers  = "MIME-Version: 1.0" . "rn";
$headers .= "Content-type: text/html; charset=iso-8859-1" . "rn";
$headers .= "From:".$from."rn"."Reply-To:".$from."rn" ;
$body =	"
<html>
<head>
<title>Product Enquiry</title>
<style type='text/css'>
	body {background-color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px}
	.message {background-color:#fff; border:1px solid #ccc; color:#000}
	.name {border:1px solid #ccc}
</style>
</head>
<body>
	<table align='center' border='0' cellpadding='5' cellspacing='0' width='500'>
		<tr><td align='center' colspan='2' style='border:1px solid #ccc'><h3>Website Enquiry</h3></td><tr>
		<tr><td class='name'>Email:</td><td class='message'>".$from."</td></tr>
	</table>
</body>
</html>
";

	if ($from == ''){
		echo "Please fill out all required fields.";
	}else{
  		echo "Thank you for your query, we will be in touch with you shortly.";
	}
 die();
}

Below is the JQuery script used to grab the value from the email field, then send it via ajax to the function my_action_callback. Copy and paste it into your themes header.php file, make sure to place it inside of the
<head></head> tags.

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script language="javascript">
$(document).ready(function(){
	$("#query").click(function(){//Once the query button is clicked
		var email = $("#email").val();//retrieve the value of the email field

		 var data = {// specify the data to be passed to the server
		  action: 'my_special_action',
		  email: email
		 };

		 $.post("<!--?php bloginfo( 'wpurl' ); ?-->/wp-admin/admin-ajax.php",
			data,
			function(response) {
				$('#meis').html(response);//grab the response and populate the div#meis
		});
	});
});
</script>

The above script can still be further simplified in many ways. But i leave that up to you.
Hope this helps… Nathaniel D2C

Other Posts

%d bloggers like this: