Quantcast
Channel: Snippets Archives - Gravity Wiz
Viewing all articles
Browse latest Browse all 196

Make Your Gravity Forms Validation Errors Mobile-friendly(er)

$
0
0
View this code snippet on GitHub.
Want a UI for this?
Our simple plugin will apply this functionality to all forms out of the box. If you’d like a setting to enable this per form, Dennis Hunink has created an alternate plugin that provides support for this. Check it out!

Gravity Forms validation errors are highly visible when you’re browsing the form on your laptop. You see the clear message that there are errors on the page and typically at least one of those validation errors is visible above the fold.

On mobile, it’s a different story. Even for simple forms, the user can end up scrolling quite a bit to find the field with the validation error. At it’s best this can be little confusing. And at it’s worst? It can be downright frustrating.

So what do we do about it?

This snippet will make Gravity Forms’ validation errors just a little more mobile-friendly. Also, while we wrote this snippet to address mobile forms, this functionality will be applied to the from on Desktop browsers as well.

How? This snippet will scroll the page down to the first error and give that input focus. This will allow users to immediately identify that there is a validation error and start them right at the the first field that needs their attention.

gw-mobile-friendly-validation-errorsLeft: Default validation error. Right: Mobile-friendly focus applied to first field w/ error.

Usage

Copy and paste the snippet into your theme’s functions.php. That’s it! The functionality will now be applied to all of your forms.

If you’d like to limit this to a specific form, just change the filter from gform_pre_render to gform_pre_render_123, where 123 is your form ID.

That’s all for now!

Let us know if this was useful to you in the comments below.


Viewing all articles
Browse latest Browse all 196

Trending Articles