*Esta página utiliza links afiliados. Por gentileza, leia a política de divulgação.

CEP automático formulário Elementor
Andre Esteves Perrone

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.

ViaCEP webservice

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.

jQuery mask plugin

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.

CDNJS – jQuery mask

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!

Receba tutoriais e dicas sobre web design, WordPress e Elementor.

Compartilhe:

Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter
Compartilhar no whatsapp
WhatsApp
Compartilhar no email
Email

7 Responses

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

    1. 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 ([email protected]) com a URL do seu site para que eu analisar. Valeu!

  2. 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?

    1. 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?

      1. 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…

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

Deixe uma resposta

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

Compartilhe:

Compartilhar no whatsapp
WhatsApp
Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter

Web designer: Descubra o melhor plugin para criar sites em WordPress. Saiba mais »

Web designer: Ultra velocidade com a solução de cache mais completa para WordPress. Saiba mais »

Web designer: Conheça o melhor banco de fotos, fontes, ilustrações, templates e objetos 3D para seus projetos em WordPress. Saiba mais »

Política de divulgação: por favor, note que os links acima são afiliados – sem nenhum custo adicional para você – eu ganho uma comissão caso decida comprar após clicar no link. Por gentileza, entenda que eu tenho experiência com todas as empresas e produtos citados e eu recomendo por serem bons e úteis, e não por causa da pequena comissão que faço caso decida comprar por um dos links. Por favor, não invista nesses produtos a não ser que possa precisar deles ou que eles possam ajudar você a atingir seus objetivos.