Olá pessoal, no artigo de hoje iremos mostrar como criar um formulário de contato através do plugin Contact Form 7, onde ao preenchermos o CEP, os campos referentes ao endereço (rua, cidade, estado, bairro) são preenchidos automaticamente.

Para criar este formulário, usaremos algumas funções em Javascript, além do plugin CF7, para criação do formulário.


Primeiramente, copie o código abaixo e cole no final do arquivo functions.php do seu tema.

 <script type="text/javascript" >
   
function limpa_formulário_cep() {
            //Limpa valores do formulário de cep.
            document.getElementById('rua').value=("");
            document.getElementById('bairro').value=("");
            document.getElementById('cidade').value=("");
            document.getElementById('uf').value=("");
            
    }

    function meu_callback(conteudo) {
        if (!("erro" in conteudo)) {
            //Atualiza os campos com os valores.
            document.getElementById('rua').value=(conteudo.logradouro);
            document.getElementById('bairro').value=(conteudo.bairro);
            document.getElementById('cidade').value=(conteudo.localidade);
            document.getElementById('uf').value=(conteudo.uf);
            
        } //end if.
        else {
            //CEP não Encontrado.
            limpa_formulário_cep();
            alert("CEP não encontrado.");
        }
    }
        
    function pesquisacep(valor) {

        //Nova variável "cep" somente com dígitos.
        var cep = valor.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.
                document.getElementById('rua').value="...";
                document.getElementById('bairro').value="...";
                document.getElementById('cidade').value="...";
                document.getElementById('uf').value="...";
                

                //Cria um elemento javascript.
                var script = document.createElement('script');

                //Sincroniza com o callback.
                script.src = 'http://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

                //Insere script no documento e carrega o conteúdo.
                document.body.appendChild(script);

            } //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>

Agora vamos criar nosso formulário de contato e usar as ID’s e classes corretas para que as funções do código funcionem perfeitamente.

Criando o formulário no Contact Form 7

Nosso formulário no Contact Form 7 deverá ficar desta forma: (Pode customizá-lo da forma que achar melhor)

contact form 7

Se quiser copiar, segue abaixo:

<form method="get" action=".">

<h3>Informações pessoais</h3>

<label>Nome
[text* Nome id:nome class:nome "Digite o nome completo"]</label>
<label>Idade
[number* Idade min:16 max:45 id:idade class:idade]</label>

<h3>Informações de contato</h3>

<label>Cep:
<input name="cep" type="text" id="cep" value="" size="10" maxlength="9" onblur="pesquisacep(this.value);" /></label><br />
<label>Rua:
<input name="rua" type="text" id="rua" size="60" /></label><br />
<label>Bairro:
<input name="bairro" type="text" id="bairro" size="40" /></label><br />
<label>Cidade:
<input name="cidade" type="text" id="cidade" size="40" /></label><br />
<label>Estado:
<input name="uf" type="text" id="uf" size="2" /></label><br />
[submit id:enviar class:enviar "Enviar"]

</form>

Após criar o formulário, basta copiar o código gerado na sua página ou na sua postagem e correr pro abraço!

Finalizando

Com isto, é possível realizar o preenchimento automático do endereço a partir do CEP.

Algumas considerações:

  • Lembre-se sempre de utilizar o comando  onblur=”pesquisacep(this.value);” ao final do campo CEP.
  • Use sempre os ID’s (cep, rua, bairro, cidade e uf) nos campos. (Ou altere diretamente no primeiro código e use os ID’s da sua preferência);

Mais informações, vocês podem coletar através do site https://viacep.com.br/, onde você pode consultar outras funções como validação de CEP e pesquisa de CEP.

Se gostou, compartilha a publicação ou comenta aqui embaixo!

Posted by Gabriel Moraes

Criador e mantenedor do blog. Atuo na área de suporte à 4 anos e curso Análise e Desenvolvimento de Sistemas.