The Country Code Dropdown enhances your phone number input field by allowing users to select their country code from a predefined list. Using Cool FormKit, you can easily add a Country Code Dropdown to your form fields.
Why add Country Code Dropdown to the Tel Field
Adding a country code dropdown to your telephone input field significantly improves the accuracy and usability of your forms, especially for an international audience.
For example, a user from Germany might enter their number as “0176 12345678,” which is valid locally but not usable internationally. However, with the country code dropdown, user can select “Germany (+49)” from the list and enter their number as “176 12345678.” The form then automatically formats and stores the number as “+49 176 12345678,” ensuring it’s globally recognizable and ready for use.
To enable the Country Code Dropdown in your Elementor forms, simply follow the steps below:
Enable Phone Field with Country Code
* Firstly, make sure you have turned on the Country Code for Tel Field feature in the WordPress Admin Panel >> Elementor >> Cool FormKit >> Form Elements Tab.
- Edit your Elementor form and click on the Phone Number field. In the Content settings, go to the Type dropdown and select “Tel”.
- Once the field type is set to Tel, toggle the “Country Code” switch to ON. This will add a dropdown.
Set Default Country
After turning on the “Country Code” switch, you will get access to the list of controls to optimize country code dropdown as per your needs:
- Default Country:- Set the default country to define which country should appear pre-selected in the country code or country dropdown when the form is first loaded.
- Only Countries:- Mention the list of countries that you want to include in the dropdown list. All other countries will be hidden.
- Exclude Countries:- Mention the list of countries that you don’t want to appear in the dropdown.
- Preferred Countries:- Set the order in which the countries must appear in the dropdown. The countries mentioned here will appear at the top of the list.
- Automatically Detect Country:- Enable this option to detect and pre-select the user’s country based on their IP address.
- To enable automatic country detection, you’ll need to add API Key.
- Click on the “Add API Key” link provided under the Automatically Detect Country setting.
- You will get redirected to the WordPress Admin panel under Elementor >> Cool FormKit >> Settings Tab.
- Enter the API key in the input field and click on the “Save Changes” button.