Pular para o conteúdo

Curso Mago Contact Form 7

Inserir Máscaras de Data, CEP, Celular, Monetário, CPF e CNPJ no Contact Form 7

  • Aula 36
  • 24:37 minutos de vídeo

FalaÊ Incuber beleza? Seja muito bem-vindo a mais uma aula do Curso gratuito Mago Contact Form 7 do Nano Academy. Aqui é o Paulo Felipe e nessa aula eu vou te ensinar Como Inserir Máscaras de Data, CEP, Celular, Monetário, CPF e CNPJ no Contact Form 7 em seu site WordPress.

A grande vantagem de utilizar máscaras em formulários de contato é que assim você diminui e muito as possibilidades do usuário inserir dados incompletos, afinal quem nunca esqueceu um número do CPF e só percebeu depois que foi avisado pelo site que o campo estava incompleto?

Professor

Paulo Felipe

Front-end na Nano Incub.
Estudou banco de dados na FATEC de Indaiatuba/SP, é formado pela equipe Nano Incub de desenvolvimento, é neurótico por autoconhecimento, pai, skatista, slackliner e doido por ensinar.

Materiais de apoio:

Link para download da biblioteca JS Jquery-mask-plugin

https://igorescobar.github.io/jQuery-Mask-Plugin/

Link da documentação da biblioteca JS Jquery-mask-plugin

https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

Código para inserir no arquivo JavaScript (JS) que você criou ou no do seu tema:

//Inserindo máscaras nos campos do form
jQuery(document).ready(function ($) {
   $('.masc-data').mask('00/00/0000');
   $('.masc-cep').mask('00000-000');
   $('.masc-telefone').mask('(00) 0000-0000');
   $('.masc-celular').mask('(00) 0 0000-0000');
   $('.masc-cpf').mask('000.000.000-00', { reverse: true });
   $('.masc-cnpj').mask('00.000.000/0000-00', { reverse: true });
   $('.masc-dinheiro').mask('000.000.000.000.000,00', { reverse: true });
});

Modelo de campo com classe:

[text* cep class:masc-cep placeholder “Informe o seu CEP”]

 

*Todos os campos precisam ser do tipo TEXT