Como Adicionar Mascara para Formulários WordPress

Você está aqui:
  • Home
  • Como Adicionar Mascara para Formulários WordPress

No tutorial de hoje, você vai aprender a adicionar mascaras para campos específicos de um formulário criado com o plugin Advanced Custom Fields. Saber um pouco de linguagens de programação e de marcação vai ajudar muito no seu entendimento. Todavia, qualquer um sem um “pingo” de conhecimento específico e técnico é capaz de seguir os passos demonstrados e obter o resultado esperado.

Functions.php

Para realizar as implementações requeridas para a utilização de máscaras, será preciso acessar o arquivo functions.php do tema que utilizamos. Você pode acessá-lo através da sua Dashboard acessando o Editor (Aparência > Editor) e buscando pelo nome do arquivo na listagem lateral, ou por algum software para edição de código via FTP (wp-content > themes > SEU_TEMA > functions.php).

Script Masked Input

Além de termos de trabalhar com o functions.php precisaremos inserir um script ao nosso tema. Ele será o responsável por fazer as instruções informadas no functions.php funcionarem efetivamente no formulário do nosso site.

Mascara para Formularios WordPress - Download Script Minified Input

Então, para fazer o download do script Masked Input e posteriormente adicionar via FTP ao nosso tema, você deve clicar no botão abaixo e depois clicar em Minified.

Mascara para Formularios WordPress - Salvar arquivo do Script Minified Input

Uma nova janela se abrirá, clique com o botão direito sobre a página que contém o script que precisamos e escolha “Salvar como” ou “Save as”.

Mascara para Formularios WordPress - Organização e Upload do Script

Após salvar o arquivo em seu computador, busque pela pasta que contém os códigos JavaScript do seu tema – normalmente é /js/ ou wp-content > themes > SEU_TEMA > js, faça o upload do script para essa pasta. Caso você utilize um child-theme, possivelmente ele não terá a pasta /js/. Então, basta você mesmo criá-la a adicionar o arquivo do script lá. Na imagem acima eu tive de fazer isso, olha como ficou.

Código

Mascara para Formularios WordPress - Campos com Mascara

Agora que já temos script devidamente adicionado aos arquivos do tema que nosso site utiliza, precisamos informar no functions.php o caminho para tal arquivo, os campos do formulário onde a máscara deve funcionar e qual o tipo de máscara.

Dentro do no arquivo de funções (functions.php) você deve inserir as seguintes linhas de código – elas informam o caminho exato para acessar o script:

1234567function mascara_cadastro_cliente(){ if( is_page(‘cadastro-cliente’) )     wp_enqueue_script(‘masked-input’, ‘http://SEU_SITE/wp-content/themes/SEU_TEMA’.’/js/jquery.maskedinput.min.js’, array(‘jquery’)); }add_action(‘wp_enqueue_scripts’, ‘mascara_cadastro_cliente’);

A primeira instrução é a verificação da página onde aquele script deve ser chamado, no nosso exemplo será a Cadastro Cliente com slug: cadastro-cliente. Depois que a página é encontrada, informamos o caminho de acesso ao script.

Atente para o nome do arquivo do script. Pois, dependendo das atualizações que o desenvolvedor do mesmo faça, o título do arquivo pode ser diferente do que irei mostrar abaixo. Logo, basta atualizar o nome e pronto!

O próximo passo agora será criar a função que vai informar a página onde o formulário está, os campos que a receberão e como a máscara será utilizada.

Utilizando o plugin Advanced Custom Fields na página Cadastro Cliente (cadastro-cliente), os nomes dos campos seguem um padrão – sempre começam com acf-field e são seguidos do nome que você informou no momento de criação do mesmo.

Então, se eu criei um campo para receber data de nascimento e nomeei como data_nascimento, nós iremos informar à função que implementa a máscara o id do campo como: #acf-field-data_nascimento. Você tem campo para CPF? Então, ficaria assim: #acf-field-cpf. Aqui eu estou utilizando o id de cada campo input para a localização dentro da função.

A nossa função, para a página Cadastro Cliente – com mascara pra campos de CPF, Data de Nascimento e Telefone ficaria assim:

12345678910111213141516171819function activate_masked_input(){   if( is_page(‘cadastro-cliente’) ){?>          <script type="text/javascript">                 jQuery( function($){                                          $("#acf-field-data_nascimento").mask("99/99/9999");                     $("#acf-field-cpf").mask("999.999.999-99");                     $("#acf-field-telefone").mask("(99) 9999-9999");                });          </script> <?php    }}add_action(‘wp_footer’, ‘activate_masked_input’);

Para outros plugins ou formas de criar formulários, você pode utilizar tanto o id do campo como a sua classe (class).

Perceba que para cada campo a configuração da máscara muda. Pois, a data de nascimento tem uma estrutura e o CPF tem outra. Então, a depender do que você queira mascarar é só informar a estrutura necessária seguindo o padrão demonstrado – imprescindível para número de telefone de estados com São Paulo, Rio de Janeiro, Brasília, dentre outros.

Mascara para Formularios WordPress - Funcionamento da Mascara

Salve o arquivo functions.php com as implementações que acabamos de realizar e teste em seu site. No caso de erros, verifique o ID ou a class que você utilizou como marcação de localização e também o endereço onde o script está alojado.

Was this article helpful?
Dislike 0