[dropcap]M[/dropcap]uita gente procura em fóruns e grupos de discussão como formatar campos de formulários em sites desenvolvidos na plataforma WordPress utilizando o famoso plugin Contact Form 7. Existem bastantes tutoriais explicando como fazer isso, mas agora vou ensinar como fazer essa implementação de uma forma fácil e além disso, vou dar algumas dicas que utilizam boas práticas para não afetar a performance do seu site.
A primeira coisa que precisamos fazer é baixar a biblioteca jQuery Masked Input, procure baixar a versão “Minified” para melhorar o tempo de carregamento da biblioteca. Clicando aqui você consegue acessar a versão que utilizamos em nossos projetos.
Após baixar a biblioteca Masked Input no link acima, precisamos criar a estrutura de pastas dentro do nosso tema WordPress, isso vai variar de tema para tema, mas normalmente essa pasta tem o nome de js e fica logo abaixo do tema, exemplo: wp-content/themes/seu_tema/js, mas no meu caso, a pasta fica em wp-content/themes/Avada-Child-Theme/assets/min/js/general, conforme a imagem abaixo:
Repare que estou fazendo essa implementação no meu Tema Filho, isso vai me evitar problemas caso o cliente atualize a template do site. Dessa forma, o template do site poderá ser atualizada que não perderei essa implementação no site.
Agora que salvamos o arquivo Masked Input Plugin dentro da pasta correta em seu tema, vamos abrir o arquivo functions.php do seu tema ativo e colocar o código abaixo:
add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');
function wpmidia_enqueue_masked_input(){
wp_enqueue_script('masked-input', get_template_directory_uri().'/assets/min/js/general/jquery.maskedinput.min.js', array('jquery'));
}
Cuidado para não errar o nome e o local do arquivo, senão, nossa implementação no códio não funcionará.
Dica de Boas Práticas: Se você quiser que o script seja carregado somente que tenha o formulário (que é uma excelente prática), coloque a seguinte instrução em seu código
add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');
function wpmidia_enqueue_masked_input(){
if( is_page('contato') ) // para carregar somente na pagina Contato.
wp_enqueue_script('masked-input', get_template_directory_uri().'/assets/min/js/general/jquery.maskedinput.min.js', array('jquery'));
}
Observe que no código acima eu usei a função is_page() para verificar a página que estamos. Dessa forma, o script só será carregado na página determinada.
Agora chegou a hora de ativarmos a Masked Input:
function wpmidia_activate_masked_input(){
?>
<script type="text/javascript">
jQuery(function($) {
$.mask.definitions['~']='[+-]';
// Inicio da Máscara de Telefone
$('input[type=tel]').focusout(function(){
var phone, element;
element = $(this);
element.unmask();
phone = element.val().replace(/\D/g, '');
if(phone.length > 10) {
element.mask("(99) 99999-999?9");
} else {
element.mask("(99) 9999-9999?9");
}
}).trigger('focusout');
// Fim da Máscara Telefone
$("#cpf").mask("999.999.999-99");
$("#cnpj").mask("99.999.999/9999-99");
});
</script>
<?php
}
Essa máscara está personalizada para telefones com 8 e 9 dígitos e será aplicada no input de tipo tel “input[type=tel]”
Importante: Essa máscara pode ser aplicada por TYPE, CLASS e ID. Você poderá usar qualquer uma dessas opções para formatar os campos dos formulários. Os campos com as IDs #cpf e #cnpj também serão formatados com esse script.
Agora vamos no Contact Form 7 e criar um formulário com um campo do tipo tel e outro campo com o ID cpf
Observe que utilizei o tipo do campo como tel no meu formulário, pois meu script para a máscara de telefone está selecionando qualquer campo que seja desse tipo type=”tel”:
<label> Telefone (obrigatório)
[tel* telefone] </label>
E para campos com as IDs #cpf e #cnpj também serão carregados as máscaras, no meu caso, meu formulário tem um campo de CPF que está utilizando a ID #cpf, esse campo também terá uma máscara aplicada:
<label> CPF (obrigatório)
[text* cpf id:cpf] </label>
O resultado para a máscara de telefone ficou assim:
Com essas simples implementações você consegue melhorar a usabilidade dos formulários de seus sites desenvolvidos na plataforma WordPress, isso vai deixar os formulários de seu site mais atrativos para seus usuários.
Dicas de Boas Práticas e Performance
Agora separei alguns refinamentos que você pode fazer nessa implementação em seu site para ele ficar com uma excelente performance.
O primeiro refinamento é quanto a biblioteca de JavaScript (jQuery Masked Input) que precisamos incorporar no WordPress para padronizar os campos nos formulários. Você pode incorporar o conteúdo minificado da biblioteca em um arquivo de JavaScript existente em seu tema.
Nos sites de meus clientes eu adiciono essa biblioteca no próprio arquivo .js do Contact Form 7 que normalmente fica na pasta: wp-content/plugins/contact-form-7/includes/js/scripts.js, fazendo isso, nós conseguimos diminuir o número de requisições do site porque a biblioteca será carregada juntamente com o arquivo script.js do próprio Contact Form 7.
Mas essa alteração precisa ser testada antes porque pode gerar algum conflito e caso dê algum problema, você pode incorporar o código em qualquer outro arquivo .js do site que seja carregado em seu tema, faça alguns testes e funcionando, deixe como definitivo.
Uma outra boa prática é fazer essa implementação no Tema Filho do seu site, isso é uma outra boa prática para evitar dores de cabeça, pois seu cliente pode atualizar a template do site e com isso perderá a formatação dos campos nos formulários.
Acho que com essa dica o site de seus clientes passarão a ter uma formatação mais amigável, melhorando em muito a usabilidade do site.
Se você gostou da publicação, curta e compartilhe!