Using "tel" for Phone number Fields

Jan 30, 2015 4:38 pm

A useful addition for when sites are accessed through a mobile device is the HTML5 input type "tel". This type enables forms to be more dynamic and user friendly on the client's end. To utilize this type on your forms you will need to use the Overwrite field on a Standard textbox , Phone field.

Copy the default layout (or use one you prefer)
You will see three areas of HTML for : align, split,none with the following:

<tr><td><div class="formtext[[required]]">[[label]]</div></td>
<td><input type="text id="[[id]]" name="[[name]]" value="[[value]]" <if [[size]]!=''>size="[[size]]"</if>
<if [[maxlength]]!=''>maxlength="[[maxlength]]"</if> [[extra_attrib]] /></td></tr>

You will want to change <input type= “text” to “tel”
This will allow the field to take phone number inputs in the following formats
It will also cause a mobile device to open the numeric keypad instead of a full qwerty keyboard.