These days, we see many contact forms require users to input their phone numbers along with the country codes. Sometimes, it can be a hassle to manually find and input the correct country code. To save users from this hassle, The “Extensions for CF7” plugin has a solution.
You can leverage its “Advanced Telephone” module to add an advanced field to your form where users can easily choose their country flag and input their phone numbers. It gives them a smoother user experience. Furthermore, you can even specify which country flags to show in the dropdown options of your Advanced telephone number field.
Enable The Advanced Telephone Extension #
Like other extensions of the plugin, enabling the “Advanced Telephone” extension is a breeze. Just navigate to your WordPress dashboard and go to “HT CF7 Extension“. Then open the “Extensions” tab and enable the “Advanced Telephone” extension from there.
“HT Advance Telephone” Option displayed on the form #
Once you enable the extension, a new tag named “HT Advance Telephone” will be added to the form edit screen. Now you can insert the tag anywhere on your form.
Introduction to the HT Advance Telephone popup options. #
When you click the “HT Advance Telephone” tag, a pop will appear where you can see the necessary options to configure the advanced telephone field.
- Name: Set a unique name for the field.
- Exclude Country: If you want to exclude any country flag or dial codes from the dropdown list, specify it here. e.g. in|pk|ch
- Only Country: If your website needs to display only a few country dial codes in the dropdown list, set it from here. e.g. in|pk|ch
- Initial Country: Use this option to set a default country whose flag and dial code remain preselected in the dropdown list. e.g. us
- ID Attribute: If you want to add a unique ID to the field, you can enter the ID here.
- Class Attribute: If you need to add a class to this field, insert the class name here.
Once you complete the configuration, be sure to click the “Insert Tag” button.
After Inserting the Telephone tag #
When you insert the “HT Advance Telephone” tag into the form, it will appear like the following:
After completing the setup of the Advanced Telephone Extension #
Inserting the “Advanced Telephone” tag into your form, adds an advanced field like the one shown in the picture above. In this field, users can select their country flag and enter their phone number. If a user accidentally types in the wrong number, the form will show a warning.
OFF every WordPress plugin!