Reference library

10.3 Form markup changes

In CMS 10.3 changes have been made to the markup and some behaviours of the forms module. This brings the markup into line with the new script manager allowing for easier support of front end scripting like location and date/time pickers. It also provides access to form based rich text editing and sliders and outputs HTML5 compliant field types and improved markup for required fields and validation. This page will go over these in a bit more detail.

The markup change will understandably change the appearance of existing forms so in order to make the change backwards compatible we have allowed users to configure the markup used in the advanced settings of form properties. By default all new forms will output the new markup but existing forms will output the old markup unless toggled in the respective form properties. If you do toggle to the new markup on an existing site there's a good chance that the appearance of your form will change in which case you'll need to change the relevant associated CSS to support the new output 

New fields 

The following are only supported when the new markup is output ie in Form type 2 mode as set in form properties

  • Telephone field - Outputs a field with an HTML5 type of 'tel'.
  • URL field - Outputs a field with an HTML5 type of 'url', supporting browsers may validate that this is a valid URL.
  • Time field - Outputs a field with an HTML5 type of 'time'.
  • Slider field - Outputs a field with an HTML5 type of 'range', supporting browsers may represent this as a draggable slider between your range as specified by 'min' and 'max' fields.
  • Rich text input field - Outputs a rich text editable block so that user can enter formatted text, requires the relevant scripts in place via script manager. Not strictly a new HTML5 field. 
  • Number field addition - an existing field but extended with the addition of support for min' and 'max' fields.

Note that the behaviour of these fields will vary depending on the level of HTML support provided by the user's browser. 

 

Minimised markup

The previous form markup was quite 'extensive' the new markup has been dramatically reduced to speed page load and make it more readable and clean. As well as the additional HTML5 field types listed above the revised markup also supports 'placeholder' and 'min' and 'max' fields.

Old

<div class="formTextbox" id="date-6347-0-1">
  <div class="FormContentLeft"><label for="SKFCE_1_UserInput">
    <span class="formTextbox">Date *</span></label>
  </div>
  <div class="FormContentRight"><input type="hidden" name="SKFCE_1_ElementID" id="SKFCE_1_ElementID" value="1" />
    <input type="text" name="SKFCE_1_UserInput" id="SKFCE_1_UserInput" value="" size="20" title="Please enter a date in dd/mm/yyyy format" data-name="Date" class="SKDate" />
  </div>
</div>

New

<div class="SKFormRow SKFormDate">
     <label for="SKForm1Field1">Date * </label>
     <div class="SKFormInput"><input type="text" name="Date" id="SKForm1Field1" value="" placeholder="Please enter a date in dd/mm/yyyy format"></div>
</div>

 

Required field markup

Fields set as required have the 'required'  markup added

<div class="SKFormRow SKFormDate">
     <label for="SKForm1Field1">Date * </label>
     <div class="SKFormInput"><input type="text" name="Date" id="SKForm1Field1" value="" placeholder="Please enter a date in dd/mm/yyyy format" required="required"></div>
</div>

Invalid form fields

Invalid form fields now have a class added 'SKFormFieldInvalid' that will allow them to be highlighted, e.g. with a red box around.

 

 

Related questions