How to Create a WordPress AJAX form Easily

How to Create a WordPress AJAX Form that Submits Without Refresh

Do you want to create an AJAX form on your WordPress site?

An AJAX-enabled form allows your site visitors to submit a form without refresh and offers a way better user experience. Also, it helps get more leads by showing instant follow-up actions.

In this article, we’ll show you to easily create a WordPress AJAX form that submits without refresh (step by step).

What Is AJAX? Why Enable AJAX in WordPress Forms?

AJAX stands for Asynchronous Javascript and XML. It’s a group of technologies which allow web applications to communicate with the server and deliver the requested data without refresh.

MonsterInsights is the best WordPress Analytics plugin. Get it for free!

In AJAX, the loading scripts work ‘asynchronously’ which means they operate independent of other processes in the background. This is why web applications can retrieve and serve data without reloading the entire web page.

If you want to see a real example of AJAX in WordPress, then you can try adding a new category from your WordPress post editor page.

Adding New Category in WordPress with AJAX

As you can see in the GIF, WordPress allows you to add categories without reloading the page.

Implementing the AJAX technology in your WordPress contact forms can be really helpful in many ways. Here’re just a few of them:

  • Better user experience – AJAX forms offer better user experience by letting users submit the form and see the confirmation message instantly on the same page.
  • Faster loading speed – AJAX loading reduces server hits and improves your website speed.
  • Get more leads – Helps to get more leads by showing instant follow up actions in the modals and popups containing your form.

With that said, let’s take a look at how to create an AJAX form in WordPress which lets you submit without page refresh.

Creating a WordPress AJAX Form – Step by Step

The process of creating an AJAX form may differ according to the WordPress form plugin you’re using on your website.

Some of the popular plugins like WPForms and Formidable Forms have a built-in option to enable AJAX submissions while other plugins miss out this feature.

For this tutorial, we’ve chosen WPForms. It’s the most user-friendly WordPress form plugin available in the market. It allows you to easily create a contact form, order form, survey, and other types of forms and enable AJAX submissions.

Now let’s take a look at how to build a WordPress AJAX form with WPForms step by step.

Step 1: Create a New Form

The first thing you need to do is install and activate WPForms plugin on your website. For more details, see this beginner’s guide on how to install a WordPress plugin.

Upon activation, you’ll need to visit WPForms » Add New to create a new form. After that, WordPress will open WPForms form setup page with form templates to get started. We’re going to start with the Simple Contact Form template.

Select Simple Contact Form Template WPForms

Next, it’ll open the WPForms form builder.

WPForms Drag and Drop Form Builder

Now you can easily customize your form by adding new fields, editing field options, etc.

For example, we’ll add a File Upload field to the form. Locate the File Upload field under the Fancy Fields on the left panel, then drag and drop it in the form builder on the right.

Adding Upload File field to your Form

If you need more fields, then you can easily add with the drag and drop as shown above.

Once you’re happy, click on the Save button at the top right corner on your screen. Now your form is almost ready.

Save Your Contact Form

Step 2: Enable AJAX Form Submissions

The next step is to enable AJAX form submissions in your WordPress form. Simply, click on the Settings option on the left options panel.

After that, WPForms General Settings page will appear. On this page, locate the Enable AJAX form submission checkbox at the bottom of the right-hand panel, and check the box.

Enable AJAX form Submission for Your WordPress Form

This page also lets you customize your form name, form descriptions, submit button text, enable anti-spam honeypot, Google reCAPTCHA, and more.

Once you review all the options, click on the Save button at the top right corner to save your settings.

Next, you can configure form notifications by clicking on the Notifications option.

WPForms AJAX Form Notification Settings

By default, WPForms sends a notification email to the site administrator when a user submits a form.

If you want to send the same notification email to more people in your team, then you can add their email addresses or use smart tags. For step by step guide, check this article on how to create multiple form notifications.

Next, you need to configure confirmations to configure what to show after a user submits your AJAX form. Click on the Confirmation option.

WPForms AJAX Form Confirmation Settings

WPForms allows you to use three types of confirmations: message, show page and go to URL (redirect).

For an AJAX form, it’s best to use the default Message option. You can customize your confirmation message to thank users, and lead them to another action.

Once done, click on the Save button at the top right corner.

After that, you can exit the form editor as your form is completely configured. Click on the Close icon next to the Save button.

Save Your Form and Close Your Form Editor

Step 3: Publish Your AJAX-Enabled WordPress Contact Form

Now that your AJAX-enabled contact form is ready, you can add it to a page, and publish live.

Create a new page or edit an existing one where you want to add the AJAX form. On your page editor, click on the Add New Block icon and then select WPForms block.

Add WPForms Block to Your Page Editor

After that, you can see the WPForms block added to your page editor.

Next, you need to select the AJAX form that you created earlier using the dropdown option. Once done, WordPress will automatically load the form.

Embedding Your AJAX form in your WordPress Page Editor

Now you can publish or update your page and preview it to see your AJAX form in action. Here is how our AJAX-enabled WordPress contact form works on our demo website.

WordPress AJAX Contact Form Preview

We hope this article helped you to learn how to create a WordPress AJAX form that submits without refresh. You may also want to see our guide on how to create an AMP contact form in WordPress.

And don’t forget to follow us on Twitter and Facebook for more helpful WordPress tutorials and Google Analytics tips.

Want to Try MonsterInsights for Free?

Enter the URL of Your WordPress website to install MonsterInsights Lite.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.