News & Updates -

Introducing the New 2.5 Features: Updates to Markup

Gravity Forms By Gravity Forms Published May 6, 2021

gf-micro-w2-Updates-MarkupWith Gravity Forms 2.5 you will find big changes to our markup, aimed at improving accessibility, extensibility, and usability. Find out why we’ve made the changes and what they mean for your forms…

Note: Check out these other articles in this 2.5 Intro series to help you get acquainted with 2.5:

Improvements to Markup: Why the Changes

Accessibility has been at the heart of the Gravity Forms 2.5 update, and we have worked hard to ensure that our form builder now provides all the tools needed to create WCAG 2.1 AA compliant forms.

As part of this accessibility drive, we knew that we needed to make massive changes to our markup. At the same time, we also wanted to improve our markup for our developer community, making it easier for customers to work with and style. So it made sense to tackle these two areas together.

Because a well structured, semantic (and therefore easier to work with) markup is the starting point of any accessibility work, we knew that if we focused on accessibility, the easy to use markup we were looking for would come naturally – and it did!

The result was that Gravity Forms 2.5 has introduced significant updates to the markup we use, helping to modernize and organize the markup, simplify styles, and ensure that our customers can create accessible forms.

Updates to Markup and Styles

Old vs New Markup

The Gravity Forms documentation site contains extensive resources on the updates to markup in 2.5. However, the list below is a good starting point for changes that have been made…

  • All fields are now wrapped with either a <div> or a <fieldset>. We no longer wrap fields in <li>.
  • All multi-input fields (such as Address, Name, Checkboxes, etc) are now wrapped in a <fieldset> (previously were <div>) for improved accessibility.
  • Field labels inside a <fieldset> use <legend> (previously were <label>).
  • Refactored the List field for improved accessibility.
  • Add and Remove icons are now <button>s (previously were <a>s), as well as the Previous link on multi-page forms and the Save and Continue link.
  • All <table> tags have been replaced with <div>’s.
  • All scripts (including inline scripts) are now deferred and loaded in the footer by default for performance improvement.
  • Aria labels are now used throughout the markup to provide context for screen readers. Validation messages are connected to inputs with the ‘aria-described’ label.

For further reading on Gravity Forms markup, check out these articles…

Our Commitment to Backwards Compatibility: Legacy Markup

Here at Gravity Forms we know how important backwards compatibility is to our customers, and it has been a major priority for us when developing 2.5.

Therefore, you will find that when you update to 2.5, all existing forms will default to Legacy Markup, meaning that new markup changes will not be in effect for those forms.

If you want to benefit from the new markup, which will help you to easily customize frontend forms, as well as improve form accessibility, then you can easily disable Legacy Markup under Form Settings.

Note: If you choose to enable this new markup, there is a possibility that it could affect your existing forms – we advise that you test your existing forms in a sandbox environment, disabling Legacy Markup for each form, before making any changes on your live site.

 

Legacy Markup

Any new form you create with 2.5 will default to the new markup, although you can enable legacy markup at any time.

For more information on accessibility, and changes that have been made to our markup to help users create accessible forms, check out our Accessibility Guides.

Download Gravity Forms 2.5!

Gravity Forms 2.5 is now available to all new and existing customers. Here’s how to get your hands on it…

  • Gravity Forms 2.5 Update in WordPress Admin – To ensure a smooth adoption of this update, 2.5 is being released via a staggered roll out through WordPress Admin. Therefore, all customers can expect to receive an update during the rollout period (which commenced 27th April). You will need to manually update the plugin within your WordPress Admin.

For more information on Gravity Forms 2.5 and the release procedure of 2.5, check out this post – Gravity Forms 2.5 is Now Available: The Next Generation of Form Building.

2.5 Resources: Find Out More!

Want to find out more about 2.5 to ensure you get the most out of this update? Then check out these resources…

  • 2.5 Resource Hub – Watch the 2.5 video, access further materials, and immerse yourself in the 2.5 experience.

Join Our 2.5 Mailing List

Make sure you sign up to our Gravity Forms 2.5 mailing list to stay updated with all the latest 2.5 news and announcements….

Join Our Gravity Forms 2.5 Mailing List!