How to Create Input Masks for Your Site’s Forms (with Examples)

by Lindsay Liedke on May 28, 2018

Want to learn how to create input masks for your site’s forms? Being able to customize the way data is entered into your WordPress forms makes the user experience easier and ensures that the right data in entered into your form every time.

In this article, we’ll explain to you what an input mask is and show you how to add them to your site’s forms.

What Is an Input Mask?

Input masks are a way to control what data can be entered into a form’s field. They are governed by a strict set of rules that site visitors can’t break while trying to fill out your form.

The rules for custom input masks include the following symbols:

• 9: Numeric (0-9)
• a: Alphabetical (a-z or A-Z)
• A: Uppercase alphabetical (A-Z)
• *: Alphanumeric (0-9, a-z, or A-Z)
• &: Uppercase alphanumeric (0-9 or A-Z)

Simply use the above-mentioned symbols in your input masks to correspond with the data you want entered into your form field.

When a site visitor clicks on a form field that has a custom input mask, they’ll see an underscore for each required digit or letter that’s required. This helps guide the site visitor as they fill out your form and help boost conversions.

You can also add things like hyphens or parenthesis in your input mask. This is especially helpful when you want people to fill out their phone number on your site’s form.

If you want to add any additional characters, after already using the parenthesis, you should place them in brackets. This is good for times when the additional characters are optional.

Input Mask Examples

Now that you know what an input mask is, it’s time to take a look at some of the most basic examples you can use in your WordPress forms.

United States Zip Code:

• Mask: 99999
• Example User Input: 89023

United States Zip Code with Optional Plus Four:

• Mask: 99999 [-9999]
• Example User Input: 89023 or 89023-5678

Username with 6-8 Letters (first letter uppercase, the rest lowercase):

• Mask: Aaaaaa [aa]
• Example User Input: Minnie or Minniems

Twitter Username with 4-15 Numbers or Uppercase/Lowercase Letters:

• Mask: @**** [***********]
• Example User Input: @easywpforms

For help with advanced input mask symbols, check out this tutorial on adding input masks to your WordPress forms.

How to Create Input Masks for Your Site’s Forms

Now that you have a good idea what input masks are, and know some of the most basic combination of input masks there are, let’s see how to add an input mask to your site’s forms.

Step 1: Create a New WordPress Form
The first thing you’ll need to do is install and activate the WPForms plugin. For more details, follow this step by step guide on how to install a plugin in WordPress.

Next, you’ll need to create a new form.

For help with this, check out our tutorial on creating a simple contact form in WordPress.

Step 2: Add a Single Line Text and Customize Your Input Mask
In order to add an input mask to your contact form, you’ll need to add a Single Line Text form field.

To do this, drag and drop the form field from the left panel in the Form Editor to the right hand panel, which is the form preview section.

Once you’ve done this, click on the form field on the right side to open up the Field Options panel.

Click on the Advanced Section. This is where you’ll define your custom input mask.

In our example, we’ll ask people filling out our form to enter their United States phone number, complete with the country code:

Click Save.

Step 3: Add Your Form to Your Site
Now that contact form is customized with an input mask, it’s time to embed the form onto your website.

WPForms allows you to add your forms to several places on your website. For example, posts, pages, and even your sidebar widgets areas.

First, we’ll look at how to add your form in a post or page.

To start, create a new post or page, or edit an existing one. Then, click on the Add Form button.

Select your contact form from the dropdown menu and click Add Form.

Next, publish your post or page so your contact form will appear on your site visitors. Take a look:

Notice the underscores that guide the user to finish filling out their phone number.

To add your contact form to your site in the sidebar widget area, go to Appearance » Widgets and add a WPForms widget to your sidebar. After that, select your form from the drop-down menu and save your changes to the widgets area.

Now you can view your published order form live on your site.

And there you have it! You now know how to create input masks for your site’s forms.

If you are looking for ways to encourage more site visitors to fill out your site’s contact forms, be sure to check out our roundup of research based tips for improving conversions.

And if you want to take it a step further, check out this helpful guide for improving your email marketing efforts using your WordPress contact forms.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.