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

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

Ao criar máscaras através do plugin masked input, ele tinha um problema no qual o usuário não poderia deixar nenhum número de fora, era obrigatório preencher todos os campos para que funcionasse corretamente. Por exemplo, o telefone pode ter de 8 a 9 números tirando o DDD, porém se o campo tivesse 9 dígitos e o campo for preenchido com 8, a informação desaparecia.

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 os arquivos para o servidor

Ao baixar os arquivos, faça o upload da pasta scripts para a pasta do seu tema do WordPress.

3 – Incluindo os scripts em sua página

Após subir todos os arquivos para o seu tema WordPress, aplique este script antes da tag <head> do seu arquivo header.php ou caso a requisição de scripts seja diferente em seu tema, basta aplicar neste arquivo.

<script src="<?php bloginfo ('template_url');?>/script/src/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#telefone").mask("(99) 99999-9999", { autoclear: false });
});
</script>

Neste exemplo temos apenas a máscara do telefone, mas é possível adicionar para outras ocasiões como CPF, RG, CNPJ ou CEP.

Utilizando os exemplos acima, ficaria assim:

<script src="<?php bloginfo ('template_url');?>/script/src/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#telefone").mask("(99) 99999-9999", { autoclear: false });
$("#cnpj").mask("99.999.999/9999-99", { autoclear: false });
$("#cpf").mask("999.999.999-99", { autoclear: false });
$("#rg").mask("99.999.999-9", { autoclear: false });
});
</script>

Nas opções acima colocamos apenas o número 9 e o formato no qual ele deve ser exibido no formulário.

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 “#telefone“, basta adicionar a ID no campo telefone. Confira o exemplo abaixo:

Confira o resultado:

Gostou do artigo? Comente e envie seu feedback!

Este post tem 2 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!

Deixe uma resposta

Fechar Menu