Profile Picture
Julian Galluzzo

International Phone Input

A form with an international phone input including country code, auto-formatting, and some validation. You can customize this further by following the documentation at https://intl-tel-input.com/ and by editing the code!
Copy component
{"content":[{"id":"fgxmfv","name":"container","parent":"lvbvvi","children":["nasslt","ossmlo"],"settings":{}},{"id":"nasslt","name":"form","parent":"fgxmfv","children":[],"settings":{"fields":[{"type":"tel","label":"Phone","placeholder":"Phone Number","id":"e69562","name":"phone"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"PostPilot","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","_margin":{"left":"auto","right":"auto"},"_width":"100%","_widthMax":"400","submitButtonWidth":"100%","submitButtonBackgroundColor":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"},"submitButtonTypography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"submitButtonBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"fieldMargin":{"bottom":"10"},"fieldBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}}},"themeStyles":{}},{"id":"ossmlo","name":"code","parent":"fgxmfv","children":[],"settings":{"code":"\n\n\n\n ","javascriptCode":"document.addEventListener(\"DOMContentLoaded\", function () {\n function initializeIntlTelInputs() {\n const phoneInputs = document.querySelectorAll('input[name=\"phone\"]');\n phoneInputs.forEach(input => {\n if (!input.dataset.intlTelInput) { // Prevent duplicate initialization\n const iti = window.intlTelInput(input, {\n initialCountry: \"auto\",\n geoIpLookup: function(callback) {\n fetch('https://ipapi.co/country/')\n .then(response => response.text())\n .then(countryCode => callback(countryCode))\n .catch(() => callback(\"us\")); // Default to US if lookup fails\n },\n utilsScript: \"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.8/js/utils.min.js\"\n });\n input.dataset.intlTelInput = true; // Mark as initialized\n }\n });\n }\n\n initializeIntlTelInputs(); // Run on page load\n\n // If dynamically adding inputs, call initializeIntlTelInputs() again\n});","executeCode":true,"signature":"f5a793af20bd27969b30b68c4e2a5411","user_id":1,"time":1739793293},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.11.1.1","globalClasses":[],"globalElements":[]}

Our notes on this component

Intl Tel Input is a popular JavaScript library for creating international phone inputs – this Bricks Builder component is a simple utilization of the intl tel input library which shows how you can create an auto-formatting international phone input in your Bricks form.

Personally, I think this library is awesome – it’s really easy to implement, and it’s very feature rich. That being said, if you want total design control, you may need to go a bit overboard on adding custom CSS.

Similar components

There are no other components in this category yet! To view all components, go to our home page.