Adding a masked input field

This guide will show you how to add a masked input field to force the user to enter data in a specific format, in the example below we’ll required that the user enters their phone number in the format XXX-XXX-XXXX

Step 1

We’ll be using the jQuery Masked Input plugin in this guide, download a copy from here and upload it to your wp-content directory.

Step 2

Add a “Single Line Text” element to your form if you haven’t done so already. Get the unique ID of the element, we’ll need it in the next step.

Step 3

Add a “HTML” element to your form, go to the Settings for this element and enter this code into the HTML option box.

12
34

<script type="text/javascript" src="http://example.com/wp-content/jquery.maskedinput.min.js"></script><script type="text/javascript">jQuery(function ($) {
    $(".iphorm_1_1").mask("999-999-9999");});</script>

<script type="text/javascript" src="http://example.com/wp-content/jquery.maskedinput.min.js"></script>
<script type="text/javascript">jQuery(function ($) {
    $(".iphorm_1_1").mask("999-999-9999");
});</script>

• On line 1, replace http://example.com/wp-content/ with the URL to your wp-content directory.
• On line 3, replace iphorm_1_1 with the unique ID of the element from Step 2

Step 4

The next step is to add a validator to check the format is correct when processing the form, as you can’t rely on JavaScript validation because it can be disabled. Go to Single Line Text → Settings → Advanced (for the element you added in Step 2) and at Add a validator click the Regex button.

In the Regex validator settings, enter the code below for the Pattern option.

/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/

Enter an appropriate error message.

Using another mask

To change the input mask to match another format, there are two things you should change.

1. In the JavaScript added to the HTML element in Step 3, change the string inside this code .mask("999-999-9999"); to the format of the mask, you can find other formats on the jQuery Masked Input plugin website.
2. In Step 4, change the Regex pattern to the regex equivalent of the mask, you will probably need a web developer’s advice. If you are unsure, you can ask us on the forums.