Complete Input Mask Guide

Introduction to Input Masks

Input masks are predefined patterns that control how users enter data into your form fields. They act as visual guides that help users input correctly formatted information by constraining the type of characters accepted and automatically adding formatting characters. This ensures data consistency and reduces errors in form submissions.

Setting Up Input Masks

To add an input mask to a field:

1. Create or edit a form in Bit Form
2. Add any supported field (text, textarea, URL, username) or select an existing one
3. Click on the field to open the Field Settings panel
4. Navigate to the “Input Mask” option in the field settings
5. Enter your mask pattern in the Input Mask field
6. Save your form and test the mask functionality

Basic Mask Patterns

Input masks use specific characters to define the format. Here are the fundamental mask characters:

Character	Description	Example
9	Any numeric digit (0-9)	99999 = 12345
a	Any alphabetical characters (a-z, A-Z)	aaa = AbC
A	Uppercase alphabetical characters any	AAA = ABC
*	Any alphanumeric characters (a-z, A-Z, 0-9)	**** = A12
&	Uppercase alphanumeric characters only	&&& = A1B

Literal Characters
Any non-special characters (like hyphens, parentheses, or dots) will appear as fixed elements in the mask that users don’t need to type.

Examples:

• (999) 999-9999 displays as: (___) ___-____
• 99/99/9999 displays as: __/__/____

Advanced Syntax

• {n}: Exactly n repetitions of the previous character type
• {n,m}: Between n and m repetitions of the previous character type
• [ ]: Optional section (user can skip)
• |: Alternator (either/or pattern)

Supported Fields in Bit Form

You can apply input masks to these field types in Bit Form:

• Single Line (Text field)
• Multiline Text (Textarea field)
• URL field
• Username field

Common Input Mask Examples

Phone Number Formats:

• US/Canada: (999) 999-9999 → (555) 123-4567
• International: +99 (999) 999-9999 → +44 (20) 7946-0958
• With Extension: 999-999-9999[ x99999] → 555-123-4567 x1234

Date Formats:

• MM/DD/YYYY: datetime: MM/DD/YYYY → 12/31/2025
• DD/MM/YYYY: datetime: DD/MM/YYYY → 31/12/2025
• YYYY-MM-DD H:MM TT: datetime: YYYY-MM-DD H:MM TT → 2025-12-31 12:30 AM

Identification Numbers:

• US Social Security: 999-99-9999 → 123-45-6789
• UK National Insurance: AA-99-99-99-A → AB-12-34-56-C

Custom Formats:

• License Plate: AAA-9999 → ABC-1234
• Product SKU: AA-9999-&& → AB-1234-X5
• Hexadecimal Color: #****** → #FF0033

Advanced Input Mask Techniques

1. Optional Parts — Flexibility when needed
Use square brackets [ ] to define optional parts of your mask.

Examples:

• ZIP+4: 99999[-9999] → Accepts 12345 or 12345-6789
• International Phone: +99 [999] 999-9999 → +1 555 123-4567 or +44 20 7946-0958

2. Repetition Syntax
Use {n} or {n,m} to repeat a pattern or allow a range.

Examples:

• Input Mask: 9999-9999-9999-9999
• Alternative: 9{4}-9{4}-9{4}-9{4}
• Example: 1234-5678-9012-3456
• 9{5} = Exactly 5 digits → 12345
• 9{3,5} = 3 to 5 digits → 123 or 12345
• a{3,100} = At least 3 letters and maximum 100 → abc or abcdef
• Alphanumeric, 6–8 characters: *{6,8}
• Input Mask: *{6,10} → Examples: ORD123 or ORDER12345

3. Alternator Masks
Use the pipe (|) character wrapped with parentheses to allow different patterns.

Examples:

• (aaa|999) = Either 3 letters or 3 numbers → abc or 123
• (TN|KY)9{8} = TN37562847 or KY29753875
• +(1|880|91) 999-9999 999 = +1 389-7893 920 or +91 350-7480 295

4. Escaping Special Characters
If your mask includes characters that overlap with mask tokens (like a, 9, etc.), escape them with a backslash (\).

Examples:

• Literal “a” in domain: *{1,50}@gm\ail.com
• SKU with literal digits: \9\9-&&&

5. Date & Time Formats

To configure an input mask for date or time, begin with datetime: and then specify the format you want.
Bit Form supports special date-time formatting using the following tokens:

• h: Hours; no leading zero for single-digit hours (12-hour clock).
• hh: Hours; leading zero for single-digit hours (12-hour clock).
• H: Hours; no leading zero for single-digit hours (24-hour clock).
• HH: Hours; leading zero for single-digit hours (24-hour clock).
• M: Minutes; no leading zero for single-digit minutes. Uppercase M to avoid conflict with months.
• MM: Minutes; leading zero for single-digit minutes. Uppercase MM to avoid conflict with months.
• s: Seconds; no leading zero for single-digit seconds.
• ss: Seconds; leading zero for single-digit seconds.
• l: Milliseconds. 3 digits.
• L: Milliseconds. 2 digits.
• t: Lowercase, single-character time marker string: a or p.
• tt: Two-character time marker string: am or pm.
• T: Single-character time marker string: A or P.
• TT: Two-character time marker string: AM or PM.

Examples:

• Short date: datetime: mm/dd/yyyy → 12/31/2025
• Full datetime: datetime: mm/dd/yyyy HH:MM TT → 12/31/2025 14:30 PM
• Time only: datetime: HH:MM → 14:30

6. Aliases — Predefined Mask Patterns
Bit Form includes several aliases (predefined masks) for common data types:

• numeric – Any numeric value including decimals
• currency – Monetary values with decimal points
• decimal – Any decimal number
• integer – Whole numbers only
• percentage – Percentage values (0–100)
• url – Website URLs
• email – Standard email format
• ip – IPv4 address format
• mac – Network MAC address format
• vin – 17-character VIN format
• ssn – US Social Security Number format

Validation Rules

Important considerations:

• Users must complete the entire mask pattern or leave the field completely empty
• Partial entries trigger validation errors
• Static characters (like dashes and parentheses) are automatically inserted
• Users only need to type the variable characters

Error Messages

Customize validation messages for a better user experience.

Troubleshooting Common Issues

Mask Not Working:

• Ensure you’re using a supported field type
• Check for syntax errors in your mask pattern
• Verify that the mask doesn’t conflict with other field settings

Incorrect Character Validation:

• Remember that 9 only allows numbers, a allows letters
• Use * for alphanumeric input when both are needed
• For specific character sets, consider using regex validation instead

Optional Sections Not Behaving as Expected:

• Ensure optional sections are enclosed in square brackets [ ]
• Test with both empty and filled optional sections

Mobile Usability Issues:

• Test masks on mobile devices to ensure touch compatibility
• Consider using simpler masks for mobile-first forms