Would you like to require a specific format for a form field? Custom input masks allow you to set rules for the values users are allowed to enter into a field. This can be useful for international phone numbers, zip codes, and more. In this tutorial, we’ll show you how to create and add a custom input mask to a form field. Before you get started, make sure WPForms is installed and activated on your WordPress site. Then create a new form or edit an existing one. You can add a custom input mask to any Single Line Text field. After you’ve added this field type to your form, click on it to open its Field Options panel. Within the field options, you’ll need to click on the Advanced tab. Then you can add your rule to the Input Mask field. Basic Input MasksTo create the rules for a custom input mask, you’ll need to use a specific set of special characters.
For example, if you’d like to require a 5-digit number you would enter 5 When users click in this form field on the frontend, they will see an underscore or “blank” for each required character to help guide their input. Additionally, since we used the You can also include symbols such as hyphens (-) or parentheses in your input mask. For example, you could use the following input mask to require a phone number format with the US country code:
When a user clicks within this field, they will see blanks in place of the It’s important to note that users cannot submit a form if they’ve only partially filled an input mask. They must enter the number and type of characters required by the input mask or they will see a validation message reading, “Please fill out all blanks.” Note: Want to change the validation message users will see if they don’t complete an input mask? See our tutorial on customizing validation messages. However, adding an input mask to a field does not make the field required. Users can still submit the form if the input mask in a non-required field is completely empty. Adding Optional Characters to Your Input MasksSometimes 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:
Since the last digit is optional, this input mask would accept 10 digits, such as Additional Examples of Optional Characters in Input MasksUsername with 6–8 Letters (first letter uppercase, others lowercase)
US Zip Code with Optional +4:
Note: Users must still fill in all the blanks for optional characters in input masks. For example, users could not enter “33409-40” in the zip code +4 input mask above and submit the form. To create input masks with flexible ranges of optional characters, please see the advanced input mask options below. Escaping Special Mask CharactersDue to the special characters input masks use to create required formats, there are certain letters, numbers, and symbols that can appear as blanks when you don’t mean for them to. To avoid converting any of the special input mask characters into blanks on the frontend, you can simply add two backslashes (\\) in front of the character. As an example, let’s create an input mask for an Instagram URL. If we enter the input mask as To fix this, we just need to add a double backslash in front of any Now when we view this field within the embedded form, blanks will only appear where we intended. Additional Examples of Escaping Special Characters in Input MasksProduct SKU (2 9s followed by 3 additional numbers or uppercase letters)
Gmail Address
Advanced Input MasksIf 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. Repeating CharactersYou can use any of the special characters in front of Examples of Input Masks with Repeating CharactersUS Zip Code with Optional +4
12-Character Order Number with Numbers and Uppercase Letters
Flexible Ranges of CharactersYou can use any of the special characters in front of Examples of Input Masks with Flexible RangesFacebook URL (allows 5–50 characters):
Twitter Handle (allows 4–15 numbers, uppercase letters, or lowercase letters)
Email for a Specific Domain (allows 1–51 characters):
Product SKU with 8–11 Characters (allows numbers or uppercase letters):
Masking for Multiple Possible Input ValuesAnother 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 Note: This advanced input mask option does not work with the special characters listed at the beginning of this post. Examples of Masks That Allow Multiple Possible InputsPhone Number with Country Code for the US (+1), Australia (+61), or Mexico (+52)
Account Number Staring in TN or KY
Date / Time MasksYou can also use custom input masks to require a specific date or time format. Note: If you’d like to provide a datepicker calendar or dropdown options for date or time, the Date / Time field will likely be a better fit than a custom input mask. To
set up an input mask for either date or time, you’ll need to start with Date MasksUsing the options below, you can create custom date input masks that fit your needs.
As an example, Time MasksUsing the options below, you can create custom time input masks that fit your needs. Note: Remember to add
As an example, Using Aliases to Add Input MasksYou can enter an alias in the Input Mask field in the advanced field options to use a pre-packaged input mask. The available input mask aliases in WPForms include:
Note: Keep in mind that That’s it! You can now create custom input masks to require specific formats in your forms’ fields. Next, would you like to make your forms more compact? Be sure to check out our tutorial on using multi-column layouts to learn how to arrange fields into rows in your form. Which of the following input mask characters requires a user to enter a letter or a number quizlet?Which of the following input mask characters requires a user to enter a letter or a number? The "A" input mask character requires a user to enter a letter or a number. What is a primary key called that is made up of more than one field?
Which of the following wildcard characters does Access use in validation rules to match any number of characters?Matches any number of characters. You can use the asterisk (*) anywhere in a character string.
Which of the following characters separate the parts of an input mask?An input mask consists of three sections that are separated with a semicolon.
Which of the following number data types stores numbers from 0 to 255?Specifying a Microsoft Access Data Type. |