Turn a checkbox into a switch
<label for="phone">Phone</label>
<input id="phone" type="tel" data-fc-modules="tel-field">
<label for="phone-validation">Phone</label>
<input id="phone-validation" required type="tel" data-fc-modules="tel-field" data-fc-text-error="Invalid number">
<label for="phone-european">European Phone</label>
<input id="phone-european" type="tel" data-fc-modules="tel-field" data-fc-countries="al,ad,at,by,be,ba,bg,hr,cz,dk,ee,fo,fi,fr,de,gi,gr,va,hu,is,ie,it,lv,li,lt,lu,mk,mt,md,mc,me,nl,no,pl,pt,ro,ru,sm,rs,sk,si,es,se,ch,ua,gb">
<label for="phone-preferred">Phone</label>
<input id="phone-preferred" type="tel" data-fc-modules="tel-field" data-fc-preferred-countries="es,pt">
<label for="phone-prefix">Phone</label>
<input id="phone-prefix" type="tel" required data-fc-modules="tel-field" data-fc-prefix="true">
<ol>
<li>
<label>Telephone number</label>
<input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-sync" data-fc-code-field="#code-country-sync">
</li>
<li>
<label>Country</label>
<div class="select">
<select id="address-country-sync"></select>
</div>
</li>
<li>
<label>Code</label>
<div class="select">
<select id="code-country-sync"></select>
</div>
</li>
</ol>
<ol>
<li>
<label>Telephone number</label>
<input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-sync-input" data-fc-code-field="#code-country-sync-input">
</li>
<li>
<label>Country</label>
<input type="text" id="address-country-sync-input" />
</li>
<li>
<label>Code</label>
<input type="text" id="code-country-sync-input" value="229" />
</li>
</ol>
<ol>
<li>
<label>Telephone number</label>
<input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-tel" data-fc-sync-country="false" data-fc-code-field="#code-country-tel" data-fc-sync-code="false">
</li>
<li>
<label>Country</label>
<div class="select">
<select id="address-country-tel"></select>
</div>
</li>
<li>
<label>Code</label>
<div class="select">
<select id="code-country-tel"></select>
</div>
</li>
</ol>
<ol>
<li>
<label>Telephone number</label>
<input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-other" data-fc-code-field="#code-country-other" data-fc-sync-tel="false">
</li>
<li>
<label>Country</label>
<div class="select">
<select id="address-country-other"></select>
</div>
</li>
<li>
<label>Code</label>
<div class="select">
<select id="code-country-other"></select>
</div>
</li>
</ol>
Makes the format validation works
DEFAULT: false
Text to show when the format number is not valid
DEFAULT: Invalid
Adds the prefix automatically to the field
DEFAULT: false
List separated by comma of iso code countries you want to show.
DEFAULT: null
List separated by comma of iso code countries you want add to the top of the list
DEFAULT: us,gb
By default the input shows the name of the countries in english but if you set this to true they will be displayed with the local names.
DEFAULT: false
target jQuery selector of one select to fill it with the list of countries and sync with the tel field
DEFAULT: null
target jQuery selector of one select to fill it with the list of country codes and sync with the tel field
DEFAULT: null
If you use the country-field or code-field option this will desactivate the sync of the fields when you change the tel field
DEFAULT: true
If you use the country-field option this will desactivate the sync of the fields when you change the country field
DEFAULT: true
If you use the code-field option this will desactivate the sync of the fields when you change the code field
DEFAULT: true