05 set

Aplicando máscaras nos campos de formulário do Contact Form 7

Categoria: - Comentários (41)

Olá pessoal!

Nos grupos de discussão que participo, vejo que muita gente pergunta sobre como aplicar máscaras nos campos dos formulários criados com o Contact Form 7 — campos de data, telefone, cpf, etc.

Sei que existem diversos tutoriais espalhados pela internet, mas agora eu vou ensinar um jeito mais simples de se criar esse efeito.

Primeiramente, o que devemos fazer, é baixar o script Masked Input aqui: http://digitalbush.com/projects/masked-input-plugin/ – Baixe a opção “Minified”.

Masked Input Plugin

Masked Input Plugin – Download (clique na imagem para ampliar)

Após baixar a versão mais recente, no link acima, vamos criar a estrutura de pastas dentro da pasta do nosso tema. Observe a imagem abaixo:

Estrutura de Pastas do meu tema

Estrutura de Pastas do meu tema (clique na imagem para ampliar)

Salve o script do Masked Input Plugin, dentro da pasta /js/ do seu tema.

Agora vamos abrir o arquivo functions.php do tema ativo e colocar o código abaixo:

O arquivo baixado tem o nome jquery.maskedinput.min.js, então, sempre preste atenção nesse detalhe para que tudo dê certo, pois se o autor do script modificar o nome do arquivo e você continuar mantendo como no meu exemplo, o script não funcionará!

Se quiser que o script seja carregado somente na página que contém o formulário — o que é uma excelente prática — você pode fazer a seguinte verificação:

Note que eu usei a função is_page() para verificar em qual página estamos.

Agora vamos ativar o Masked Input:

Agora vamos criar o nosso formulário no Contact Form 7 contendo um campo para data de nascimento. Observe a imagem abaixo:

Contact Form 7 - Campo Data

Contact Form 7 – Criando um campo data (clique na imagem para ampliar)

Você pode usar o gerador de tags que fica ao lado do formulário ou inserir o código abaixo diretamente no formulário. Eu prefiro usar o gerador, que é bem mais prático e não nos deixa errar.

Note na imagem que eu usei a opção “class” para adicionar uma classe a mais no nosso campo data. Use a classe “data” porque é esta que estamos usando no nosso script ativador do Masked Input. Se estivéssemos criando um campo para CPF, usaríamos a classe “cpf”, se fosse um campo de telefone, usaríamos a classe “tel” e assim por diante.

É só isso pessoal. Teste o seu formulário e terá um resultado igual ao mostrado na imagem abaixo:

Contact Form 7 / Masked Input - Campo data

Contact Form 7 / Masked Input – Campo data (clique na imagem para ampliar)

Comentários ( 41 )

  • Marco

    Oi Miriam,

    Desconsidere o comentário anterior. Deu certo!! Muito obrigado!

    Abraços

Envie seu comentário

Resize-me!