Input Patterns

Input patterns in SureForms allow you to control the format of the data users enter into form fields. 

For example, when creating a form for a bank loan application, it’s essential for applicants to provide their Social Security Number (SSN) in a specific format: 123-45-6789.

Input patterns help you format and mask such details.

In this guide, we’ll walk you through how to set up and use Input Patterns for different types of fields in your forms.

Adding Input Patterns In SureForms

To add an Input Pattern in SureForms:

• Go to the form editor and select the field where you want to add a pattern.
• Under Block > General, select “Custom” under the Input Pattern dropdown.

• In the “Custom Mask” field, add your desired pattern.

Let’s see how you can do that.

Basic Input Pattern Examples

Below are the main characters used to set up Input Patterns:

• 9: When you enter 9 in the Custom Mask field, your users will be able to fill in any numbers between 0-9 in that particular field. For example:

Let’s say you want users to enter their 6-digit ZIP code from your country, you can enter 6 “9s” into the “Custom Mask” field so that users can enter any 6-digit number on the form frontend. Here’s what it’ll look like for your users:

The field will only accept numeric values and display an underscore for each numeric character that has to be entered.

Similarly:

• a: Accepts alphabetical characters (a-z or A-Z). For example, if you enter 6 a’s into the “Custom Mask” field, the user will be able to enter any combination of 6 characters from a-z or A-Z.

• A: Accepts only the uppercase alphabetical characters (A-Z). For example, AAAAAAA can become JOHNDOE.

• *: Accepts alphanumeric characters (0-9, a-z, A-Z). For example, ****** can become User12.

• &: Accepts only the uppercase alphanumeric characters (0-9, A-Z). For example, &&&&&& can become USER12.

Adding Special Symbols In Your Input Masks

When creating Input Patterns in SureForms, you might want to include specific symbols, like plus signs (+) or parentheses, to guide users to enter data in a certain way. 

For example, if you want to set up an Input Pattern for a Dutch phone number with the country code (+31), you can add symbols directly into the pattern. 

SureForms will automatically display these symbols as fixed parts of the field so the users don’t need to type them.

Let’s understand this with an example.

For a Dutch phone number format, users need to enter a phone number like +31-24-(3611111).

• Use +31 as the country code.
• Add spaces or hyphens (-) to separate the groups of numbers.
• Add parentheses () where needed.

The Input Pattern would look like this:

+31-24-(3611111)

Now, only the numbers will be editable for users. The +31, hyphens, and parentheses will appear automatically.

Note: Make sure you enable the “Required” toggle button to make it mandatory for users to enter their full phone number or ZIP code before submitting your form.

If you don’t make it “Required” users will be able to submit the form even without filling the field partially/not filling it at all.

Adding Optional Characters to Your Input Patterns

Optional characters in Input Patterns are perfect for fields where you want to allow some flexibility in the input format. 

This is often useful when certain parts of the information may or may not be needed depending on the user’s situation.

For example, in some countries, the phone numbers are either nine digits or ten digits, depending on various regions. Here’s what you can enter in the “Custom Mask” field to handle this:

Now, the users will be able to fill in both nine-digit and ten-digit numeric characters. For example:

Setting Up Date Input Masks

Input Patterns can also be used to ensure dates and times follow a specific format. 

In SureForms, you can set up custom date and time formats so that users enter information consistently.

Suppose you want users to enter a date in the format “Day.Month.Year”. Using SureForms’ date placeholders, you can create a custom Input Pattern to guide users to enter dates this way.

Here’s how the Input Pattern will look: date:d.mm.yyyy.

Explanation:

• d: Allows the day of the month as one or two digits (e.g., 5 or 15).
• mm: Requires the month as two digits, with a leading zero for single-digit months (e.g., 11 for November or 05 for May).
• yyyy: Requires the full four-digit year.

With this pattern, users will enter dates like:

Here are the remaining custom date masks:

• dd: Mandatorily requires the day as two digits, always with a leading zero for single-digit days (e.g., 05).
• m: Users can enter the single-digit month in one digit. They can also enter two-digit months if required.
• yy: Requires users to enter a two-digit year.

Escaping Special Characters in Your Input Patterns

Sometimes, when setting up an Input Pattern, you may need to include special characters that SureForms usually uses as placeholders (like a, 9, or *).

To keep these characters from being treated as part of the pattern, you can “escape” them by adding a backslash \ before each one. This tells SureForms to display them as-is, rather than interpreting them as placeholders.

Let’s say you want to create a field where users can enter a unique code that always starts with the letter “a,” followed by a mix of numbers and letters. Since SureForms uses a as a placeholder for any letter, we need to escape it with a backslash \ so that it shows up as the actual letter “a.”

Here’s what it will look like to your users:

Setting Up Time Input Masks

Time masks help users enter time consistently, whether in a 12-hour or 24-hour format. Here’s how to use the different placeholders for hours, minutes, and more:

Note: You need to add “date:” before all the date input masks too.

• h: Hours without a leading zero for single-digit hours, 12-hour clock (e.g., 1 for 1 o’clock).
• hh: Hours with a leading zero for single-digit hours, 12-hour clock (e.g., 01).
• H: Hours without a leading zero for single-digit hours, 24-hour clock (e.g., 8 for 8 a.m. or 18 for 6 p.m.).
• HH: Hours with a leading zero for single-digit hours, 24-hour clock (e.g., 08 or 18).
• M: Minutes without a leading zero for single-digit minutes (e.g., 5 for 5 minutes).
• MM: Minutes with a leading zero for single-digit minutes (e.g., 05).
• s: Seconds without a leading zero for single-digit seconds.
• ss: Seconds with a leading zero for single-digit seconds.
• l: Milliseconds, displayed with 3 digits (e.g., 123 for 123 milliseconds).
• L: Milliseconds, displayed with 2 digits (e.g., 12).
• t: Single-character time marker, lowercase for am/pm (a or p).
• tt: Two-character time marker, lowercase am/pm (am or pm).
• T: Single-character time marker, uppercase for AM/PM (A or P).
• TT: Two-character time marker, uppercase AM/PM (AM or PM).

Example 1:

Let’s say you want users to enter a time in a 12-hour format, including minutes and an AM/PM marker. Here’s how the pattern will look:

Explanation:

• hh: Requires hours with a leading zero (e.g., 07).
• MM: Requires minutes with a leading zero (e.g., 30).
• TT: Requires an uppercase AM/PM marker (e.g., AM or PM).

With this pattern, users would enter times like:

• 07:30 AM
• 11:45 PM

Example 2:

If you want users to enter time in a 24-hour format with seconds, your pattern would look like this:

Explanation:

• HH: Requires hours with a leading zero in 24-hour format (e.g., 15 for 3 p.m.).
• MM: Requires minutes with a leading zero.
• ss: Requires seconds with a leading zero.

With this pattern, users would enter times like:

• 15:30:45
• 08:05:10

These are just some basic examples to help you get started with custom input patterns in SureForms. In future articles, we’ll explore advanced input patterns that give you even more control over your data collection.

Meanwhile, if you have any doubts, feel free to reach out to our support team. We’re always here to help!