How To Create A Simple WordPress AJAX Contact Form

There are so many beautiful contact form plugins available for WordPress, mainly Contact form 7 and Gravity forms (paid), but most of them adds unnecessary codes and JavaScript and CSS to your blog making it slower and lower. What about a simple and lightweight WordPress AJAX contact form built using core WordPress scripts and codes that serves its purpose? Here is how you can create a simple yet effective WordPress AJAX contact form plugin for yourself.

Simple WordPress AJAX Contact Form

The benefit of using AJAX is that when your visitor sends you a message, the page will not reload thus saving you a little bandwidth and you can also show custom messages based on the status of the form submission. Let’s get the ball rolling;

WordPress AJAX Contact Form
WordPress AJAX Contact Form

Since we are going to create the simple WordPress AJAX contact form as a plugin, we first have to create a folder named ‘scf’ (or whatever you want to name it). Now create two files, scf.php and scf.js (again, whatever you want to name them) in that folder. We will reference the files very often.

1. Create the Form

First, we need to create the callback that outputs the form HTML. Inside your scf.php, add this:

Note those two unusual fields (action and wp_nonce_field) in the form. The action fields sets the AJAX action hook and the nonce adds an extra layer of security. The action can either be manually set at the jQuery code, or pass along with the form input values.

2. Create the JavaScript File and Helper Scripts to Submit Form

Our form needs jQuery to be enqueued in order to function. It will also need the WordPress admin AJAX URL as the post URL, so we will enqueue jQuery and localize the WordPress AJAX URL as a variable to use in our JavaScript file. Here is the code that does so:

This will load jQuery if it is not already loaded and our JavaScript file as dependent to jQuery. The wp_localize_script function will print the WordPress AJAX URL as a variable. Note that both the handles for our wp_enqueue_script and wp_localize_script should be same in order to access the data from from the JS file.

Next, the JavaScript need to be configured to use the WordPress AJAX to submit the form data and prints whatever the submission result is. This is what goes inside the scf.js file.

Note that it prints the success message if the submission is successful, if not, it throws an error message. The success message means the form is only successfully submitted. Successful email sending depends on the function that receives the form data and process it.

3. Process Form Submission

Now that the form is submitted using AJAX, we need to collect the data and process is accordingly. WordPress has a built-in function, wp_mail to send mails. It extends the PHP’s mail function and adds hooks and filter to modify the output. Here is a sample code that collects the submitted form data and sends the email to the blog’s administrator. You can modify the $to parameter if you need it to be different than the administrator email set at WordPress settings.

Few things to know about successful AJAX request handling on WordPress.

  • Using a nonce check makes the form secure. You can also use a CAPTCHA to increase security and reduce SPAM.
  • If you want to enable HTML in messages, you can set the content type of the email either by using the wp_mail_content_type filter, or by including a header like Content-type: text/html. In case you choose to use the filter, make sure to reset it back to plain text to avoid confliction with other functions that uses wp_mail.
  • The function to process form submission should be hooked to both wp_ajax_(action) and wp_ajax_nopriv_(action) where (action) is the value of action input set at the form fields. The first hook handles request for logged in users and the second hook handles the request for non-logged in users.
  • Always sanitize the user input before processing them. WordPress gives us a handful of options for sanitizing the user inputs and it is a good thing to make use of them.

There you go, your simple WordPress AJAX contact form is ready to rock. All you need to do now is adding the form in your blog. Just put this code <?php smetric_ajax_form_html();?> where you want the form to appear. Or you can even filter a filter/action to add the form automatically.

If you face any problem, just shoot a comment below and I’ll be happy to help.

Leave a Reply

Your email address will not be published. Required fields are marked *