Ajax for Express Forms - concrete5 plugin

Let’s be honest, Express Forms are not the most user-friendly forms ever…

I don’t know about you but ?

You add a (long) Express Form to your website. The form has some required fields, probably at least an email field. It requires some care.

Your user fills it up and submits it. The page starts reloading and…

There’s an error message at the top of the form listing all the questions not properly answered. It’s explained with barely grammatical sentences like “The field Do you have a budget for this project? is required”.

Your user now has to scroll down the form to fix the first error.

Then scroll back up to check what the next error is and scroll back down again to fix it…

See where this is going? It sucks 🤢

But it doesn’t have to!. At the very least it could:

Not reload the page and give almost instant feedback
meaningful error messages
Indicate clearly

And really that’s just the bare minimum.

Ajax for Express Formsa much more pleasing experience.

Let me show you…

Did I mention there was more?

Ajax for Express Forms comes in 2 flavors: the Light Edition and the Pro Edition.

With the Light Edition, all forms get the same treatment.
The Pro Edition lets you customize each form individually (requires the Light Edition)

Read on and find out and how you can enhance your Express Forms and drastically improve your users’ experience.

Full Ajax & No Page Refresh

Ajax forms are submitted and feedback is given immediately with no page refresh. Much better user experience for sure.

Any Express Forms

Any front-end Express Form can benefit from these Ajax enhancements, whether it’s a custom one or taken from an Express data object.

Any Form Inputs

This plugin has been tested successfully with all core Express input types and relations as well as the ones from the marketplace.

Inline Error Messages Per Input

On submission, each input that doesn’t pass validation will be clearly indicated individually. No more scrolling down the form trying to figure out which field requires what.

Full Texts Customization

You can customize each and every bit of text used by the plugin: button labels, action messages, error and success messages, and more.

Preview & Confirmation

You can have an optional preview and confirmation screen that will list all the questions and their answers for confirmation before sending them. Better safe than sorry.

Print Before Send

When you activate the confirmation screen it also includes an option to print the form. Make sure your users can keep a copy of their answers.

Pro Feature

Enable & Disable Per Form

With the Pro version, you don’t have to use Ajax for all your Express Forms. You can selectively choose to enable or disable it for any forms you like.

Pro Feature

Custom Settings Per Form

With the Pro version, you can also use custom settings for individual forms. Want a confirmation screen for some forms and not others? Want different messages for each? You can.

Works in Popups & Overlays

The forms can work with popups and overlays. Have a look at my Buttons Factory Pro plugin demo to see it in action inside a popup. Make sure to try both error and success messages.

Works With Magic Tabs

Ajax for Express Forms works extremely well with the awesome Magic Tabs plugin. Magic Tabs will even split the form automatically between tabs.

Events & Methods For Developers

This plugin brings PHP and JS events and methods to developers to let you customize the experience even more by reacting to the specific data submitted for instance.

No hassle extension to AJAX your forms. Just install and activate and all your Express forms are now ajaxed.

John Liddiard (JohntheFish) Yoda's Cousin - Ajax for Express Forms for concrete5

Time to see what's under the hood

Let me walk you through a few demos to see the capabilities. Keep in mind some demos are using the Pro version as indicated.

A basic form
Using the confirmation screen & Print option
Customizing texts

Removing the form after submission
Using the form in a popup with Buttons Factory Pro
Using events to customize even more

Just a basic form with the default settings

What you should do to test this form:

Make sure to follow the hints in yellow to get a feel of what the form does.
Also, make sure to read the success message for extra information after you submitted the form.

Let’s give the confirmation screen a good run

What you should do to test this form:

Make sure to follow the hints in yellow to get a feel of what the form does.
Try leaving the required fields empty to see how well the system works with third-party attributes.
In the confirmation popup make sure to give the Print functionality a try.
After you submit the form notice how the form is reset properly including the third-party attributes.

Customizing texts & labels is easy as pie

Please note that although the Light version allows you to customize texts and labels for all your forms, only the Pro version lets you do it for individual forms.

What you should do to test this form:

Make sure to follow the hints in yellow to get a feel of what the form does.
Leave some required fields empty to see how the top error message is different from the other forms.
When you click the buttons, see how their labels change in a different way.
Also, look at the modified texts on the confirmation popup and the page to be printed.

Removing the form after submission

So far every form was reset after submission. The other option is to have it removed altogether and display only the success message.

Using your form in a popup

If your vision is of a nice button on each page that brings up a form on-demand, you’re in for a treat.

For this demo, the button and popup are courtesy of another one of my plugins: Buttons Factory Pro. It is very versatile and it’s what I had handy to create a popup.

Having said so, Ajax for Express Forms should work with pretty much any popup. Go ahead, give it a spin.

Events for developers in need of extra control

Use events to process the data before and after it is submitted. Need extra validation? Want to customize your success message? It’s all possible.

What you will see at play with this form:

There’s some custom validation going on so pay attention to the error message when you mess up. And you will mess up.
After you’re finally able to submit the form, you’ll see a customized success message.

Excellent AddOn with excellent support. This AddOn is well thought out with attention to small details. Works really well and response to support queries was exceptionally fast.

Highly recommended.