Login
Andre Publicado em 23/01/2019, atualizado em 09/03/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>

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);

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>

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]/},
}
});

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]/},
}
});

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

  • 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@teste.test) com a URL do seu site para que eu analisar. Valeu!

  • Deixe uma resposta

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