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.

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