Country Dial Code Field

The Country Dial Code Field adds a very handy way to let your users select calling codes while giving you complete control over which are allowed.

watch the Country Dial Code Field tutorial

Play Video

Easily implement country calling code selection in your fields.

When asking your users to submit their phone number through an Elementor form, sometimes you may want them to specify which country their number is from, using a country calling code.

This is actually not possible at all with a default Elementor installation, even if it’s a pretty important feature to have available, be it for organizational purposes, or to further filter out users from countries that your website doesn’t service. The Country Dial Code Field makes it possible while giving you full control over a handful of important settings.

Advanced customization options.

The Country Dial Code Field comes with a range of vey important options to customize in order to optimize user experience and user interface both.

  • Display Only Selected Countries

While the Country Dial Code Field comes with a list of all possible countries, sometimes your website might only be relevant for a few of those. As such, we can specify which countries will be the only ones to have their codes available for submission.

  • Countries at the Top of the List

If the majority of your visitors are browsing for a couple of countries, you can make sure the most common country codes show up first in the list, so that users will spend less time browsing for their own code.

  • Initial Country

This option lets you select which country code to set as default. Again useful to save time for majority of users that would be using that country code.

  • Countries to hide

Your website’s products or services don’t apply to certain countries? exclude them from the list with ease.

As with every Gloo feature, the Country Dial Code Field is all about making your life easier by allowing you to have all the options you need in one place.

 

Frequently Asked Questions

The Country Dial Code Field is a feature that allows users to specify which country their phone number is from, using a country calling code, when submitting their phone number through an Elementor form.
The Country Dial Code Field is important for organizational purposes and to further filter out users from countries that your website doesn’t service.
Yes, the Country Dial Code Field comes with advanced customization options. You can display only selected countries, set the most common country codes to show up first in the list, set an initial country as default, and hide countries that your website’s products or services don’t apply to.
THIS FEATURE IS PART OF :
Gloo logo - white

Country Dial Code Field

Forms + Extension - header

Let your users submit country calling codes along with the rest of their number through your Elementor forms.

create your Elementor Form
Build the form as you normally would
Add A TEL Field
Use the native elementor TEL field
Turn On "Country Dial Code Field"
You can choose the default country by adding typing its code, for example: "US"
Exclude or Include Countries
if nothing is selected all countries will show up
Choose Prefereed Countries
You can decide which countries should appear at the top of the list
Use National Mode to submit the number without the country code

More Modules

Checkbox & Radio Field Control
Better Gallery Form Field New
Dynamify Repeaters New
Terms Field
GSAP Line Drawing
Community Dynamic Tags New
Image Cropping UI
Frontend User Registration New
GSAP ScrollTrigger
Interactor Engine
Grain Control
GSAP Custom Tween New
Woo Variation Table New
Repeater Dynamic Tag
Select2 Fields
Buddyboss Groups Dynamic Tags New
Dynamic Form Actions New
Custom Webhook Connector New
Fluid Logic New
AffiliateWP Dynamic Tag

1. Drag In the Form element

Drag In the Forelement

2. Click on ADD ITEM

Click on ADD ITEM

3. Choose the Tel from Type

Choose the Tel from Type

4. Check Country Dial Code Field

Check Country Dial Code Field

5. Add the default country code

for example : us

Add the default country code

6. Include Countries (optional)

for example : us , gb , de , ca

Include Countries (optional)

7. Choose Preferred Countries

for example : us , ca

Choose Preferred Countries

8. Exclude Countries (Optionl)

for example : nl

Exclude Countries (Optionl)

9. Click on Style

Click on Style

10. Choose Country Code Field

Choose Country Code Field

11. Adjust The Design

Adjust The Design

12. UPDATE and thats it

you can view the changes as preview