Document – Elementor forms – International Phone Masking Field

This add-on provides an enhanced telephone field specifically designed for international phone numbers. It allows users to input and validate phone numbers in the correct format for their country or region, improving the user experience and data accuracy in your WordPress forms.

Plugin Installation

Download it here: https://add-ons.org/plugin/elementor-forms-international-phone-input-mask-field/

Once you’ve downloaded a plugin, you’ll need to install it on your website. Log into your WordPress admin dashboard. Navigate to the “Plugins” section and click on “Add New.” Search for the plugin by name and click “Install Now” once you find it.

After installation, click on “Activate” to activate the plugin.

How to add an international phone input field?

Step 1: Install and Activate the plugin

Once you’ve downloaded a plugin, you’ll need to install it on your website. Log into your WordPress admin dashboard. Navigate to the “Plugins” section and click on “Add New.” Search for the plugin by name and click “Install Now” once you find it. Then, activate the plugin.

Step 2: Create a new form

Scroll down to your WordPress dashboard after the plugin has been installed. Go to PageCreate a new page or choose an existing one – Edit with Elementor Forms.

Step 3: Add a Form Widget
In the Elementor editor, add a Form widget to the desired section of your page. You can find the Form widget in the Basic Elements section of the Elementor widget panel.

Step 4: Add an International Phone Number Field

In the form builder interface, you custom a field to “Phone Number” and set the Telephone type.

Once you complete this step. Save the form and you have added the International Phone Field to Your Form. Let’s see:

International Phone Mask Input

Telephone Settings

Any options that take country codes should be ISO 3166-1 alpha-2 codes : link: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

How to set a preferred countries list?

It means specifying the countries to appear at the top of the list. By typing the country code into the Preferred Countries box.

If your customers come from which country the most? You can put them on the first of list so they can choose their number phone field easily.

E.g: We want the United States and the United Kingdom to appear at the top of the list. We just input the country code into the Preferred Countries box: us|gb.

Then you can see the picture below. The United States and the United Kingdom are on the top list.

How to set a preferred countries list?
International Phone Field

How to set only the selected countries list?

It means displaying only the countries you specify in the dropdown.

E.g: We want to only display three countries The United States, the United Kingdom of Great Britain, and Bulgaria. We just input the country code into the Only Countries box: us|gb|bg

Then you can see the picture below. Three countries are only on the list.

It means displaying only the countries you specify in the dropdown.
How to set only the selected countries list?

How to set the excluded countries?

You can input the Country code in the Exclude box to hide them in the dropdown.

How to set the excluded countries?

How to set default countries?

Typing the countries code into the box “Default”.

E.g: We take an example of the United States.

How to set default countries
How to set default countries

Automatically select the country code based on IP

You can switch on the button to Yes to automatically select the country code based on IP. And validate to avoid entering incorrect phone numbers.

Automatically select the country code based on IP

That’s it! We hope this article helped you find how to add International Phone Input to your Elementor Forms.