Login
Andre Publicado em 23/01/2019, atualizado em 26/10/2020
Elementor WordPress

CEP automático e máscaras para campos de formulário no Elementor

Neste tutorial você vai aprender como puxar o endereço de forma automática quando o usuário preencher o CEP no seu formulário do site – e também como adicionar máscaras nos campos de CEP, telefone, RG ou CPF, por exemplo.

Fiz o tutorial utilizando WordPress junto do plugin Elementor, mas os scripts e a idea em geral vale para qualquer tipo site que permita adicionar códigos customizados.

O vídeo abaixo mostra o conteúdo deste tutorial de forma simples e rápida.

Todo código utilizado no tutorial está disponível abaixo para facilitar a implementação.

Eu sempre tinha que relembrar o processo quando precisava implementar essa solução nos formulários dos meus clientes.

Agora, resolvi documentar para ter um lugar fácil de encontrar como faz.

Espero poder te ajudar também a aprender algo novo.

Então vamos lá!

Código jQuery completo para CEP automático e máscaras para campos de formulário

O código completo do tutorial em vídeo acima está descrito abaixo:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script> <script type="text/javascript" > jQuery(document).ready(function( $ ) { function limpa_formulario_cep() { $("#form-field-endereco").val(""); $("#form-field-cidade").val(""); $("#form-field-estado").val(""); } $("#form-field-cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#form-field-endereco").val("..."); $("#form-field-cidade").val("..."); $("#form-field-estado").val("..."); $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#form-field-endereco").val(dados.logradouro); $("#form-field-cidade").val(dados.localidade); $("#form-field-estado").val(dados.uf); } else { limpa_formulario_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulario_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulario_cep(); } }); $("#form-field-celular").mask("(99) 99999-9999"); $("#form-field-rg").mask("00.000.000-*"); $("#form-field-cpf").mask("000.000.000-**"); $("#form-field-cep").mask("00000-000"); }); </script>
Code language: HTML, XML (xml)

Como funciona o CEP automático?

Para conseguir dados como o endereço, bairro, cidade e estado a partir de um CEP é necessário utilizar um webservice para puxar as informações de um banco de dados externo.

Isso é feito com o ViaCEP. Ele é um serviço gratuito e de confiança para consultar Códigos de Endereçamento Postal (CEP) do Brasil inteiro.

No tutorial foi utilizado apenas a consulta da rua, cidade e estado. Caso você precise puxar o bairro também adicione o seguinte código adicional para atualizar o campo bairro do formulário com o valor da consulta.

$("#bairro").val(dados.bairro);
Code language: JavaScript (javascript)

Siga o mesmo padrão das outras variáveis para adicionar todos os campos necessários para o termo bairro.

Como funcionam as máscaras nos campos do formulário?

O Igor Escobar criou um plugin de jQuery para facilitar a vida dos web designers e adicionar as máscaras nos campos de formulário de forma simples e rápida.

O plugin é gratuito e conta com uma documentação completa – caso precise de máscaras customizadas ou avançadas em seu projeto. Acesse a documentação aqui.

Para que você não precise baixar o plugin e fazer o upload dele em seu servidor, o site CDNJS hospeda o plugin para você – só é necessário ativar ele com a seguinte linha de código:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
Code language: HTML, XML (xml)

Exemplos de casos avançados de máscaras

Vamos supor que você quer criar uma máscara para o campo de data disponível em seu formulário. Para evitar que o usuário coloque uma data não existente (por exemplo: 32/02/2019) você pode criar padrões customizados para diferentes variáveis.

$("#form-field-data").mask("19/29/3299", { translation: { '1': {pattern: /[0-3]/}, '2': {pattern: /[0-1]/}, '3': {pattern: /[2]/}, } });
Code language: JavaScript (javascript)

A variável 1 limita o campo em números de 0–3.
A variável 2 limita o campo em números de 0–1.
A variável 3 permite apenas o número 2.
O número 9 não tem padrão específico, então permite os números de 0–9.

Agora, vamos supor que você quer criar uma máscara para o campo de horas. O primeiro dígito poderá ser o número 0, 1 ou 2 (00:00 às 24:00).

$("#form-field-hora").mask("19:29", { translation: { '1': {pattern: /[0-2]/}, '2': {pattern: /[0-5]/}, } });
Code language: JavaScript (javascript)

Conclusão

O que você achou do CEP automático? E das máscaras para campos de formulário no Elementor?

É um detalhe fácil de implementar em todos os seus projetos e que agrega valor à experiência do usuário.

Você conseguiu fazer funcionar em seu site? Tem alguma dúvida no meio do processo? Deixe seu comentário abaixo.

Gostou desse tutorial? Dê seu feedback nos comentários para incentivar novos tutoriais como esse.

Obrigado por me acompanhar até aqui!

Abraço!

Comentários

  • Alexandre disse:

    Amigo, perfeito. Funcionou de primeira, sem erros. Se possível, me tira uma dúvida? Em um campo de texto simples, como eu faria pra aceitar apenas letras e não números? Tentei de várias de formas e não consegui fazer isso funcionar de jeito nenhum… agradeço!!!

  • Vim só agradecer, pq você resolveu meu problema! Sucesso

  • Thiago disse:

    André achei perfeito essa integração com formulário do Elementor! Só ficou uma dúvida. Existem RG com numero e com letra, como eu poderia deixar esse campo?

    $(“#form-field-rg”).mask(“00.000.000-**”);

    Imaginei que * entrarei tanto numero como letra.
    Obrigado

    • Andre disse:

      Bom dia Thiago, tudo bem? Acredito que a letra A receba tanto números quanto letras.

    • Thiago disse:

      André deu certo!
      Muito obrigado por compartilhar com nós essa informação e obrigado pela sua atenção em me responder. Abraço

  • Luan disse:

    Opa, André! Parabéns pelo conteúdo, me ajudou muito. Estou com a seguinte dificuldade: preciso validar que o campo “nome” validado apenas com letras e acentos, e que o campo “telefone” seja validado conforme máscara. No código atual, se você colocar um “espaço” o formulário é enviado. Já campo “nome” se eu colocar “*” o formulário é enviado também.

    • Andre disse:

      Bom dia Luan, tudo bem? O que você precisa então, além da máscara nos campos é um tipo de validação. Esse tutorial não aborda o tema de validação, mas você pode pesquisar por validação de campos de formulário com JavaScript para buscar uma solução.

  • Eduardo disse:

    Antes de mais nada, agradeço pelo excelente guia, e parabéns pelo seu trabalho!
    Gostaria de tirar uma dúvida se possível.
    Fiz exatamente como no tutorial mas não funciona, analisei o console do modo desenvolvedor do chrome e está retornando o seguinte erro:
    ?page_id=2821&preview=true:345 Uncaught SyntaxError: Invalid regular expression: /^{8}$/: Nothing to repeat
    at HTMLInputElement. (?page_id=2821&preview=true:345)
    at HTMLInputElement.dispatch (jquery.min.js?ver=3.5.1:2)
    at HTMLInputElement.v.handle (jquery.min.js?ver=3.5.1:2)

    O erro é referente a linha:
    var validacep = /^[0-9]{8}$/;

    Como posso resolver?

    • Andre disse:

      Olá Eduardo, tudo bem? Parece que você está testando no back-end do WordPress pelo &preview=true, não é? No front-end também está dando erro?

  • olá! esse plugin não existe mais. o wordpress não o aceita.

  • Marcelo disse:

    Bom dia!
    Como faço para utilizar telefones com 8 ou 9 dígitos?
    No seu exemplo é só para 9 dígitos.

    • Andre disse:

      Olá Marcelo, tudo bem? Cada número 9 representa uma opção de número que o usuário vai digitar. Se for no caso do telefone fixo, por exemplo, utilize $(“#form-field-celular”).mask(“(99) 9999-9999”);

  • Well Braz disse:

    Uso o wp forms ele não me dá opção de renomear os “Id” cada campo vem com um respectivo número. Como que faço pra adequar a esse código?

    • Andre disse:

      Fala Well, beleza? Nesse caso, veja se já existe um ID para o campo que você quer utilizar e altere o código do tutorial

  • Rubem Eduardo Mello Brito disse:

    Obrigado pela dica.

    Deu super certo!

  • william disse:

    Fantástico parabéns este tutorial foi uma mão na roda, mas eu não consegui colocar o bairro mesmo acrescentando a linha $(“#bairro”).val(dados.bairro);. Podia colocar um código com esta linha aí pra nós

    • Andre disse:

      Olá William, tudo bem? Copie o código do tutorial e utilize a mesma ideia das outras variáveis para o termo bairro. É importante entender como funciona para caso surja uma necessidade customizada você consiga fazer tranquilo também

  • Vinicius Silva disse:

    Muito bom o tutorial! recentemente desenvolvi um plugin para autocompletar ceps utilizando também jQuery e o ViaCEP super flexível e com menos de 1,7kb. Segue o link https://github.com/vsilva472/jquery-viacep

    • Andre disse:

      Beleza, valeu Vinicius!

    • Adenir disse:

      Não tá funcionando mais, dá falha na instalação do plugin, sabe me informar outro que tem a função de ativar o script? Gratidão.

    • Andre disse:

      Olá Adenir, tudo bem? Fiz um teste aqui em um site que utiliza o ViaCEP e está funcionando. Não é para dar falha de instalação, tem que abrir o console com o inspect do Chrome e ver o que pode está acontecendo. Tente assistir o tutorial novamente e fazer todos os passos ou procurar possíveis erros no código. Às vezes uma vírgula fora do lugar já “quebra” a funcionalidade

  • Fernando disse:

    Excelente tutorial Andre! Me ajudou muito no meu formulário, outra cara e funcionalidade!! Obrigado por compartilhar! =)

    • Andre disse:

      Fala Fernando, beleza? É um detalhe que faz toda a diferença e torna o formulário mais profissional né. Valeu!

  • Rapaz, vou testar aqui, mas já gostei.
    Caí aqui de paraquedas, procurando outa coisa.

  • Anderson disse:

    Ola como faço pra utilizar esse script no woocommerce pode explicar passo a passo?

    • Andre disse:

      Olá Anderson, tudo bem? Você precisa adicionar o script do tutorial no seu site e utilizar o jQuery para selecionar o id dos campos que serão utilizados para mostrar o CEP.

  • Bruno Bragão disse:

    É possível adicionar esse script no Woocommerce, se sim, como?

    • Andre disse:

      Olá Bruno, tudo bem? Sim, você precisa saber inserir código JavaScript no seu site ou utilizar um tema/plugin que ajude a adicionar o script com o código que mostro no vídeo tutorial.

  • Ricardo disse:

    Oi, boa noite… excelente dica… está de parabéns…

    Me diz uma coisa, quando testei aqui em dispositivo android – usando o chrome mesmo, nem a mascara e nem o busca cep funcionou. Tentei até instalar o plugin direto, porem dá erro também…

    No seu, o formulário esta funcionando em dispositivo mobile?

    • Andre disse:

      Olá Ricardo, tudo bem? Sim, acabei de testar em um site de cliente e funcionou no Google Chrome utilizando iOS. Pode ser que seja algum bug relacionado ao android? No desktop funciona normalmente a máscara do CEP e puxa os dados do endereço?

    • Ricardo disse:

      Eu consegui fazer ele buscar o cep, no mobile…. porem as mascaras não funcionou no Samsung S7 e nem no Moto G.
      Vc sabe como utilizar o código de a viacep disponibiliza em javascript para podermos utilizar no formulário do elementor….
      Acredito que seja melhor estou testando uma mascara que peguei na internet em java e esta perfeito, onde e para digitar somente letras é somente letras ou numeros…. porem esta em javascript e gostaria de colocar a perquisa de cep tambem em java…

  • Jonatas disse:

    Não estou conseguindo instalar o plugin.
    Colei o Código html e o Cep preenche somente os 5 primeiros numero e apaga.

    por favor me ajude assim que possivel

    • Andre disse:

      Olá Jonatas, tudo bem? Que estranho… então ele está funcionando, mas os números se apagam depois que o usuário muda de campo? Entre em contato comigo via e-mail (contato@blog.artneo.com.br) com a URL do seu site para que eu analisar. Valeu!

  • Deixe um comentário

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