JetFormBuilder Phone Field: Auto-Detect Country and Phone Dial Code

To auto-detect the visitor's country and dial code in JetFormBuilder, use the built-in Phone field block, available since JetFormBuilder 3.6.0. Leave its DEFAULT COUNTRY setting on auto and set SAVE FORMAT to E.164. Detection works without an ipinfo.io token. In JetFormBuilder 3.6.0 to 3.6.7, adding a token breaks the IP lookup, so leave it out (see Step 1). The field then shows the visitor's flag and dial code based on their IP and saves a clean international number such as +380991234567. No PHP or JavaScript is required.

Older guides tell you to set a Text field to the TEL type and add custom PHP and JavaScript. That approach is outdated, and the widely shared snippet behind it has bugs. Below we cover the built-in setup, what to do if you used the old code, and how to fix the usual problems.

• What you need
• Step 1 (optional): Add an ipinfo.io token
• Step 2: Add and configure the Phone field
• Which save format to choose
• Step 3: Test the auto-detection
• Saving the country name in a separate field
• If you used the old custom code
• Common problems

What you need

• JetFormBuilder 3.6.0 or later. The Phone field was added in 3.6.0. Before that, Tel was only a type option of the Text field, with few settings.
• Preferably 3.6.6 or later. Version 3.6.6 fixed a bug where the Phone field rejected all landline (fixed-line) numbers as invalid. Version 3.6.7 added custom placeholder support. The current release is 3.6.7, so update if you can.
• An ipinfo.io account is optional (see Step 1). JetFormBuilder's Phone field uses ipinfo.io for its country detection, with or without a token.

Step 1 (optional): Add an ipinfo.io token

1. Sign up at ipinfo.io and copy the access token from your account dashboard.
2. In WordPress, go to JetFormBuilder > Settings > Ipinfo API and paste the token there. This global token can be reused by every Phone field on the site.
3. Save the settings.

You can also skip the global setting and paste a token into a single field (see the Additional Settings tab below). The global option is easier to maintain: when you rotate the token, you change it in one place.

Crocoblock's documentation says detection works with DEFAULT COUNTRY set to auto and that a token improves accuracy. Test this on your version before relying on it. In JetFormBuilder 3.6.0 to 3.6.7, a token makes the field call the IPinfo Lite API, but the field reads Lite's country value, which is the full country name (United States) rather than the ISO code (US). The lookup then fails silently. Without a token, the field calls the legacy https://ipinfo.io/json endpoint, which returns the ISO code. Because that request comes from each visitor's browser, ipinfo's no-token limit of 1,000 requests a day applies per visitor IP, not to your whole site. If the flag doesn't change with a token set, turn off Use Global ipinfo.io Token and leave the token box empty.

Step 2: Add and configure the Phone field

Open your form in the JetFormBuilder editor, click the block inserter and add the Phone field block. Remove any old Text field you previously set to TEL. Then work through the block settings in the sidebar.

General tab

• FIELD LABEL: for example, Phone number.
• FORM FIELD NAME: for example, phone. Use only Latin letters, numbers, hyphens or underscores, with no spaces. This is the name you use in actions, emails and integrations.
• FIELD DESCRIPTION: optional help text, such as We use this only to confirm your booking.

Value tab

Leave DEFAULT VALUE empty for a normal contact form. Use it, or the Add Dynamic Value button, only when you want to prefill a known number, such as the phone stored on the logged-in user's profile.

Field tab

• DEFAULT COUNTRY: leave it on auto to detect the country from the visitor's IP. Enter a two-letter uppercase ISO code such as US, GB or UA only if you want the same country for everyone. A fixed code overrides detection for every visitor.
• PREFERRED COUNTRIES: comma-separated ISO codes shown at the top of the dropdown, for example US, GB, UA. Put your main markets here.
• ONLY COUNTRIES: limits the dropdown to the listed countries, for example US, CA, MX. Use it when you only serve certain regions.
• EXCLUDE COUNTRIES: hides the listed countries, for example US, BY, CN.
• Separate Dial Code: shows the country code separately from the number. Turn it on if you want visitors to see clearly that the +44 or +1 part is already handled.
• SAVE FORMAT: choose E.164 or International. See the next section.

Additional Settings tab

Turn on Use Global ipinfo.io Token to use the token you saved in Step 1. When this toggle is on, no other fields show. If you leave it off, you can paste a token into the IPINFOIO API TOKEN box for this field only, or leave the box empty so the field detects the country without a token (see Step 1).

Validation Messages tab

Set the REQUIRED FIELD MESSAGE and INVALID PHONE MESSAGE in the language of your site. The invalid message appears when the number does not match the selected country's format.

Style

Under Block Style you can adjust Alignment, Border, Color, Margin, Padding and Typography so the field matches the rest of your form.

Which save format to choose

If you are unsure, pick E.164. It is digits only with a leading plus sign, so other systems accept it without cleanup.

Step 3: Test the auto-detection

1. Open the page with the form in a private browser window. The dropdown should show your own country's flag and dial code.
2. Close the private window, connect through a VPN in another country, then open the form in a new private window. The flag and dial code should change to match. A plain reload keeps the old country, because JetFormBuilder caches the detected country for the browser tab.
3. Enter a valid number and submit. Check the saved value in your form records or notification email. With E.164 you should see a number starting with + and no spaces.
4. Enter an obviously invalid number, such as too few digits. You should see your INVALID PHONE MESSAGE.

If you only want to check how the form looks for one market, temporarily set DEFAULT COUNTRY to that ISO code, then switch it back to auto.

Saving the country name in a separate field

The old custom approach also wrote the detected country name into a second text field called country. The Phone field has no setting that copies the detected country into another field. The dial code is part of the saved number, so with E.164 you can still tell the country from the prefix.

To fill a Text field named country automatically, add this JavaScript to your site footer, for example as a footer snippet in your code snippets plugin, and test it on staging. If your field has another name, change country in the script.

// Copies the Phone field's selected country into a Text field named "country".
function bmcCopyCountry(event) {
  var input = event.target;
  if (!input.classList || !input.classList.contains('phone-field-intl') || !window.intlTelInput) { return; }
  var iti = window.intlTelInput.getInstance(input);
  var form = input.closest('form');
  var country = form && form.querySelector('input[data-field-name="country"]');
  if (iti && country) {
    country.value = iti.getSelectedCountryData().name || '';
    country.dispatchEvent(new Event('input', { bubbles: true }));
  }
}
// Runs when the country changes and when the visitor types a number.
document.addEventListener('countrychange', bmcCopyCountry);
document.addEventListener('input', bmcCopyCountry);

If you would rather let the visitor choose the country, add a separate select field. Our guide on how to add a country list to a JetFormBuilder select field shows the setup.

If you used the old custom code

Many sites added a PHP and JavaScript snippet that loaded intl-tel-input 17.0.8 and called ipinfo.io. Once you switch to the built-in Phone field, remove that code from functions.php or your snippets plugin, so two phone widgets do not load on the same form. That snippet had several problems:

• Its PHP function was never hooked to any action, so it never ran. Pasting the token into the PHP part did nothing.
• The JavaScript read a country_iso field that the setup steps never created. On most forms this threw an error on page load, and the script stopped before it could save the full international number.
• It targeted the page by slug and styled the field with fragile nth-child CSS, so it broke when you reordered fields or renamed the page.
• The ipinfo token was visible in the front-end JavaScript. (The built-in Phone field also prints its token into the page, in a data-ipinfo-token attribute, so only use a token you're happy to make public.)

If you still maintain your own lookup elsewhere, note that ipinfo now has two free APIs with different responses. IPinfo Lite is free with unlimited country-level lookups and requires a token. Its endpoint is https://api.ipinfo.io/lite/me?token=YOUR_TOKEN, and it returns the ISO code in country_code (for example US) and the full name in country (for example United States). The older Legacy Free API at https://ipinfo.io/json?token=YOUR_TOKEN returns the ISO code in country and is capped at 50,000 requests per month with a token, or 1,000 per day without one.

fetch('https://api.ipinfo.io/lite/me?token=YOUR_TOKEN')
  .then(function (response) { return response.json(); })
  .then(function (data) {
    // ISO code, e.g. "US"
    console.log(data.country_code);
  });

Any token used in browser JavaScript is public, so treat it accordingly.

Common problems

The wrong country is detected

Check that DEFAULT COUNTRY is exactly auto. If you added a token, remove it and test again in a new private window (see Step 1). Until the IP lookup answers, or if it fails, the field uses the region from the browser language (for example en-US gives US). VPNs, corporate proxies and some mobile networks report an IP from another country, and no IP lookup can fix that. Visitors can still pick the right country from the dropdown.

Everyone gets the same country

DEFAULT COUNTRY probably contains a fixed ISO code. A fixed code overrides detection for every visitor. Set it back to auto.

The detected country is missing from the list

If ONLY COUNTRIES or EXCLUDE COUNTRIES is set, the visitor's country may be filtered out. Check both lists and make sure each code is a two-letter uppercase ISO code separated by commas.

Landline numbers are rejected as invalid

This was a bug fixed in JetFormBuilder 3.6.6. Update the plugin.

Validation is skipped after changing the country

Fixed in 3.6.2. Update to the latest version.

The country list is not translated

Since 3.6.1, Phone field translations follow the current WordPress page locale, so update first. If country names are still in the wrong language, use the jet-form-builder/phone-field/i18n filter from JetFormBuilder core. It starts as an empty array, and anything you return is merged over intl-tel-input's built-in translations. Use lowercase ISO codes as keys for country names (for example de) and intl-tel-input keys such as searchPlaceholder for interface text. It isn't in Crocoblock's documentation yet, so test it on staging.

Add this to your child theme's functions.php or a code snippets plugin:

add_filter( 'jet-form-builder/phone-field/i18n', function ( $i18n ) {
    $i18n['searchPlaceholder'] = 'Suchen';
    $i18n['de']                = 'Deutschland';
    return $i18n;
} );

The keyboard on mobile is not numeric

See our tip on how to force the number keyboard on JetFormBuilder phone fields. If you want a flag dropdown setup without an ipinfo key, we also cover a JetFormBuilder phone field with country flag and auto-detect.

Wrap-up

On JetFormBuilder 3.6.0 or later, country and dial code detection is a few settings: add the Phone block, keep DEFAULT COUNTRY on auto and save in E.164. Leave the ipinfo.io token out unless you have tested that the flag still changes with it. Drop any old custom snippet and update to at least 3.6.6 so landlines validate. If you would rather have someone set up your forms and integrations for you, post a request on BoostMyCroco.