How to Use Custom Input Masks in WPForms

Would you like to require a specific format for a form field? Custom input masks allow you to set rules for the value a user is allowed to enter into a field. This can be useful for international phone numbers, zip codes, and more.

In this tutorial, we’ll show you how to create and add custom input masks to a form field.


How to Add a Custom Input Mask

Before we get started, go ahead and create a new form or edit an existing form.

Custom input masks can be added to any Single Line Text field. After you’ve added this field type to your form, click on it to open its Field Options panel.

Within the Field Options, you’ll need to open the Advanced Options section. Then you can add your rule to the Input Mask field.

Input mask option in WPForms

Basic Input Masks

To create the rules for a custom input mask, you’ll need to use a specific set of 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)

For example, if you’d like to require a 5-digit number you could enter five 9‘s into the Input Mask field.

Input mask for US zip code

When the form is displayed on a page and a user clicks in the field, an underscore will be shown for each required digit to help guide the user. Additionally, since we used the 9 symbol, only numeric values will be allowed (no letters or other symbols).

Input mask for US zip code on embedded form

Additionally, you can include symbols such as hyphens (-) or parentheses in your input mask. For example, you could use the following input mask to require a US phone format with the US country code:

+1 (999)-9999

When a user clicks within this field, they will see underscores (_) in place of the 9 symbols.

Input mask for US phone number with country code

Escaping Special Mask Characters

Would you like to use a 9 or A in your input mask, without converting it to an underscore?

To avoid converting any of the special input mask characters into an underscore, you can simply add two backslashes (\) in front of the character.

As an example, let’s create an input mask for an Instagram URL.

If we entered the input mask https://instagram.com/aaaaaaaaaaa, all a characters will be converted into underscores when you view the mask in the form. This is because a is a special character within an input mask.

An input mask that needs to include special characters

To fix this, we just need to add the double backslash in front of any a that we don’t want converted to an underscore. So in the Input Mask option, we’ll enter https://inst\agr\am.com/aaaaaaaaaaa.

Example of escaping characters in an input mask

Now when we view this field within the embedded form, underscores will only appear where we intended.

Example of input mask with escaped characters in embedded form

Optional Characters

Sometimes you may want to require a specific format, but also need to allow for a flexible number of characters. For example, in many countries phone numbers in different regions may contain a different number of digits.

Any optional characters should be placed inside of brackets. For example:

(99) 9999-9999[9]

Since the last number is optional, either (98) 7654-3210 or (98) 7654-32109 would be accepted.

Examples

Simple US Zip Code:

  • Mask: 99999
  • Example Input: 98765

US Zip Code with Optional Plus Four:

  • Mask: 99999[-9999]
  • Example Input: 98765 or 98765-4321

Product SKU (2 9s, followed by 3 numbers or uppercase letters)

  • Mask: \9\9-&&&
  • Example Input: 99-654 or 99-BC8

Username with 6-8 Letters (first letter uppercase, others lowercase)

  • Mask: Aaaaa[aa]
  • Example Input: Sullie or Sulliewp

Twitter Username (allows 4-15 numbers or upper/lowercase letters)

  • Mask: @****[***********]
  • Example Input: @easywpforms or @WPBeginner

Advanced Input Masks

If you’d like even more control over your form’s input masks, you can use advanced format options as well. These can be used in combination with all symbols described above.

Here are the symbols you can use (n and m represent numeric values):

  • {n}: Repeat any other symbol option n times
  • {n,m}: Repeat any other symbol between n and m times.

Examples:

Facebook URL (allows 1-25 characters):

  • Mask: https://f\acebook.com/*{1,22}
  • Example Inputs: https://facebook.com/wpforms or https://facebook.com/monsterinsights

Facebook input mask example

Simple Phone Number with 10-12 Digits:

  • Mask: 9{10}[9{0,2}]
  • Example Inputs: 9876543210 or 987654321098

Email for Specific Domain (allows 1-51 characters):

  • Mask: *[*{0,50}]@mysite.com
  • Example Input: m@mysite.com or supportteam@mysite.com

Product SKU with 8-11 Characters (allows numbers or uppercase letters):

  • Mask: &{4}-&{4}[&{0,3}]
  • Example Input: A987-BC65 or A987-BC65D43

That’s it! You can now create custom input masks to require specific formats in your forms.

Next, would you like to make your forms more compact? Be sure to check out our tutorial on using multi-column layouts to learn how to put fields multiple fields into any row of your form.