Are you using Elementor Forms and want to add a country code dropdown to your phone field?

A country code is a numeric prefix added before a phone number to indicate the country of the caller. For example, +1 is used for the USA, +91 for India, and +44 for the UK. Adding a country code field to your Elementor form ensures that users submit complete and accurate phone numbers. It eliminates the chances of missing codes, which can lead to failed calls or undelivered messages. With Cool FormKit, you can easily add country code and more advanced fields and features to the Elementor form widget, like conditional fields, range sliders, rating fields, and more.

Step-by-Step Guide To Add Country Code 

1. First, ensure that you have installed and activated the following plugins:
   • Elementor
   • Elementor Pro
   • Cool FormKit

After activating the Cool FormKit plugin, toggle on the country code for the Tel field feature from the form elements, and then save changes.

2. Navigate to the pages section. Add a new page or edit an existing one with Elementor.
3. In Elementor’s widgets panel, search for “Form”, then drag and drop the Form widget onto your page.

4. A form with three default fields will be added to your page, You can customize the form according to your requirements by adding additional fields.
5. Now, let’s add a country code field to our form. Navigate to the “type” option available in the content section of the form field.

6. From the options, choose “Tel field”.
7. Now, toggle on the country code option.

8. Additional settings to customize the field will appear.

• Default Country: Set the default selected country in the dropdown. Use a two-letter alpha-2 country code. For example: us – United States, in – India, gb – United Kingdom.
• Auto Detect Country: Enable the auto-detect country option to automatically detect the country code by the user’s IP address.
• Only countries section: Enter the countries that you want in the list; the list will only display those countries.
• Exclude countries section: Eliminate specific countries from the list by entering their alpha-2 code.
• Preferred countries: Enter the alpha-2 code of countries that you want to appear at the top of the list.
• Strict Mode: Toggle on this setting to remove any letters or special characters (like @, #, etc.) from the phone number field.
• Internationalisation: Choose a language of the country names and dropdown labels.
• Show Flags: Toggle on to display a small flag icon next to each country name in the country code dropdown.

9. Update the page and check the functioning of the country code in the form.

That’s it, we have successfully added the Country Code field to our Elementor form using Cool FormKit. 

Additionally, if you want to make filling out forms easier and more accurate for your visitors, I recommend trying the Form Input Masks for Elementor Form plugin. It extends the Elementor form widget by formatting fields like phone numbers, dates, and more, so you get accurate data without any extra effort.

Read more

Explore further ways to enhance your forms with Cool FormKit by checking out our comprehensive guide on:

• Create an Interest or Loan Calculator in Elementor using Cool FormKit
• Sending Condition-based email according to selected user input using Cool FormKit
• Adding a Range Slider to Elementor Forms using Cool FormKit
• Add Signature Field in Elementor Form using Cool FormKit
• Add a Rating Field to Elementor Form Widget using Cool FormKit