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).

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>
	let camposDDI = ['input_1730117344']; // IDs dos campos de telefone
	if (camposDDI) {
		camposDDI.forEach((id) => { InstallDDI(id); });
		$('body').on('click', '.link_popup', function () {
			setTimeout(() => {
				camposDDI.forEach((id) => { InstallDDI(id,true); });
			}, 200);
		});

	}

	function InstallDDI(id_input, modal = false) {

		let ddi = "+55"; // DDI inicial
		let country = "BR"; // País inicial (para mais procurar em https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements)
		let customPlaceholder = ""; // Texto customizado para o placeholder

		const input = document.querySelector((modal ? '.gpc_modal ' : '')+"#" + id_input);
		if(input == null) return;

		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, selectedCountryData) {
				return !customPlaceholder ? selectedCountryPlaceholder : customPlaceholder;
			},
			useFullscreenPopup: false,
			initialCountry: country,
			autoPlaceholder: "aggressive",
			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();
			const dialCode = countryData.dialCode;
			if (dialCode) {
				input.value = input.value.replace(ddi, "");
				if(input.value.startsWith(ddi)){ input.value = `+${dialCode}${input.value}`; }
				ddi = `+${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.dispatchEvent(new Event('input'));
		});

		input.addEventListener('input', function (e) {

			input.value = phone.getNumber();

			if(e.target.value === "") {
				phone.setCountry(country);
			}

			if (input.value.replace(ddi, "").trim() && phone.isValidNumber()) {
				e.target.classList.remove("personalized_error");
				e.target.closest(".gpc_campos").querySelector(".gpc_campos-erro").setAttribute("data-gtt", "");
			} else {
				e.target.classList.add("personalized_error");
				e.target.closest(".gpc_campos").querySelector(".gpc_campos-erro").setAttribute("data-gtt", "Telefone inválido");
			}
		});

		const form = input.closest("form");
		const originalSubmitHandler = form.onsubmit;

		form.onsubmit = function (e) {

			input.dispatchEvent(new Event('input'));

			if (input.classList.contains("personalized_error")) {
				e.preventDefault();
			} else if (typeof originalSubmitHandler === "function") {
				return originalSubmitHandler.call(form, e);
			}
		};

	}

</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 23, 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 24 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: 14/11/2024