### [How to Limit Form Fields With Input Masks (+Examples)](https://wpforms.com/how-to-create-input-masks-for-your-sites-forms-with-examples/)

**Published:** May 28, 2018
**Author:** Claire Broadley

**Content:**

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.

[Create Your WordPress Form Now](https://wpforms.com/pricing/)

## 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.

![Phone number input mask](https://wpforms.com/wp-content/uploads/2020/03/us-phone-input-mask-1.png)

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:

- **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

X (formerly known as 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](https://wpforms.com/docs/how-to-use-custom-input-masks/#advanced).

## 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

The first thing you’ll need to do is install and activate the [WPForms plugin](https://wpforms.com). For more details, follow this step by step guide on [how to install a plugin in WordPress](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/).

Next, you’ll need to create a new form. We recommend using the [Simple Contact Form](https://wpforms.com/templates/simple-contact-form-template/) as an easy starting point for testing.

![](https://wpforms.com/wp-content/uploads/2023/05/using-form-templates-example.gif)

### 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.

![Add Single Line Text Form Field](https://wpforms.com/wp-content/uploads/2018/05/Add-Single-Line-Text-Form-Field.gif)

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

![Edit Single Line Text](https://wpforms.com/wp-content/uploads/2018/05/Edit-Single-Line-Text.png)

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:

![Zip code input mask](https://wpforms.com/wp-content/uploads/2023/06/wpforms-validate-zipcode-add-input-mask.jpg)

This mask will restrict the field so that it only accepts 5 numbers.

Click **Save**.

### 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.

![Choose where you'd like to embed your form](https://wpforms.com/wp-content/uploads/2016/12/Embed-Button-Modal.png)

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

![Frontend view of input mask](https://wpforms.com/wp-content/uploads/2020/02/Input-mask-for-US-zip-code-on-embedded-form.jpg)

Notice the underscores that guide the user to finish filling out their zip code.

[Create Your WordPress Form Now](https://wpforms.com/pricing/)

### 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](https://wpforms.com/how-to-enable-wordpress-form-scheduling-step-by-step/) with this simple guide to the Form Locker addon
- Stop underage visitors filling out your forms with an [age verification plugin](https://wpforms.com/age-verification-plugins-for-wordpress/).

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** contact form, conversions, input masks, user login

---