WPForms Blog
WordPress Tutorials, Tips, and Resources to Help Grow Your Business
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.
Thanks for reading this article – I hope you found it helpful.
I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.
You can get it 100% free when you purchase WPForms Pro plan.
Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.
Syed Balkhi
CEO of WPForms
Can i define a min / max length e.g. for a single line Field and will this be validated correctly?
Hi Christian,
We don’t currently have a built-in option for this, though if you’re up for some custom code we do have a developer doc on setting a max character limit.
And if you’d like to give that a try, here’s our additional tutorial on adding custom code like this to your site.
Hope this helps! 🙂
What happens if you don’t have a field named Input Mask? There isn’t anything under the CSS Classes field under Advanced Options?
Hi Dianne,
I apologize for any trouble with this! When adding an input mask, be sure you’re using a Single Line Text field (this is currently the only field type that allows input masks). Also, this is a more recent feature so be sure that your WPForms plugin is fully up to date.
If you give this a try and still don’t see the options you’re expecting, please get in touch so we can assist further. If you have a WPForms license, you have access to our email support, so please submit a support ticket.
Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.
Thanks 🙂
Hi there, in this article: https://wpforms.com/docs/how-to-use-custom-input-masks/
You use the example input mask for an email address at “mysite.com”
Mask: *[*{0,50}]@mysite.com
Example Input: m@mysite.com or supportteam@mysite.com
But what if your website has the letter “a” in it? For example…
Using this layer mask: *[*{0,50}]@mydomain.com
actually renders a field that has a blank for the “a” in domain.
Example input: _______@mydom_in.com
How do I format the layer mask so that the entire string “mydomain.com” stays intact?
Thanks in advance for your help!
Hi Re,
I’m sorry for the trouble with that! I’ve replicated the issue you described, and shared it with our team to work on a fix. Thanks for letting us know so we can get this resolved! 🙂
Hi there. I want to use the input mask tool to limit the characters entry in some of my fields.
I’m using this mask: *[*{0,30}].
However, it doesn’t include the “spaces” as a character.
What input mask can I use to include the spaces as a character in my 30 characters limit?
Hi Alicia,
Our input masks don’t currently provide a “space” requirement in this way. Instead, you might consider using a bit of custom code to add this character limit instead (here’s our doc with details).
The code in that doc will count spaces as characters, so should work more like what you have in mind.
And in case it helps, here’s how to add custom code like this to your site.
I hope this helps! 🙂
I am having the same issue as RE CARLSON
—
But what if your website has the letter “a” in it?
—
Do you have a fix for this?
Thanks.
Hi Allan,
I’ve got good news — we do have a solution for this 🙂
In order to add an “a” without turning it into part of the input area, you can escape it using `\\`. For example, if you were to enter this as your input mask: `this is \\a test aaa`, it would end up being: “this is a test ___”.
So just be sure to put that double backslash in from of any A, a, or 9 that you’d like to keep as is (not convert into a _).
I hope this helps! 🙂
hello,
I need uppercase alphanumeric (0-9 or A-Z) to combine with space between characters. Apparently “&” does not allow any spacing
Hi Elyas,
We don’t have a special character to allow for spaces; instead, you can simply add a space in between whatever & characters you’d like, so you can have the input mask field read as “&&&& &&&&.”
I hope this helps! 🙂
Estou iniciando o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implantadas, contudo tentando personalizar uma mascara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” em um campo de “texto de linha unica” percebo que não são aceitos caracteres especiais simples como ? . ou / ; isso é uma limitação proposital impostas a usuários gratuitos ou poderiam me informar por qual simbolo deveria substituir o de * para permitir a entrada de caracteres especiais na mascara.
Hi Rodrigo,
I apologize but I’m a little confused by your question. When you get a chance, can you please clarify or if you’re using our free plugin, WPForms Lite, please visit the support forums where we offer complimentary limited support.
Thanks! 🙂