Quando trabalhamos com desenvolvimento e nos deparamos com a tarefa de criar formulários, é sabido que mais do que HTML é necessário. O WP nos ajuda e muito na realização dessas ações, que com o tempo tornam-se cada vez mais comuns. Isso porque existem muitos plugins aos quais podemos recorrer a qualquer hora e em qualquer lugar. Entretanto, algumas especificações – como mascarar um ou mais campos, acaba não sendo tão simples assim.
Por isso, o script certo vai te mostrar hoje como adicionar máscara para formulários WordPress criados com o Advanced Custom Fields. Depois que você aprender a base, você pode aplicar o seu uso para formulários de qualquer plugin com rapidez e simplicidade.
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.
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.
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”.
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
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:
|
1
2
3
4
5
6
7
|
function 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
function 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.
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.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
