How to Add Country & State Field to Elementor Forms?

The Country and State fields in Elementor forms allow you to capture accurate location details from users. Using Cool FormKit, you can easily add a country and state field.

Why Add Country & State Fields?

Country and State fields help you collect correct location details from users. This is useful when you need to know where your users are from. For example, if you are creating a contact form, adding these fields will let people select their country and state when they fill out the form. If someone selects India in the Country field, they will then see a list of Indian states in the State field, which makes the form easier to use and the information more accurate.

To enable the Country and state field in your Elementor forms, simply follow the steps below:

Enable Country Code Field

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

Add Country Field

• Edit your Elementor Form, now from the type section of your form field, choose “Country”.

• Once selected, extra settings for the Country field will appear:
  • Auto 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.
  • 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. 

Add State Field

• Choose “State” from the type section of your form field.
• In the Country Field ID box, enter the Field ID of the Country field you created earlier. To find the Field ID of the Country field, go to the Advanced tab of that Country field.
• Now, publish your page and preview it.