Input masks are a useful feature in forms that help users enter data in a specific format. For example, you might want a phone number to be entered as (123) 456-7890 or a gmail in [email protected] format. This Input Masks for Elementor Forms plugin provides a straightforward way to implement custom input masks for various fields.

Table of contents:

1. What is an Input Mask?

An input mask is a template that guides users on how to enter data correctly. It prevents errors by ensuring that the data conforms to a predefined format. This is particularly useful for fields like phone numbers, text, or social security numbers.

2. How to Add Custom Input Masks in Elementor?

Step 1: Install and Activate the plugin

Download here: Input Masks for Elementor Forms Plugin

After downloading, upload it to your WordPress and activate the plugin.

Step 2: Create a New Form

On your WordPress dashboard, click on Add New Page – Edit with Elementor. Then add the fields you need for your form.

Step 3: Enable Input Masks

Click on the field you want to apply an input mask to (e.g., Single Line Text, Phone, etc.).

In the field type options, look for and choose the Input Mask type.

Step 4: Define the Input Mask Format

Standard Type:

Standard input masks provide predefined formats to ensure data is entered correctly. These are useful for common data types such as:

• Zip Code: Formats input to match standard postal codes (5-Digit Format: like 12345).
• US Phone: Enforces a format like (123) 456-7890.
• US Phone + EXT: Includes an extension option, like (123) 456-7890 x123.
• Tax ID: Matches the format of tax identification numbers.
• SSN (Social Security Number): Uses the format 123-45-6789.
• Full Zipcode: Accept both 5-digit and 9-digit (ZIP+4) postal codes (like 12345 OR 12345-6789)

Custom Type:

Custom input masks allow you to define your own rules for data entry. This is useful for unique formats specific to your needs. You can specify characters:

• 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)

Step 6: Test Your Form

Preview your form to ensure the input mask works as expected.

Test the form by entering data to check if the mask enforces the format.

3. Adding Optional Characters to Your Input Masks

Sometimes you may want to require a specific format for a field but also need to allow for a flexible number of characters.

For example, in many countries, phone numbers in different regions may contain different numbers of digits.

Place any optional characters inside square brackets like so:

99 9999 9999[9]

Since the last digit is optional, this input mask would accept 10 digits, such as 33 3333 3333, or 11 digits, such as 33 3333 33334.

Another example, username with 6–8 Letters (first letter uppercase, others lowercase)

Place any optional characters inside square brackets like so:

Aaaaaa[a][a]

Since the two last characters are optional, this input mask would accept 6 characters, such as Namiel, or 7 or 8, such as Namiele or Namielet.

4. Escaping Special Mask Characters

Due to the special characters input masks used to create required formats, certain letters, numbers, and symbols can appear as blanks when you don’t mean for them to.

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

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

If we enter the input mask as https://instagram.com/*{1,30}, all of the a characters will be converted into blanks that users must fill in on the front end.

To fix this, we just need to add a double backslash in front of any a that we don’t want to convert to a blank. So, for this example, we would enter the input mask as https://inst\\agr\\am.com/*{1,30} in the field options.

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

Another example,  product SKU (2 9s followed by 4 additional numbers or uppercase letters)

Mask: \\9\\9-&&&&

Example Input: 99-6789 or 99-BC80

5.Advanced Input Masks

If you’d like even more control over your form’s input masks, you can use advanced formatting options as well. They work in combination with all the special mask characters described above.

5.1 Repeating Characters

You can use any of the special characters in front of {n} (where n is a numeric value) to require a repeating character.

For example, 12-character Order Number with Numbers and Uppercase Letters

Mask: &{12}

Example Inputs: 29X483HK8192 or 10G7382ZR638

5.2 Flexible Ranges of Characters

You can use any of the special characters in front of {n,m} (where n and m represent numeric values) to allow users to enter a range of characters.

For example, email for a Specific Domain (allows 1–51 characters):

Mask: *[*{0,50}]@oursite.com

Example Input: [email protected] or [email protected]

5.3 Masking for Multiple Possible Input Values

Another option is to create an input mask that will accept multiple possible input values. To do so, enter a backslash followed by the allowed values in parentheses separated by vertical slashes as in (x|y).
Note: This advanced input mask option does not work with the special characters listed at the beginning of this post. x and y should be specific numbers or letters you want users to include in their input.

For example, Phone Number with Country Code for the US (+1), Australia (+61), or Mexico (+52)

Mask: +(1|61|52) 9999999999

Example Inputs: +1 1234567890 or +52 3456789012

Another example, Account Number Starting in TN or KY

Mask: (TN|KY)9{10}

Example Inputs: TN3756284765 or KY2975387529

---

We hope this document helps you find out How To Add or Custom Input Masks To Your Elementor Forms.