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

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!

Gostaria de ser avisado sempre quando houver um novo artigo?

12 respostas

  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 é 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. 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($){

Deixe um comentário

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

Receba conteúdos
exclusivos por e-mail

Tutoriais, descontos nos produtos e dicas essenciais para o seu negócio.