Get access to free tutorials, exclusive content and more.

How to Use Input Mask in Your Contact Form (Examples)

Want to learn how to use input mask and customize the way data is entered into your form? You are at the right address!

If you apply input masks to your fields, you are giving instructions on what data is allowed to be entered into your fields and in which format. It’s like applying restriction rules to your form field.

In this article, we’ll show you how to not only use them. We’ll also give you a few practical examples you can apply to your WordPress forms. Let’s get this started!

Input Mask Field in Ninja Forms

If you want to add an Input Mask to your field on your Ninja Form, make sure you enable “Developer Mode”. To enable navigate to Ninja Forms > Settings > Advanced Settings > click ‘Dev Mode’.

Once you enable this feature, you will get access to advanced settings within Ninja Forms like the Restriction section of the Single Line Text Field.

It is important to know that the only fields supporting the input mask are a Single Line Text Field,  Phone, Address, City, and Zip field. Using our Input Mask, you don’t need to apply a character limit as it will only accept data that directly matches the mask that you set. It does not have a feature for optional/variable inputs.

Where do you find Input Mask?

If you enabled your Developer Mode, you can see the Input Mask option under the Restriction settings of the Single Line Text field.

input mask ninja forms

What Input Mask formats are accepted?

Our Input Mask will accept only the alpha characters, numeric characters only, or alphanumeric characters only.
  • a – Represents an alpha character (A-Z,a-z) – Only allows letters to be entered.
  • 9 – Represents a numeric character (0-9) – Only allows numbers to be entered.
  • * – Represents an alphanumeric character (A-Z,a-z,0-9) – This allows both numbers and letters to be entered.
This is the format your field will accept:
  • US Phone: numeric only, (___)___-____
  • Date: numeric only, __/__/____
  • Currency: numeric only, $__.__
  • Custom: Define your own input restrictions with a custom mask. Symbols (i.e. a slash/comma, hyphen – etc) are supported, and when typed here will display in place for the user. Predefined placeholders represent one of three character types: a = alpha character only9 = numeric character only* = alphanumeric character.
    • Backend Example: 999-999-999
    • Frontend Result: ___-___-___ , where only numeric characters can be input

Currently, the Input Mask only accepts alphanumeric inputs. It can’t accept special characters, such as underscores.

Also, characters can only be input by the user in a space where these placeholders exist. The placeholders are shown in the form of underlines. Our form builder does not have the option to remove these underlines but if you wish to remove them, you should be able to accomplish that following this tutorial.

Input Mask examples

In this section, we will show you a few practical examples and teach you how you can create a birthday field, how you can validate a Zipcode, or how you stop your Phone field from accepting letters only and make it fully numeric.

How to use a custom input mask for a phone number

If you need to validate your Phone Number field in Ninja Forms, you want to make sure you apply an input mask to this field. For phone number formats, there’s a prebuilt Phone field in US format. US Phone will format the number to look like this (_ _ _ ) _ _ _ – _ _ _ _.

US Phone Input Mask

If you need another format, you can use a Single Line Text field and apply a custom input mask. With the Custom option selected, you would be able to set a “Custom Mask” as it shows below:

Custom Input Mask Phone Format

We would like to remind you again, you need to enable “Dev Mode” to access advanced settings within Ninja Forms like the Restriction section on the Single Line Text field. Otherwise, you won’t be able to apply Input Mask on your form field.

How to create a Birthday field?

You can create the date of the birth field when you choose a Single Line Text field. Expand the Restrictions settings and navigate to Input Mask. You can select either Custom or Date.

If you want a date being a US format such as MM/DD/YYYY, you can select the Date from the Input Mask options. This will display the calendar where the user can pick the date.

Date Input Mask

For another date format such as European DD/MM/YYYY, you can select the Custom option that will open a Custom Mask field. Here, you can format a birth date field as 99/99/9999.

custom input mask

How to validate a Zipcode field with numbers?

To validate the Zip field open up the Restrictions dropdown of the Zipcode field > Input Mask > Custom and type in the Custom Mask placeholder number 9. You can enter the number 9 depending on how long is your Zipcode. After you apply the input mask to this field, the user can only type in numbers. If they try to type in letters they will not be able to.

Zip code custom input mask

Bonus: Add Tooltip to your Single Line Text field

Do you want to give a piece of extra information to your user for this specific field? Use the Help text option! You can add additional text that will display an informational icon next to the field label.

Navigate to your Single Line Text field > Display > Help text. Here you can enter the text you would like to address or remind your user.

help text ninja forms

Once you save and preview your form, you will see the informational icon next to the label. When a user hovers over it, a small window will appear containing this text.

You’ve just learned how to create and use Input Mask on your WordPress form!

That’s it! If you followed our instructions, you should now know how to use and create an input mask on your form. Don’t forget you need to have your Developer Mode enabled in order to see settings for the Input Mask, and you can only use it on the Single Line Text field. Other fields don’t support the Input Mask. If you want to learn more about Ninja Forms fields on your form, make sure to check our article Field Types!