Gravity Forms 2.5 introduces some big changes to our front-end form markup that will have some big impacts on theme developers. We have thoroughly revamped the HTML of our forms, which makes them more accessible and makes them easier to style. This means theme developers will need to make some changes to any custom CSS they write for Gravity Forms.
Overview of some of the markup changes
The markup changes are intended to make forms easier to style and more accessible. Some of the biggest changes you’ll notice are:
- We have removed the unordered lists and list items in favor of divs
- Fields with multiple inputs, such as Address, are wrapped in fieldsets
In general, we have tried to leave class names as unaffected as possible. We have not removed any class names, although some class names now target slightly different elements. Additionally, we have added some new class names.
Legacy Mode
As with all our Gravity Forms releases, we work hard to try and ensure your existing forms are unaffected whenever possible, so for each form, there is an option to “enable legacy markup.” This option lets a form use the pre-2.5 markup instead of the new HTML. When you update a site to Gravity Forms 2.5, all existing forms will automatically use legacy markup, so you don’t have to worry about your form styles breaking when you upgrade. New forms will have the new markup by default, but you can turn on legacy markup if you want to continue to use the old markup. Refer to this article for additional information.
Column Layouts
In 2.5, it is now easy to create column layouts for your forms. In the form editor, you can drag and drop fields into columns, and you can adjust the width of those columns. The column layout is created with CSS grid (with flexbox fallback for IE 11). See to this article for additional information.
New Stylesheets
We have revamped the stylesheets that are loaded with any new form.
- basic.css – this stylesheet provides the basic styles that are required for a form to function, such as hiding hidden fields, displaying the password strength indicator and datepicker, making file upload and multi-select fields functional, applying ready classes, applying the grid layout, and resetting fielsets..
- theme.css – this stylesheet is more opinionated, and improves the look of the form. It includes the font sizes and weights, vertical spacing between fields, styles for some buttons and the progress bar, styles for validation errors, and everything else that helps make your form look spectacular.
If you want to use your own styles for themes, Gravity Forms 2.5 includes a filter that will prevent theme.css from loading:
add_filter( 'gform_disable_form_theme_css', '__return_true' );
That filter will remove theme.css, but leave basic.css, so that you can easily create your own styles without having to override our styles or recreate form functionality. See this filter reference.
Legacy forms continue to use the same stylesheets they did before 2.5.
Theme Classes
It is possible to embed forms that use new and legacy markup on the same page. Since the two different markup versions use different CSS files, we added theme classes to make sure our CSS targets the correct markup:
- .gform_wrapper will target all forms, just as it always has
- .gform_wrapper.gravity-theme will target forms with new markup
- .gform_wrapper.gform_legacy_markup_wrapper will target forms with legacy markup
Ready Classes
If you’ve been using ready classes to add layout and style to your forms, they will continue to work in 2.5, with a few changes:
- The ready classes that are used to put fields in columns are no longer needed, because now you can just drag and drop fields into columns. If you add any of these classes to your fields, Gravity Forms does not actually use them for styling. Instead, we use the same classes to determine their width that we would use if you had resized them in the editor. Eventually we will drop support for these classes.
- The gf_inline ready class is no longer supported, because it does not work with CSS grid. The ability to drag fields into columns makes this ready class superfluous.
Accessibility
In 2.5, we have provided the tools to help you make accessible forms that comply to WCAG 2.1 AA. With the amount of flexibility within Gravity Forms, you can still configure forms that are not accessible (accessibility is as much the responsibility of the designer as it is the tools), but you will now see messages within the Form Editor that let you know when you have chosen an option that may present accessibility challenges.
Theme developers will need to pay attention to font sizes and color contrast in order to ensure themes are accessible. We have extensive documentation for designers and developers about forms and accessibility.
What’s Next
The markup changes in 2.5 bring the Gravity Forms product closer to more modern CSS management, and will pave the way for some exciting future changes, such as form themes.