Aplicando máscaras nos formulários do Contact Form 7

Aplicando máscaras no formulário do Contact Form 7

Artigo atualizado em 20/02/2019

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 /scripts 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 src="<?php bloginfo ('template_url');?>/scripts/mascara.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.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.

O arquivo que você fez download, abrindo o mesmo em um editor de texto verá que possui um código exatamente como este: https://igorescobar.github.io/jQuery-Mask-Plugin/js/examples.js

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!

Gostaria de ser avisado sempre quando houver um novo artigo?

Este post tem 6 comentários

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

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

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

    1. Olá Adilson, o artigo foi atualizado. A chamada do < ?php bloginfo('template_url');?> é 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.

  3. Ele verifica se o número tem menos de 9 dígitos?

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

Deixe uma resposta

Fechar Menu