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
What Is an Input Mask?
Input masks are a way to restrict the characters that can be typed into a field.
For example, you can limit the field to only accepting numbers or text. You might also want to restrict the number of characters.
Input masks are great for things like phone numbers or social media usernames that always follow the same format.
How Input Masks Work
Input masks use the following characters to build a template for the data that will be accepted:
- 9 represents any number (0-9)
- a represents any lowercase or uppercase letter
- A restricts the accepted characters to uppercase letters
- & restricts the field to uppercase alphanumeric (0-9 or A-Z)
- * allows any letter or number to be entered (0-9, a-z, or A-Z)
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 optional characters, after already using the parenthesis, you should place them in square brackets [ ].
For example, this input mask would require a minimum of 4 characters, but longer entries would be allowed too:
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:
- Example User Input: 89023
United States Zip Code with Optional Plus Four:
- Example User Input: 89023 or 89023-5678
Username with 6-8 Letters (first letter uppercase, the rest lowercase):
- Example User Input: Minnie or Minniems
X (formerly known as Twitter) Username with 4-15 Numbers or Uppercase/Lowercase Letters:
- 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 on Form Fields
Now that you have a good idea of what input masks are, let’s create one.
1. Create a New WordPress Form
Next, you’ll need to create a new form. We recommend using the Simple Contact Form as an easy starting point for testing.
2. Add a Single Line Text Field
To add an input mask to your contact form, you’ll need to add a Single Line Text form field.
Drag and drop the form field from the left panel onto the form preview.
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 tab. 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 zip code:
This mask will restrict the field so that it only accepts 5 numbers.
3. Add Your Form to Your Site
Now that the contact form is customized with an input mask, it’s time to embed the form onto your website.
Click the Embed button and choose the location for your 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 zip code.
Next, Take Control of Form Submissions
And there you have it! You now know how to create input masks for your site’s forms.
If you’re looking for more ways to control how your forms work, check out these resources:
- Limit form entries according to the date with this simple guide to the Form Locker addon
- Stop underage visitors filling out your forms with an age verification plugin.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.