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.
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 Page – Create 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:
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 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.
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 default countries?
Typing the countries code into the box “Default”.
E.g: We take an example of the United States.
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.
That’s it! We hope this article helped you find how to add International Phone Input to your Elementor Forms.