How to Create a WordPress AJAX Contact Form (No Page Reload)

Do you want to prevent a page from reloading when someone submits one of your online 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.

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:

• Makes for a way better user experience.
• Lightning-fast loading times and increased WordPress site speed.
• Keeps modals and popups containing your form open so you can display a follow-up action or message to boost sales.
• Provides 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 AJAX form submission for any form you like. However, it’s 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 of WPForms’ 400+ form templates.

Step 1: Create a New Form

To begin, install and activate the WPForms plugin. For more details, see this step by step tutorial on how to install a plugin in WordPress.

Once you have installed the WPForms plugin, go to WPForms » Add New to create a new form. First, you’ll have the chance to select a template.

Like we said, we’ll be using the Simple Contact Form template for this tutorial, but you can enable AJAX submission for any form you create.

Step 2: Customize Your Form

Now it’s time to build your form. You can easily customize the form fields by dragging them from the left side of the builder to the preview area on the right.

For our example, we’ll add a File Upload field to our contact form so users can include any relevant documents with their submission.

Adjust the placement of fields to your liking by dragging them up and down on your form. You can also click on any field in the preview area to open additional options. This will let you change field labels, add conditional logic, and more.

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. Then select the General section.

At the bottom of the right-hand panel, expand the Advanced options and locate the Enable AJAX form submission setting. Make sure it’s toggled on. This option should be enabled by default on all new WPForms forms, but it’s best to double-check.

That’s it! Your form is now enabled for AJAX submissions. But let’s configure a couple other important things with your AJAX contact form.

Step 4: Configure Your AJAX-Enabled Form Notifications

The next thing you’ll need to do is set up your forms email notifications. These are an excellent way to know when someone submits one of your AJAX-enabled forms.

To begin, go to Settings » Notifications.

Unless you disable the notification feature, you’ll get an email notification whenever someone submits your AJAX form. For help filling out these settings, see our tutorial on how to set up form notifications in WordPress.

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 or 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.

Step 5: Configure Your AJAX Form Confirmations

Form confirmations let you 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:

1. 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.
2. Display Page — Automatically send users to any page on your site.
3. Redirect — Useful if you want to take the user to a different website or specialized URL for more complex development.

Once you’re done setting up your notifications and confirmation, make sure to save your form again.

Step 6: Embed Your AJAX Form on Your WordPress Website

Once you’re done configuring your AJAX-enabled form to your liking, you’ll 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 or post embedding.

To begin, create a new page or post in WordPress, or open an existing one in the editor.

After that, add a new block and select the WPForms icon. If you don’t see it right away, you can search to find it.

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.

Next, Build a WordPress Popup Form

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.

And if you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.