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.

  • eduardo

    Para mim funcionou bem, mas fiz desas forma:
    No do tema primeiro chameio o script
    – Como no meu tema preciso usar jQuery e não $() por conta do conflito coloquei na chamada do script do jquery

    /*============================================================*/
    // https://viacep.com.br/exemplo/jquery/
    jQuery(document).ready(function() {

    function limpa_formulário_cep() {
    // Limpa valores do formulário de cep.
    $(“#rua_sg”).val(“”);
    $(“#bairro_sg”).val(“”);
    $(“#cidade_sg”).val(“”);
    $(“#uf_sg”).val(“”);
    }

    //Quando o campo cep perde o foco.
    $(“#cep_sg”).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_sg”).val(“…”);
    $(“#bairro_sg”).val(“…”);
    $(“#cidade_sg”).val(“…”);
    $(“#uf_sg”).val(“…”);

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

    if (!(“erro” in dados)) {
    //Atualiza os campos com os valores da consulta.
    $(“#rua_sg”).val(dados.logradouro);
    $(“#bairro_sg”).val(dados.bairro);
    $(“#cidade_sg”).val(dados.localidade);
    $(“#uf_sg”).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();
    }
    });
    });

    /* =====================================================*/

    E no contact form 7 coloquei esse codigo ao meio do formulario
    As id’s devem ser as mesmas chamadas no jquery

    /*==========================================================*/

    Qual é o CEP da residência do segurado?
    [text* cep_sg id:cep_sg class:cep_sg placeholder “Digite o CEP”]

    Rua:
    [text rua_sg id:rua_sg class:rua_sg placeholder “Nome da Rua”]
    Bairro:
    [text bairro_sg id:bairro_sg class:bairro_sg placeholder “Nome do Bairro”]
    Cidade:
    [text cidade_sg id:cidade_sg class:cidade_sg placeholder “Cidade”]
    Estado:
    [text uf_sg id:uf_sg class:uf_sg placeholder “Estado”]

    /*==========================================================*/

    Para mim funcionou bem, enviou para o email e armazenou do banco de dados.

    Deve prestar atenção a versão do jquery do tema, e também a versão do jquery pedida do plugin.

    • Excelente alternativa, Eduardo! Muito bom

    • Tássia Valim

      Essa solução funcionou melhor pra mim, mas como coloco a máscara de hífen?

      • Tássia, eu gosto de usar este plugin para máscaras nos inputs: https://br.wordpress.org/plugins/masks-form-fields/

      • eduardo

        Oi Tassia no meu caso para as mascaras usei o masked input, nunca testei o plugin sugerido, pelo Guri, mas parece ser a mesma coisa, so que m plugin.
        Mas segue o cdn caso deseja implementar manual.
        https://cdnjs.com/libraries/jquery.maskedinput

        Outra dica importante, add input tel ao invés de text, pois com testes em mobile com as mascaras em mobile formato text quando passa pelo hifen da mascara da problema, já em formato input type tel seu resultado será melhor e não afeta nada.

      • Tássia Valim

        Obrigada, pessoal! Vou testar as duas formas e aviso aqui se deram certo. Abs!

  • Thaigon Aguiar

    Opa muito obrigado. Como posso ter dois campos de cep no mesmo formulário?
    Quando eu coloco o cep ele duplica nos dois campos, precisaria q o usuario digitasse os ceps diferentes.

    • Fala @thaigonaguiar:disqus, beleza?! Neste caso basta que o segundo campo de CEP tenha uma classe e ID diferentes, para que ele não faça a busca automática. Abraços!

  • BrunoScopel

    Ei Gabriel! Funcionou perfeito, obrigado! Mas na hora de deixar os campos que são como requeridos, não estou conseguindo. nem com o aria-required=”true” no input é possíve. Segue screenshot, quando eu deixo os campos “sem preencher” pra provocar o erro. https://drive.google.com/open?id=0BwshudnsHm_vRDFFbFpJNjlnZTg

    Como eu colocaria para mostrar os erros nesses campos que não estão com o shortcode do CF7? Ou seria possível aplicar o onblur diretamente em um shortcode, não utilizando assim a tag ?

    Abraço

    • Fala @brunoscopel:disqus, tudo bem?!

      Além do aria-required=”true”, tu deves utilizar o aria-invalid=”false”, usar a class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” e deixar o input dentro de uma span class=”wpcf7-form-control-wrap cep”.

      Não consigo colar o código aqui no comentário, então salvei no meu CodePen: https://codepen.io/senhoritos/pen/YxjGgy

      Lembrando que apenas o campo CEP precisa ser um input HTML. Os demais (rua, bairro, cidade, etc) tu pode utilizar o shortcode, basta colocar os mesmos names e ID’s.

      Testa e nos informa o resultado!

      Qualquer dúvida, pode dar um grito!

      Abraço

      • BrunoScopel

        Ei Gabriel! Muito obrigado pela rápida resposta e pela atenção, claro.

        Ok, transformei todos os outros em shortcode – com isso, todos eles receberam a mensagem também de preenchimento necessário.

        Mas mesmo copiando / colando o seu código do input (só corrigindo a ordem que as tags span e label foram fechadas), ainda não funcionou no campo CEP que obviamente continua um input HTML.

        Segue outra screenshot: https://drive.google.com/open?id=0BwshudnsHm_vczBrQ0ZWN2Q3MjQ

        • @brunoscopel:disqus, pode colar o seu código inteiro no Codepen ou jsfiddle? Me manda o link que dou uma olhada pra ti.

          • BrunoScopel

            Claro! Está aí! https://codepen.io/anon/pen/MvBrQQ

            Abraço!

          • Fala @brunoscopel:disqus , desculpe na demora para responder!

            Cara, fiz mais alguns testes e realmente está com problemas. O estranho é que se tu colocar esse shortcode do CF7:

            [text* cep id:wpcf7-form-control-wrapcep class:cep]

            Em qualquer área do teu formulário, vai funcionar o “required” no que contém o onblur. (Obs: foi dessa forma que testei e funcionou)….

            Vou continuar pesquisando e testando aqui, qualquer novidade informo novamente!

            Abraços
            Gabriel

          • BrunoScopel

            Ei Gabriel, sem problema! Também estou na busca de uma solução. Abraço!

  • Car help

    Bom dia,

    Me ajude por favor, quando digito o CEP os campos só ficam “…” como se tivesse carregando e nao sai disto, o que pode ser ?

  • Eduardo Tenório Corrêa

    Fala Gabriel, seu script funciona direitinho! O problema é que o Via CEP me parece bem desatualizado, vira e mexe, recebo emails do site retornando vazio por não ter reconhecido o CEP. Teria como fazer uma adaptação para o site dos Correios?

    Um abraço e obrigado!

    • Oi Eduardo,

      Não conheço uma adaptação, mas tu me deu uma boa ideia… vou começar a pesquisar para aproveitar esse script com alguma base de dados dos correios.

      O interessante do Via CEP é que você mesmo pode atualizar algum CEP caso ele esteja desatualizado, através deste link aqui: https://viacep.com.br/cep/

  • Rodrigo Costa Amora

    como faço para tirar a validação e deixar só a do contact 7?
    Obrigado pela dica!!!

    • Oi Rodrigo, tu te refere a validação do CEP?

      • Rodrigo Costa Amora

        Isso mesmo!!!

        • Rodrigo, uma forma bem simples é removendo a seguinte linha do código:

          alert(“Formato de CEP inválido.”);

          Assim ele não gera alertas quanto a validação do CEP.

  • Uilian Kidricki

    Ok. está funcionando, mas como eu faço agora para chamar os valores digitados no corpo do email?

    por padrão se chama assim: [your-telefone1]
    mas com input, como chamo?

    • Tu vai sempre colocar o atributo “name” igual ao “id”.

      Exemplo:

      No exemplo acima, tu vai chamar ele assim: [rua]

  • Anderson Santos Silva

    O meu não funcionou colando no functions, mas inclui o script direto na pagina e deu certo

    • Obrigado pelo feedback, Anderson! Realmente em alguns temas não funciona no functions. No meu, eu passei a utilizar no footer.php 😉

  • Cassio Silva

    Senhor Gabriel, tudo bom,

    Aqui no meu tive o seguinte problema, poderia me ajudar?

    Coloquei o script no functions.php, ele abriu normal seu exemplo de from 7, mas quando clico no botão enviar, fica a seta rodando e não retorna o erro dos campos requerido, se eu tirar o script do functions.php e repetir o processo os campos requerido voltam a funcionar. Agradeço se me ajudar.

    • Cassio Silva

      Bom eu consegui resolver, como eu utilizo no meu CF7 um datepicker e um masked, tive que colocar dentro do script de um dos dois, lá funcionou normalmente, como se estivesse aproveitando os deles, analisei o código detalhamento e não encontrei falhas, mas não aceitou colocar no final do functions.php.

      Observação: Creio não ser a solução para todos, mas funcionou comigo assim!

      • Olá Cássio, tudo bem?

        Obrigado pelo Feedback!

        Fez bem em utilizar dentro do do datepicker e do masked. Uma boa prática também é colocar no final do arquivo footer.php, scripts sempre trabalham melhor quando colocamos no final de páginas e sites.

        Abraços!

      • Jose Eduardo Oliveira

        Poderia me ajudar?

        O meu fica com o mesmo problema quando clico no botão enviar, fica a seta rodando e não retorna o erro dos campos requerido.

        • @disqus_5yWDIk4Zti:disqus Testa colocando o código no final do arquivo footer.php, ao invés do functions. Pra mim também acontecia este problema e resolvi desta forma. Caso mesmo assim não funcione, tente colocar diretamente na página.

          Informa pra nós os resultados! 😉

          • Jose Eduardo Oliveira

            Tentei das duas formas mais não foi…dá o mesmo problema..

  • Leonardo Krause

    No colar o script no meu function.php já deu erro de syntax :/ o que eu posso estar fazendo de errado?

    • Olá Leonardo,

      Se voce copiou exatamente o código e colou no arquivo, não deve dar erro. Pode enviar uma foto/print do código?

  • Felipe Matias

    Funfou lindamente! Obrigado por compartilhar man! Se um dia precisar dar uma renovada no layout do site é só me chamar! 🙂

    • Que bom que funcionou Felipe! 😀

      Esse site por enquanto vai ficar assim, mas tenho outros projetos em andamento que caso eu precise, pode ter certeza que chamarei hehe

      Abraços!

      • Pode gritar mesmo! Salvou minha pele! Huahauhauhauahuahahuah

  • Carlos Eduardo Rodrigues

    Como faz para incluir a resposta dos campos nos emails de notificação?

    • Gabriel Moraes

      Oi @disqus_c2b3VKKf2N:disqus ,

      Basta colocar o ID no seu e-mail dentro do Contact Form.

      Exemplo:

      “O usuário mora no CEP [cep]” na cidade [cidade]”.

      Os ID’s utilizáveis neste caso estão aqui:

      document.getElementById(‘rua’).value=”…”;
      document.getElementById(‘bairro’).value=”…”;
      document.getElementById(‘cidade’).value=”…”;
      document.getElementById(‘uf’).value=”…”;

      • Carlos Eduardo Rodrigues

        show de bola

  • Valeu Gabriel! Funcionou certinho.