The Mask Input field in HT Contact Forms allows you to enforce a specific input format for users, ensuring that the submitted data matches a predefined structure (e.g., phone numbers, dates).
It helps improve data accuracy and user experience.
Mask Input Field Settings: #
1. Admin Label #
Set an internal label for the field, visible only in the form builder and admin entry management.
2. Field Label #
This is the label users will see on the front-end form, guiding them on what information to enter.
3. Label Position #
Define where the label should appear relative to the input box. Options include:
- Default
- Top
- Right
- Bottom
- Left
Adjust it according to your form’s design and layout.
4. Hide Label #
Toggle this setting to hide the field label from the front-end display, useful for a cleaner look.
5. Placeholder Text #
Provide example text inside the field to show the expected input format when it is empty.
6. Mask #
Select the mask pattern that defines the structure of the input.
✅ Example: Phone number mask (e.g., (999) 999-9999), date mask (e.g., 99/99/9999), etc.
✅ It ensures users follow a specific format while typing.
7. Required #
Enable this toggle to make the field mandatory for form submission.
8. Default Value #
Set a pre-filled value for the field when the form is loaded, following the mask format if necessary.
9. Field Size #
Adjust the visual size of the input field. Available options:
- Small
- Medium (Default)
- Large
Choose based on your overall form layout needs.
10. Field Class #
Specify a custom CSS class to apply personalized styles to the field for advanced customization.
11. Help Message #
Provide additional instructions or important notes for users regarding the input.
✅ Helps users understand the required format easily.
12. Message Position #
Decide where the Help Message should appear:
- Default
- Next to Label as Tooltip
- Below Input Element
Choose the position that fits your form’s design.
13. Prefix Label #
Add a prefix text before the input box (optional).
✅ Example: +88 before a phone number field.
14. Suffix Label #
Add a suffix text after the input box (optional).
✅ Example: .com after an email username input.
15. Name Attribute #
Assign a unique name attribute for this field, important for proper form data submission and backend processing.
Tip:
Using the Mask option correctly makes it easier for users to input information accurately, reducing errors during form submission! 🎯
