Artigo atualizado em 20/02/2019
A pedido dos usuários constantes em nosso blog, resolvemos criar um vídeo explicando o passo a passo de como realizar a instalação das mascaras no contact form 7. Abaixo do vídeo encontrará o botão para fazer o download e as instruções em texto.
A um tempo atrás vínhamos falando sobre o Masked input e que funcionava para todos os casos desde então, porém percebi que a maioria dos artigos estavam desatualizados e utilizavam o mesmo método para o Contact Form 7.
Com os erros e abandono do Masked Input, trouxemos uma solução definitiva com o script do Igor Escobar (jQuery Mask Input).
Antes de disponibilizar o tutorial realizei um teste e funcionou muito bem.
Neste tutorial ensino exatamente como você deve aplicar da maneira correta as máscaras no contact form através do seu formulário WordPress. Ele não foi criado para o Contact Form, mas adaptamos as necessidades dele.
1 – Preparando os arquivos.
2 – Enviando o arquivo para o servidor
Ao baixar os arquivos, faça o upload da pasta /js para a pasta do seu tema do WordPress, provavelmente não terá essa pasta em seu diretório, basta criá-la.
3 – Incluindo os scripts em sua página
Após subir o arquivo para o seu tema WordPress, aplique este script antes da tag </body> do seu arquivo footer.php ou caso a requisição de scripts seja diferente em seu tema, basta aplicar este código.
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="<?php bloginfo('template_url');?>/example.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url');?>/jquery.mask.min.js"></script>
Neste exemplo as mascaras já estão funcionando corretamente, agora falta criar um teste em seu formulário do Contact Form 7.
Primeiro você precisa entender como funciona o script antes mesmo de ir adicionando suas classes e IDs.
Com isso você pode visualizar as classes referentes a cada mascara e colocar em seu formulário de contato.
Sobre o telefone com 9 números, utilizamos a classe e ID: “sp_celphones”
4 – Aplicando a máscara no formulário
Ao decidir quais itens serão aplicados, basta ir em seu formulário Contact Form 7 e colocar a ID como foi escrito nas opções do script. Se no script o telefone está definido como “.sp_celphones“, basta adicionar a classe e ID no campo telefone. Confira o exemplo abaixo:
Confira o resultado:
Gostou do artigo? Comente e envie seu feedback!
12 respostas
Estou tentando aplicar essa solução no meu site, porém onde fica a pasta scripts? Ao abrir a pasta do meu tema, tenho várias pastas, mas nenhuma chamada scripts, o lugar mais próximo disso em que encontrei arquivos .js foi na pasta assets, seria nessa pasta?
Olá Gabriel, a pasta script deixei no artigo para baixar. Coloquei um botão para facilitar o download, pois o link estava muito claro então passou por despercebido.
Nos envie um feedback assim que conseguir, sucesso sempre!
Bom dia! Gostaria se possível, tirar uma dúvida. Que é em relação á: <script src="<?php bloginfo ('template_url');?
A onde esta ( template_url). É para eu colocar o domínio do site
Olá Adilson, o artigo foi atualizado. A chamada do é para puxar a url completa do tema do seu site, exemplo: “seusite.com.br/wp-content/themes/nomedotema”/scripts/mascara.js. Assim fica mais fácil e evita de você digitar todo o caminho até o seu tema.
Ele verifica se o número tem menos de 9 dígitos?
Olá Janilso, o artigo foi atualizado. Ele permite que o usuário digite 9 números, porém ele pode digitar 8 que vai funcionar da mesma maneira.
Tudo bom, valeu deu certo aqui, porém tive que fazer um ajuste no arquivo mascara.js devido a conflito entre as bibliotecas dos temas
Troquei:
$(function() {
Para:
jQuery(document).ready(function($){
O link para baixar o arquivo não está funcionando
Olá Angelo, arrumei o link, pode testar novamente que vai funcionar 😉
Tem como incluir essa máscara nos campos de finalização de compra do Woocommerce?
Valeu a dica simples e direto.
Excelente, funcionou! Muito obrigado! 🙂