Como adicionar o campo DDI no formulário.

1. Adicione o formulário à página

Inclua o campo de telefone sem validação, mas você pode configurá-lo como obrigatório se desejar. (O código de DDI já valida o campo)

2. Encontre o ID do campo de telefone

Após adicionar o formulário, vá para a pré-visualização da página.

Clique com o botão direito sobre o campo de telefone e selecione Inspecionar.

No código HTML, procure pelo ID do campo (por exemplo, input_1731413733), conforme o exemplo abaixo:

3. Configure o código do DDI

Copie o código abaixo e cole-o no JavaScript/CSS da página. (Engrenagem do editor)

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

	.iti__country-container{ z-index: 9999999; }
	.iti { width: 100%; }
</style>
<script>
    const inputIds = [
        "input_2094970_1_25635"
    ];

    inputIds.forEach(function(inputId) {
        const existsInput = document.querySelectorAll(".e_formulario #" + inputId);
        if (existsInput) {
            for (const element of existsInput) {
                setTimeout(() => {
                    InstallDDI($(element).closest('.gpc-e').attr("id")+' #'+$(element).attr("id"));
                }, 200);
            }
        } else {
            $('body').on('click', '.link_popup', function () {
                setTimeout(() => {
                    const existsInputPopup = document.querySelectorAll(".gpc_modal .e_formulario #" + inputId);
                    if (existsInputPopup) {
                        for (const element of existsInputPopup) {
                            setTimeout(() => {
                                InstallDDI($(element).closest('.gpc_modal').attr("id")+' #'+$(element).closest('.gpc-e').attr("id")+' #'+$(element).attr("id"));
                            }, 200);
                        }
                    }
                }, 200);
            });
        }
    });

    function InstallDDI(id_input) {
        let ddi = "+1";
        let country = "US";

        const input = document.querySelector("#" + id_input);

        input.style.paddingLeft = "48px";
        input.closest(".gpc_campos").style.zIndex = "9999999";
        input.closest("fieldset").style.zIndex = "9999999";

        const phone = window.intlTelInput(input, {
            customPlaceholder: function(selectedCountryPlaceholder) {
                return selectedCountryPlaceholder;
            },
            useFullscreenPopup: false,
            initialCountry: country,
            strictMode: true,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.7.3/build/js/utils.js",
        });
        
        input.addEventListener("countrychange", function () {
            const countryData = phone.getSelectedCountryData();
            ddi = "+" + countryData.dialCode;
            country = countryData.iso2;
        });

        input.addEventListener("focus", function () {
            if (!input.value.startsWith(ddi)) input.value = ddi + input.value;
        });

        input.addEventListener("blur", function () {
            if (input.value != "" && !input.value.startsWith(ddi)) {
                input.value = ddi + input.value;
            }
            input.value = phone.getNumber(); // só agora formatamos
            validatePhone(input, phone, ddi);
        });

        input.addEventListener('input', function () {
            // Apenas remove erro enquanto digita
            if (input.classList.contains("personalized_error")) {
                input.classList.remove("personalized_error");
                const error = input.closest(".gpc_campos").querySelector(".gpc_campos-erro");
                if (error) error.setAttribute("data-gtt", "");
            }
        });

        const form = input.closest("form");
        const originalSubmitHandler = form.onsubmit;
        form.onsubmit = function (e) {
            input.value = phone.getNumber(); // Garante número formatado na submissão
            validatePhone(input, phone, ddi);
            if (input.classList.contains("personalized_error")) {
                e.preventDefault();
            } else if (typeof originalSubmitHandler === "function") {
                return originalSubmitHandler.call(form, e);
            }
        };
    }

    function validatePhone(input, phone, ddi) {
        let value = input.value;
        if (value.replace(ddi, "").trim() && phone.isValidNumber()) {
            input.classList.remove("personalized_error");
            const error = input.closest(".gpc_campos").querySelector(".gpc_campos-erro");
            if (error) error.setAttribute("data-gtt", "");
        } else {
            input.classList.add("personalized_error");
            const error = input.closest(".gpc_campos").querySelector(".gpc_campos-erro");
            if (error) error.setAttribute("data-gtt", "Telefone inválido");
        }
    }
</script>

4. Ajuste o ID do campo

Na linha 10 do código, substitua 'input_1730117344' pelo ID do seu campo de telefone..

5. Configure o DDI inicial

Na linha 42, altere o valor de ddi para o código do país desejado. Por exemplo, "+55" para Brasil ou "+1" para Estados Unidos.

6 . Configurar o código do país

Na linha 43 do código, você deve definir o país desejado usando o padrão de código ISO-3166 com dois dígitos. Por exemplo, para o Brasil, o código é "BR". Basta substituir o valor na linha abaixo:
let country = "BR"; (conforme o print)



Para encontrar o código correto de outros países, você pode consultar a lista completa no link: ISO-3166-1 Alpha-2.
Exemplo de uso para o Brasil: `let country = "BR";`

Pronto!

Com esse código, o campo de telefone no seu formulário agora exibirá o DDI configurado e funcionará de forma adaptada para diferentes países.

| É importante seguir cada um dos passos para garantir que tudo funcione corretamente.
Se ficou com alguma dúvida, não hesite em chamar nosso time de suporte!

Atualizado em: 06/05/2025