Preenchimento automático de endereço no Contact Form 7 (sem plugin)

Preenchimento automático de endereço através do CEP, no Contact Form 7. É isso que vou mostrar hoje, sem a necessidade de plugins extras. Se liga no passo a passo! 🙂

Passo 1 – Criando o formulário no Contact Form 7

Além das informações básicas (nome, e-mail, telefone), você deverá criar os campos de endereço com os respectivos ID’s dos endereços. Ficaria desta forma:

<label> CEP:
[text CEP: id:cep] </label>

<label> Rua:
[text Rua: id:rua] </label>

<label> Bairro:
[text Bairro: id:bairro] </label>

<label> Cidade:
[text Cidade: id:cidade] </label>

<label> Estado:
[text Estado: id:uf] </label>

Passo 2 – Inserindo o script

Você deverá inserir o script abaixo no código-fonte do seu site. Caso não tenha conhecimento para inseri-lo via FTP, recomendo a utilização do plugin Header Footer Code Manager . Com ele, basta inserir o código abaixo e salvar:

<!-- Adicionando JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

<!– Adicionando Javascript –>
<script>

$(document).ready(function() {

function limpa_formulário_cep() {
// Limpa valores do formulário de cep.
$(“#rua”).val(“”);
$(“#bairro”).val(“”);
$(“#cidade”).val(“”);
$(“#uf”).val(“”);
}

//Quando o campo cep perde o foco.
$(“#cep”).blur(function() {

//Nova variável “cep” somente com dígitos.
var cep = $(this).val().replace(/\D/g, ”);

//Verifica se campo cep possui valor informado.
if (cep != “”) {

//Expressão regular para validar o CEP.
var validacep = /^[0-9]{8}$/;

//Valida o formato do CEP.
if(validacep.test(cep)) {

//Preenche os campos com “…” enquanto consulta webservice.
$(“#rua”).val(“…”);
$(“#bairro”).val(“…”);
$(“#cidade”).val(“…”);
$(“#uf”).val(“…”);

//Consulta o webservice viacep.com.br/
$.getJSON(“https://viacep.com.br/ws/”+ cep +”/json/?callback=?”, function(dados) {

if (!(“erro” in dados)) {
//Atualiza os campos com os valores da consulta.
$(“#rua”).val(dados.logradouro);
$(“#bairro”).val(dados.bairro);
$(“#cidade”).val(dados.localidade);
$(“#uf”).val(dados.uf);
} //end if.
else {
//CEP pesquisado não foi encontrado.
limpa_formulário_cep();
alert(“CEP não encontrado.”);
}
});
} //end if.
else {
//cep é inválido.
limpa_formulário_cep();
alert(“Formato de CEP inválido.”);
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulário_cep();
}
});
});

</script>

Passo 3 – Conclusão

Com isto, seu formulário estará funcionando com autopreenchimento de endereço através do CEP, no Contact Form 7. Se gostou, compartilha o post! 🙂


Gostou? Comente!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Vamos conversar?

Entre em contato para qualquer assunto

Sobre mim

Me chamo Gabriel Moraes, natural de Porto Alegre, 25 anos e há 8 atuando na área de tecnologia da informação.