June 2, 2021: Migrated snippet to the Snippet Library.
August 27, 2020: Fixed issue where script was output in AJAX requests (e.g. Partial Entries heartbeat ticks).
October 11, 2019: Updated how scrolling to first error worked to be more consistent.
October 4, 2019: Added support for forms with conditional logic enabled.
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.
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
123 is your form ID.
That’s all for now!
Let us know if this was useful to you in the comments below.