Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated July 13, 2021

How to Submit a Form Using Ajax Without Page Refresh in WordPress

Wondering how to submit a form using ajax without page refresh in WordPress? With the right form builder, all it takes is a few clicks.

how to submit form using ajax without page refresh in WordPress

Okay... We can do this the easy way or the hard way.

The hard way involves jquery Ajax and PHP scripts... up for the task? If you are a developer with a lot of skills, you could do it. But first, a little reality check. Do you know the first thing about Ajax calls or Ajax requests?

How about concepts like method posts and return false? While we're at it, feel like testing your HTML and CSS skills? Can you create div classes & div id's on the fly? If not... the easy way might be better!

And we've got some great news. If you choose the right WordPress form builder, this could be really easy. As easy as ticking a few boxes - hope you can handle that!

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

In this post, we'll show you how to quickly create a form and finish by enabling Ajax form submission. Our plugin of choice? Formidable Forms.

Before we show you the steps involved, let's make sure you're in the right place.

What is Ajax?

Do you want forms that can be submitted without having to reload the page? That's one thing Ajax can help with.

Ajax allows web applications to send & retrieve data from a web server without the need to load the page again or redirect to a new one.

Of course, how Ajax works is another question entirely. Just know this: Formidable has done the hard work for you.

Why create an Ajax form?

You might have something in mind already, but here are some more reasons you might want to submit forms without needing a page refresh:

  • You've got some really long forms: If you've got long forms on your website, or you want to create multi-step forms, it might be useful to allow users to save their progress periodically while they.
  • Your forms are slowing down your site: Another issue with long forms is that they slow down the site. So if you want to speed up WordPress, try this.
  • You want to submit forms using ajax without page refresh: As we mentioned before, users can submit forms without reloading the page. Imagine the possibilities!

Step 1: Install and activate Formidable Forms

This part is as easy as it gets. Go to our pricing page and get the Formidable Forms plan of your choice. By the way, Formidable is great for all kinds of forms - not just these Ajax ones.

You can easily add simple contact forms to your site, or create advanced forms with file upload fields, custom button text, multiple page forms, and more.

And all of our plans come with a 100%, 14-day, money-back guarantee too. What are you waiting for?

Step 2: Create a form

The next thing we'll do is create a form. This is easily done with our drag and drop form builder. Take a look:

WordPress drag and drop form builder

Add some form fields by dragging and drop from left to right. For now, just add some basic fields, like an email address field and a text field. Then, click Update in the top right corner.

Now let's cruise ahead to the last and most important step!

Step 3: Configure Ajax form settings

So far so good? Now for the important step... tick three boxes!

Form Settings to submit form using ajax without page refresh

Just do this and your form will be ready for any scenario we described above. Yes - that's it!

Here's a bit more context on these features:

Load and save form builder page with Ajax

We'd recommend this feature especially when you have long forms or multi-page forms.

Here's how it works: rather than a complete page refresh when you load or update a form, the form will be loaded and saved with Ajax. This improves load times considerably.

Submit this form with Ajax

This one is pretty much self-explanatory. It allows users to submit forms without having to refresh the page.

There is one thing to note: file upload, rich text, and signature fields cannot be submitted via Ajax.

Validate your form in real-time

You don't need to wait until forms are submitted to validate form data. This can be done in real-time with Ajax! Required fields, phone format, email format, and number format can be checked instantly in your browser like this:

validate form javascript

Wrapping up

That's really all there is to it! With Ajax forms, you'll still be able to add a confirmation message, so you may want to edit that too before publishing your form on the contact page.

We hope our guide has inspired you! Have a great day - and be sure to check back with the Formidable blog for more WordPress forms tips.

Read more about submitting forms using ajax

  • The Best WordPress Ajax Form Plugin (And How to Use It) The Best WordPress Ajax Form Plugin (And How to Use It)
    Read More
    how to create ajax registration form WordPress How to Create an Ajax Registration Form in WordPress
    Read More
    WordPress MailChimp ajax form How to Create a Mailchimp Ajax WordPress Form
    Read More

Not sure about Formidable? Try our forever free plugin here.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Mariano says

    August 31, 2022 at 12:38 am

    This is disabled on my end, it is asking me to upgrade to Pro, but in this page it says that it is included in the default Formidable plugin. Has this been changed recently?

    Reply
    • srwells says

      August 31, 2022 at 1:14 pm

      AJAX form submission is a premium feature and does require a purchase. It is included in our Basic thought Elite packages.

      Reply

Leave a Reply Cancel reply

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

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews