Cool FormKit For Elementor Pro Form

⌘K
  2. Home
  4. Cool FormKit For Elemento...
  6. Add Country Code dropdown to Tel Field in Elementor Forms

Add Country Code dropdown to Tel Field in Elementor Forms

You can easily add a country code dropdown in your form inside your Elementor Pro page. Please just follow these steps:-

* 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.

Enable Tel field option
  • From the Elementor widgets section, search & drag-and-drop the “Form” widget.
  • A form with three default fields will be added to your page.
  • Click on the type section in the content option of the Phone no field. Select the “Tel” field.
  • Now, turn on “Country Code” switch.
Add form Widget
  • The country code dropdown will get added to the tel field.
Country code drop down
  • After turning on “Country Code” switch, you will get access to the list of controls to optimize country code dropdown as per your needs.
Country code customization settings
  • 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.
Select default country
  • Only Countries:- Mention the list of countries that you want to include in the dropdown list.
select specific countries
  • Exclude Countries:- Mention the list of countries that you don’t want to appear in the dropdown.
Exclude specific countries
  • 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. 
preferred countries settings
  • Automatically Detect Country:- Automatically detect the user’s country based on their IP address. For Example, When a user visits your form, the plugin detects their location automatically based on IP address.

How to add API key?

  1. Click on the “Add API Key” link provided under the Automatically Detect Country setting.
  2. You will get redirected to WordPress Admin panel under Elementor >> Cool FormKit >> Settings Tab.
Add API key
  1. Enter the API key in the input field.
  2. Click on the “Save Changes” button.

Add Country Field for Elementor Form

You can easily add a country field in your form inside your Elementor Pro page. Please just follow these steps:-

  • Search “Form” inside the Elementor widgets section.
  • It will create a form with the default three fields.
  • Select “Country” field type.
Country Field for Elementor Form

“All setting options for Country Field are similar to Country Code for Tel Field.”