---
title: "Add Country Code Dropdown"
url: https://docs.coolplugins.net/doc/country-code-elementor-form/
date: 2025-06-02
modified: 2026-07-02
author: "Satinder Singh"
description: "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..."
categories:
  - "Cool FormKit for Elementor"
word_count: 515
---

# Add Country Code Dropdown

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.

https://youtu.be/T-23HyXyLyg?si=jq5rzxGn7OFCroqd

## 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 Elementor forms](https://coolformkit.com/features/country-code-for-elementor-form/), 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"**.

[![tel type field](https://docs.coolplugins.net/wp-content/uploads/2025/06/tel-type-field.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/tel-type-field.jpg)

- Once the field type is set to **Tel**, toggle the **"Country Code"** switch to **ON**. This will add a dropdown.

![enable country code](https://docs.coolplugins.net/wp-content/uploads/2025/06/enable-country-code.png)

## 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:

[![country code customization option](https://docs.coolplugins.net/wp-content/uploads/2025/06/customized-settings-of-country-code.png)](https://docs.coolplugins.net/wp-content/uploads/2025/06/customized-settings-of-country-code.png)

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

- **Dial Code Visibility: **Control the visibility of the dialing code. It provides you with three display options:

**Show:** Displays the country dial code **together **with the phone number field. Example: +91 9876543210.**                                  **

- **Hide:** Hides the country code while displaying the phone number field. Example: 9876543210

- **Separate:** Displays the country dial code in a **separate section** from the phone number.

- **Strict Mode: **Enable the strict mode to ensure that users can enter only a** valid phone number format** in the phone field. This feature restricts the inputs to numeric digits and automatically ignores invalid characters. 

- **Internationalisation: **This option lets you choose the language used for the **country dropdown list** in the phone field.

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

[![add api key](https://docs.coolplugins.net/wp-content/uploads/2025/06/add-api-key.png)](https://docs.coolplugins.net/wp-content/uploads/2025/06/add-api-key.png)

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