Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Build a WordPress AJAX Form (in 4 Easy Steps)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to build an AJAX contact form in WordPress?

AJAX contact forms allow users to submit the form without reloading a page. This enables you to increase user engagement while offering a better form submission experience to your users.

In this article, we will show you how to easily build a WordPress AJAX contact form with step-by-step instructions.

Creating an Ajax contact form in WordPress

What Is AJAX and Why Use it For Your Forms?

AJAX, short for Asynchronous Javascript and XML, is a JavaScript programming technique that allows developers to transfer data without reloading a page.

It is most commonly used in web forms allowing users to submit form data without reloading a page. This makes form submission easy and fast, which improves the overall user experience.

Web applications like Gmail and Facebook extensively use this technique to keep users engaged while making everything work seamlessly in the background.

You can use AJAX for forms on your WordPress site. It will save users from unnecessary page reload and keeps them engaged on the page they are currently viewing.

This comes in handy when you run an eCommerce store and want to collect user feedback without diverting user attention.

You can also use the same AJAX functionality for other custom forms on your website. For example, a custom user login form will allow users to log in without an additional page load.

That being said, let’s take a look at how to easily make a WordPress AJAX contact form in 4 simple steps.

Step 1: Install the WPForms Plugin

The first thing you need to do is install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create Ajax-powered forms as well.

For more information, see our complete WPForms review.

Upon activation, you need to visit the WPForms » Settings page to enter your license key.

WPForms license key

After entering the license key, you will be able to receive automatic updates and install add-ons.

You are now all set up to make beautiful AJAX forms in WordPress.

Step 2: Create Your First Form

Let’s go ahead and create your first form.

Simply visit the WPForms » Add New page in the WordPress admin area. You will be asked to provide a title for your form and select a template as a starting point.

Creating a new form in WPForms

For the sake of this tutorial, we will be creating a contact form. However, you can create any other type of form you need.

WPForms will now load your form with basic fields already added to it. You can simply point and click on any form field to edit it.

Editing form fields in WPForms

You can also add any new form field from the left column by simply clicking on it.

The new field will appear at the bottom of your form, just above the Submit button.

Click to add a new form field

You can easily drag and drop form fields to move them up and down in the form.

Once you have finished editing the form, you can move on to the next step.

Step 3: Turn On AJAX Form Submission Feature

WPForms does not enable AJAX form submission by default. You will need to manually enable it for your form.

Simply switch to the ‘Settings’ tab in the form builder. In the General settings tab, click the toggle next to the ‘Enable AJAX form submission’ option.

Enable ajax form submission

Now let’s set up what happens after the form submission.

First, switch to the ‘Confirmation’ tab under settings. This is where you inform your users that you have received their form submission.

Confirmation settings

WPForms allows you to do that in different ways. For example, you can redirect users to a URL, show them a specific page, or simply display a message on the screen.

Since we have enabled AJAX functionality for the form, redirecting users to another page will defeat the purpose of creating an AJAX form.

You need to select the message option and edit the confirmation message. Feel free to use the formatting toolbar on the editor or add a link or two to tell users where to go next.

After that, you can set up how you would like to be notified about a form submission.

Switch to the Notifications tab in the form settings and configure notification email settings.

Form notification email settings

Once you are done, you can save your form and exit the form builder.

Step 4: Add Your AJAX-Enabled Form in WordPress

WPForms makes it super easy to add forms to your WordPress posts, pages, and sidebar widgets.

Simply edit the post or page where you want to add the form and insert the WPForms block into your content area.

Add WPForms block to WordPress post or page

After that, you need to select the form you just created from the block’s settings.

WPForms will immediately load a live preview of the form in the content editor.

Select your form

You can now save or publish your content and then visit your website to test the form’s AJAX functionality.

Here’s a quick look at the WordPress AJAX form example from our demo site.

Ajax contact form preview

You can also add your form to a sidebar widget in WordPress.

To do that, go to the Appearance » Widgets page and add the WPForms widget block to a sidebar.

WPForms widget block

Select the form you created earlier and click on the ‘Update’ button to store widget settings. You can now visit your website to see your AJAX-powered form in action.

We hope this article helped you learn how to create a WordPress AJAX contact form for your website. You may also want to see our guide on how to create a contact form popup in WordPress or our expert picks for the best email marketing services to grow your business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.