Form phone number input with country
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"bbf18984-e297-3269-3398-77086805980f","type":"Block","meta":{"displayName":"Form phone input"},"tag":"div","classes":["01910bd6-c336-5189-cf0f-71568d93844c"],"children":["6d39c3d8-32ed-6598-5dcf-693999bb6422"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6d39c3d8-32ed-6598-5dcf-693999bb6422","type":"Block","tag":"div","classes":["2e561486-8717-c3e1-c94b-2f60e45f8939"],"children":["abec817a-16cf-a785-61a0-d4db252ede4b"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"abec817a-16cf-a785-61a0-d4db252ede4b","type":"Block","tag":"div","classes":["5eeb7aa6-eb24-a583-d29d-d231e90b4c6f"],"children":["9bb454bb-3c7a-82a7-60d2-bfebfac387d7"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9bb454bb-3c7a-82a7-60d2-bfebfac387d7","type":"Block","tag":"div","classes":["be493314-70c0-58af-e646-ecdad756c36e"],"children":["27ceaa23-d2a5-2cd7-4984-6cb96639c6bb","27936de2-2e2e-bca0-a048-a156d1b887a0"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"27ceaa23-d2a5-2cd7-4984-6cb96639c6bb","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e"],"children":["1e46aa11-6e88-753d-eb60-79fd73cfe4c7"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1e46aa11-6e88-753d-eb60-79fd73cfe4c7","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e258a4"],"children":["263838ae-507f-71eb-e029-c6314f6b8c06"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"263838ae-507f-71eb-e029-c6314f6b8c06","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e","90705d1f-1425-92ed-8b78-e004484ff189"],"children":["2ed6f6d1-a9a4-45f1-132d-ad04c6ad13e8"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2ed6f6d1-a9a4-45f1-132d-ad04c6ad13e8","type":"Heading","tag":"h3","classes":["a0dedb4b-352a-5c52-0822-4d1fe7d27844"],"children":["a57c0054-2994-4798-a9d3-522ec5ea5d39"],"data":{"tag":"h3","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a57c0054-2994-4798-a9d3-522ec5ea5d39","text":true,"v":"Phone number input with country"},{"_id":"27936de2-2e2e-bca0-a048-a156d1b887a0","type":"FormWrapper","tag":"div","classes":[],"children":["214589ec-b5b4-52f7-2b38-2152cec35415","d4b9cb44-90ed-25cf-d1a1-aff03107a145","e4257134-dc79-c500-9a2c-12c0104946a3"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"214589ec-b5b4-52f7-2b38-2152cec35415","type":"FormForm","tag":"form","classes":[],"children":["43c375fb-04ab-f22c-9a3e-f9167dd9493d"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Email Form 3"},"attr":{"id":"email-form-3","name":"email-form-3","data-name":"Email Form 3","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"43c375fb-04ab-f22c-9a3e-f9167dd9493d","type":"Block","tag":"div","classes":["d9651386-2a27-1fb5-3861-4e2db22f99e9"],"children":["421d54c8-e54b-9789-a5e0-eeee60cdd1af","f3088dad-14b0-ee54-fcac-932995f6bb39"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"421d54c8-e54b-9789-a5e0-eeee60cdd1af","type":"FormBlockLabel","tag":"label","classes":["d9651386-2a27-1fb5-3861-4e2db22f99ea"],"children":["8c0f8751-f9c7-c9cb-d7bf-063442da0226"],"data":{"attr":{"for":"Phone","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"users":""}},{"_id":"8c0f8751-f9c7-c9cb-d7bf-063442da0226","text":true,"v":"Phone Number"},{"_id":"f3088dad-14b0-ee54-fcac-932995f6bb39","type":"FormTextInput","tag":"input","classes":["ecde0205-5afe-c4ee-be2c-39daacc5cbad"],"children":[],"data":{"form":{"name":"Phone","type":"input","passwordPage":false},"attr":{"id":"Phone","name":"Phone","maxlength":256,"data-name":"Phone","placeholder":"","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"input-phone-number","value":"ca,gb,us"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d4b9cb44-90ed-25cf-d1a1-aff03107a145","type":"FormSuccessMessage","tag":"div","classes":[],"children":["fbefd7f7-24f3-1794-c32d-80f8cbeef2a7"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"fbefd7f7-24f3-1794-c32d-80f8cbeef2a7","type":"Block","tag":"div","classes":[],"children":["c58a07ef-a984-b100-f271-9c6cc98d9f7e"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c58a07ef-a984-b100-f271-9c6cc98d9f7e","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"e4257134-dc79-c500-9a2c-12c0104946a3","type":"FormErrorMessage","tag":"div","classes":[],"children":["34e915fe-20e7-3dc8-b33b-88630424ce35"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"34e915fe-20e7-3dc8-b33b-88630424ce35","type":"Block","tag":"div","classes":[],"children":["aaa8717d-1b2c-69e4-11e8-cf09a060a556"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"aaa8717d-1b2c-69e4-11e8-cf09a060a556","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"d9651386-2a27-1fb5-3861-4e2db22f99ea","fake":false,"type":"class","name":"label 5","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"5eeb7aa6-eb24-a583-d29d-d231e90b4c6f","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; width: 100%;","variants":{},"children":["04c9be61-61c7-13a6-ce28-a47e6f31114c"],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null},{"_id":"01910bd6-c336-5189-cf0f-71568d93844c","fake":false,"type":"class","name":"section blog featured list","namespace":"","comb":"","styleLess":"font-family: Arial;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"be493314-70c0-58af-e646-ecdad756c36e","fake":false,"type":"class","name":"Form components","namespace":"","comb":"","styleLess":"padding-top: 4rem; padding-bottom: 4rem;","variants":{},"children":["af890653-7c7e-d635-91b6-737358404c87"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"2e561486-8717-c3e1-c94b-2f60e45f8939","fake":false,"type":"class","name":"padding global","namespace":"","comb":"","styleLess":"","variants":{},"children":["b6ecef7c-8790-e41f-e752-b5bd0ea57412"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"a0dedb4b-352a-5c52-0822-4d1fe7d27844","fake":false,"type":"class","name":"heading h3","namespace":"","comb":"","styleLess":"font-size: 3rem; line-height: 1.3;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"ecde0205-5afe-c4ee-be2c-39daacc5cbad","fake":false,"type":"class","name":"input field","namespace":"","comb":"","styleLess":"min-height: 3rem; margin-bottom: 0px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; border-left-width: 1px; border-left-color: black; background-color: hsla(0, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{"tiny":{"styleLess":"margin-bottom: 0px;"}},"children":["34e85f8b-8c81-48f4-db69-5ab7b60fca06","31ea97f7-0a92-957d-f3d9-c77d291cc8cb","8a7821b0-1833-d447-9db6-3688a4d9c0f1","05b3678e-e04f-8993-93a8-d4bc42144828"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e2589e","fake":false,"type":"class","name":"margin-bottom 2","namespace":"","comb":"","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{"medium":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"small":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"tiny":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"}},"children":["30e35f4a-4769-6d57-8a39-760e31e258b7","30e35f4a-4769-6d57-8a39-760e31e258b8","30e35f4a-4769-6d57-8a39-760e31e258b9","a321b37e-da8c-043e-fda6-c052fe38eccb","a321b37e-da8c-043e-fda6-c052fe38eccd","90705d1f-1425-92ed-8b78-e004484ff188","90705d1f-1425-92ed-8b78-e004484ff189","5130463d-71e4-48dd-2d42-403515b56fc9","d3826aa4-c8fe-ef10-cb27-90a8efcba3ae","d3826aa4-c8fe-ef10-cb27-90a8efcba3af","c87f9757-0bde-9317-8a14-93adbf97e7e4","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f8","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f9"],"origin":null,"selector":null},{"_id":"90705d1f-1425-92ed-8b78-e004484ff189","fake":false,"type":"class","name":"margin-small","namespace":"","comb":"&","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"d9651386-2a27-1fb5-3861-4e2db22f99e9","fake":false,"type":"class","name":"input-wrap 3","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 20px; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 0%;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e258a4","fake":false,"type":"class","name":"max-width-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 48rem;","variants":{},"children":["a321b37e-da8c-043e-fda6-c052fe38ecd1","a03b952b-2c37-583f-0999-1f1fce695eb6","5130463d-71e4-48dd-2d42-403515b56fc8","eff43235-dbf9-cd4a-7730-fb1422700876","ac3c774d-19da-d2a3-c1df-058aae5c7635","5546765d-a18f-f16d-cfad-aea399a9632d","896b788e-9a49-3060-6439-3ea4dd70e6b3","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f7","5ba3c36e-3768-1e33-9026-50dce2e21943","bbbca8ba-198b-590d-c624-36baebc70264"],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// Paste in head tag
<!-- Phone number stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">// Paste in body tag
<!-- Phone number source script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<!-- Phone number utils source script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"> </script>
<!-- Phone number input phone number -->
<script>
$(document).ready(function() {
$('input[input-phone-number]').each(function() {
var input = this;
var preferredCountries = $(input).attr('input-phone-number').split(',');
var iti = window.intlTelInput(input, {
preferredCountries: preferredCountries,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
$.get("https://ipinfo.io", function(response) {
var countryCode = response.country;
iti.setCountry(countryCode);
}, "jsonp");
input.addEventListener('change', formatPhoneNumber);
input.addEventListener('keyup', formatPhoneNumber);
function formatPhoneNumber() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
}
var form = $(input).closest('form');
form.submit(function() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
});
});
});
</script>