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:

  1. Not reload the page and give almost instant feedback
  2. meaningful error messages
  3. 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.

Pro Feature
Pro Feature
No hassle extension to AJAX your forms. Just install and activate and all your Express forms are now ajaxed.
 
John Liddiard (JohntheFish)

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.

Just a basic form with the default settings


What you should do to test this form:

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

Try this with the question below

Leave the field empty and submit the form to see the error message.

Including http(s):// (e.g. http://my-biz.com)

Try this with the question below

Don’t select any of the choices and submit the form to see the error message.

Let’s give the confirmation screen a good run


What you should do to test this form:

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

Just so you know

The 2 questions below use third-party attributes from the marketplace so you can test how Ajax for Express Forms deals with non-core attributes.

Maximum: 2

Try this after you click

After you click, a confirmation screen will pop up. Make sure to try the Print functionality before you submit the form.

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:

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

Try this with the question below

Leave the required field below empty so you can see the new error message at the top of the form.

Maximum: 3
Including http(s):// (e.g. http://my-biz.com)

What to look for

When you click, the button’s label will be different from the other forms’.

All texts on the confirmation popup are also different as well as on the print page.

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:

  1. There’s some custom validation going on so pay attention to the error message when you mess up. And you will mess up.
  2. 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.
 
Glyn Jenkins (katalysis)

Glyn Jenkins (katalysis) concrete5's fan since 2008 - Ajax for Express Forms for concrete5

If you want to learn more about PHP and JavaScript events in Ajax for Express Forms, you should read the documentation:

Understanding & Using Ajax Forms Events

Set a JavasScript Callback on Form Submission

Get your free consultation

Got a project that could use specialised eyes on? Tell me more about it and let's discuss how to get that ball rolling.

Share the details →

Get emergency help

Every single day your website acts up, you lose income opportunities. I can get your site back to normal right away.

Get help now →