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 Contact Forms 7?

Step 1: Install and Activate the plugin

Download here: Input Mask Fields for Contact Forms 7

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 Contact Form. Then add the fields you need for your form.

Step 3: Choose Input Masks

Click on the field you want to apply an input mask. Choose form-tag Text Mask.

Step 4: Define the Input Mask Format

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 left_bracket and right_bracket like so:

99 9999 9999left_bracket9right_bracket

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.

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.

<label> Instagram URL
    [text_mask text_mask-27 "https://inst\\agr\\am.com/*{1,30}"] </label>

[submit "Submit"]

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 0–50 characters):

Mask: *left_bracket*{0,50}[email protected]

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 vertical_bar followed by the allowed values in parentheses separated by vertical_bar as in (xvertical_bary).
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: +(1vertical_bar61vertical_bar52) 9999999999

Example Inputs: +1 1234567890 or +52 3456789012

Another example, Account Number Starting in TN or KY

Mask: (TNvertical_barKY)9{10}

Example Inputs: TN3756284765 or KY2975387529

---

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