Do you want to prevent a page from reloading when someone submits to one of your forms?
Keeping a page from refreshing after someone submits on a form makes for a better user experience and can even help you get more leads.
In this step by step tutorial, we’ll show you how to create a WordPress AJAX contact form easily.
What Is an AJAX Form?
An AJAX-enabled form is a fast and dynamic form that can submit and run backend processes without the need for the entire page to refresh.
By default, an entire page needs to reload when a user hits submit. This is because certain processes need to run, including storing the form data, sending out notification emails, and more.
But because WordPress and WPForms support AJAX forms, you have the option to enable AJAX form submissions to keep your forms from refreshing after someone submits the form.
Want to work on your site behind the scenes without messing up the user experience? Check out our list of the best WordPress coming soon plugins and themes, and read our post on how to create a coming soon page in WordPress.
Why Is AJAX Used on Contact Forms?
AJAX-enabled forms have suddenly become a must-have for websites of all sizes.
Here are the top reasons why AJAX is quickly becoming popular to use on contact forms:
- For a way better user experience
- A lightning-fast loading time and increased WordPress site speed
- To keep modals and popups containing your form open so you can display a follow-up action or message to boost sales
- To provide visual cues and assurance that the form is processing
How to Create a WordPress AJAX Contact Form
Asking yourself how to stop a page from reloading when someone submits a form?
With WPForms, you can enable a form submission for any form you like. However, they’re especially useful when your form has a file upload field or if your form is embedded in a modal or popup.
For this example, we’ll be creating an AJAX-enabled simple contact form with a file upload field. This WordPress AJAX contact form tutorial will work with any type of template from the Form Templates Addon as well.
Follow the steps below to create a WordPress AJAX contact form with no reload:
Step 1: Create a New Form
To begin, you’ll need to create a new form or edit an existing one.
Once you have installed the WPForms plugin, go to WPForms » Add New to create a new form. Then, in your form builder, click on the Simple Contact Form template to create one.
Now it’s time to build your form. You can easily customize the form fields with the drag and drop feature.
Step 2: Add a File Upload Field
Find the Upload File field under Fancy Fields on the left hand side of your screen, and drag it onto your form on the right.
Adjust the placement of the field to your liking by dragging it up and down on your form and releasing it when you like the spot it’s in. When you’re ready, click the orange save button in the top right corner.
Now that we’ve created a form with a File Upload field on it, let’s enable it for AJAX.
Step 3: Enable AJAX Form Submissions
Next, on the left-hand side of your page, click on Settings.
At the bottom of the right-hand panel, locate the Enable AJAX form submission box, select it and click the orange save button.
That’s it! Your form is now enabled for AJAX submissions. But let’s configure a couple other important things with your AJAX forms.
Looking to make an AJAX multi-step form in WordPress? Follow the above steps then check out our article on how to create a multi-part form in WordPress
Step 4: Configure Your AJAX-Enabled Form Notifications
To begin, go to Settings » Notifications
Notifications are an excellent way to know when someone submits one of your AJAX-enabled forms.
To get an email message when someone completes your AJAX form, you’ll need to set up form notifications in WordPress and provide your email address.
And, unless you disable the notification feature, you’ll get an email notification whenever someone submits a form on your site.
You can also send multiple notifications when someone submits to your form. For instance, you can send a notification to yourself and your support department so you all have access to the information submitted in the form.
Also, if you use smart tags, you can send a personalized notification to your site visitors once they finish your form to let them know you received it.
For more on this, check out our step by step guide on how to send multiple form notifications in WordPress.
In addition, you have the option to easily brand your notification emails by adding your logo or any image you choose in the custom header image area. The logo/image you choose will show up at the top of email notifications.
This example has a grey background, but you can change the color to something else if you’d like. These personalized tweaks can make your email notifications look more professional and give them a personal touch. Check out our guide on adding a custom header to your email template.
Having trouble with getting your WordPress mail? Read about how to set up SMTP using the WP Mail plugin.
Step 5: Configure Your AJAX Form Confirmations
Form confirmations are ways to take action immediately (and automatically) after your user has submitted information to your form. For extra help with this step, check out our tutorial on how to setup form confirmations.
There are 3 different kinds of confirmations in WPForms:
- Message — This is the default confirmation type that appears after someone hits submit on your form, and it’s customizable. Check out our tips on ways to customize your confirmation message to boost your site visitors’ happiness.
- Display Page — Automatically send users to any page on your site.
- Redirect — Useful if you want to take the user to a different website or specialized URL for more complex development.
Step 6: Embed Your AJAX Form on Your WordPress Website
Once you’re done configuring your AJAX-enabled form to your liking, you want to add it to your site.
WPForms lets you add your forms to multiple places on your website including your pages, blog posts, and sidebar widgets.
Let’s take a look at the most common placement option: page/post embedding.
To begin, create a new page or post in WordPress, or go to the update settings on an existing one.
After that, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.
The handy WPForms widget will appear inside of your block. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select your AJAX form.
Next, click on the blue button in the top right that says either Publish or Update, so your form will appear on your website.
And there it is. You now know how to create a simple WordPress AJAX contact form with no page reload, and your website visitors will love you even more for it.
Now that you can keep your popups open after someone hits submit, you’ll want a great plugin to use to display a targeted message. Be sure to read our post on the best WordPress popup plugins.
So what are you waiting for? Get started with the most powerful WordPress forms plugin today.