Introduction
Gravity Forms 2.5 introduced significant updates to the markup used. Changes were made to modernize and improve the markup for better standardization and accessibility, as well as simplifying the styles used. These can create breaking changes on existing forms. Note that all existing forms will default to Enable Legacy Markup enabled, meaning that the new markup changes listed here will not be in effect for those forms. If you do choose to turn that off and use the new markup, review and test first! For more information on the use and limitations of legacy markup, refer to this article.
To test your existing forms and their presentation under the new markup (if needed), we suggest you install 2.5 on one of your sandboxes, turn off legacy markup on your existing forms, and start checking under all your normal user conditions. There is no substitute for grunt-work QA in this scenario.
Markup Changes in 2.5
This list is a good starting point for changes that have been made. It may not be exhaustive, with possible changes as we progress through the Beta releases.
- 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).
- 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.
Sample
This example shows a comparison of old and new markup for the same small form.
// New Markup Example
<div id="gform_fields_893" class="gform_fields top_label form_sublabel_below description_below">
<fieldset id="field_893_4" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
<legend class="gfield_label gfield_label_before_complex">Name C</legend>
<div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name" id="input_893_4">
<span id="input_893_4_3_container" class="name_first">
<input type="text" name="input_4.3" id="input_893_4_3" value="" aria-label="First name" aria-required="false">
<label for="input_893_4_3">First</label>
</span>
<span id="input_893_4_6_container" class="name_last">
<input type="text" name="input_4.6" id="input_893_4_6" value="" aria-label="Last name" aria-required="false">
<label for="input_893_4_6">Last</label>
</span>
</div>
</fieldset>
</div>
// Old Markup Of Same
<ul id="gform_fields_893" class="gform_fields top_label form_sublabel_below description_below">
<li id="field_893_4" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label gfield_label_before_complex">Name C</label>
<div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name" id="input_893_4">
<span id="input_893_4_3_container" class="name_first">
<input type="text" name="input_4.3" id="input_893_4_3" value="" aria-label="First name" aria-required="false">
<label for="input_893_4_3">First</label>
</span>
<span id="input_893_4_6_container" class="name_last">
<input type="text" name="input_4.6" id="input_893_4_6" value="" aria-label="Last name" aria-required="false">
<label for="input_893_4_6">Last</label>
</span>
</div>
</li>
</ul>