Mask Input for Contact Form 7 ensures users enter data in the correct format. It can limit phone numbers to 10 or 11 digits, or format dates and credit cards. This feature reduces errors and keeps your data consistent. It’s an easy way to guide users and improve form accuracy.
This guide will help you understand and implement the Mask Input in Contact Form 7.
Make sure you have installed both Contact Form 7 & Essential Addons Contact Form 7 plugins inside your WordPress.
Enable Mask Input
You must enable Mask Input before implementing the customized input field in Contact Form 7. To do that, follow the below steps:
- Navigate to the Contact Form 7 menu.
- Essential Addons.
- From the Fields tab enable the Mask Input.
Add Mask Input Field
To implement the Mask Input in your contact form follow the below steps:
- Navigate to any existing form or create a new one.
- Add the “Mask Input” tag where you want to display it in your form.
Configure Mask Input
After clicking the Mask Input tag a new popup window will appear. Here you can configure & customize the Mask Input settings.
- Field Type: Tick or untick whether you want to mark it as required or not.
- Field Name: Usually the name field is auto-generated. You can add custom value if required.
- Mask Input: Select the mask input type. You can select phone number, IP address, license, date & time, and many more.
- Placeholder: Enter your preferred placeholder if needed.
- Class Attribute: Enter custom class attribute if needed.
- Display: Select whether you want to display the Match Captcha field Inline or as a Block.
Click the Insert Tag button once the configuration is done.
- The customized tag will be added to your form editing panel.
- Save Changes.
Embed the Shortcode
- Copy & Paste the shortcode inside your page or post to display the form.
Output
