Phone numbers (intl-tel-input)

formsub can drive intl-tel-input so the submitted phone number is E.164 (for example +359888123456). The widget is not bundled — load it yourself so window.intlTelInput exists.

1. Load the library

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/css/intlTelInput.css" />
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/intlTelInput.min.js"></script>

2. Add a phone input with an id

<input id="phone" name="phone" type="tel" autocomplete="tel" />

3. Enable it in newForm

formsub.newForm({
  formId: 'contact-form',
  submitButton: '#submit-button',
  ajaxUrl: '/api/contact',
  iti: {
    id: 'phone',
    country: 'BG',
  },
});

If the script or input is missing, formsub logs an error and continues without the phone UI. Default is iti: false.

What is submitted

Before formsub:BeforeSubmit, formsub writes:

Field	Example
Phone input name (e.g. phone)	+359888123456
country	bg
phone_code	359

Hidden inputs for country and phone_code are created in the form and stay in sync when the user changes country. The visible field keeps what the user typed; only the submitted value is E.164.

Options

Key	Description
id	Required. Element id of the tel input.
country	Initial country (ISO2, e.g. "BG"). Alias for initialCountry.
countryField	Hidden field name for country (default "country").
phoneCodeField	Hidden field name for dial code (default "phone_code").

Any other key is forwarded to intlTelInput(input, options).

formsub also defaults loadUtils to the intl-tel-input v29 utils module on jsDelivr.

Rename hidden fields

Use this when country or phone_code would clash with other fields:

iti: {
  id: 'phone',
  country: 'BG',
  countryField: 'phone_country',
  phoneCodeField: 'phone_dial_code',
}

Extra widget options

iti: {
  id: 'phone',
  country: 'US',
  separateDialCode: true,
  onlyCountries: ['us', 'ca', 'gb'],
}