Máscara de Telefone no Contact Form 7

Muita 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!