Para quem necessita de informações verdadeiras, como endereço de e-mails válidos – para o desenvolvimento e sobrevivência do seu negócio online, trabalhar com um sistema de validação de dados não é uma opção, mas sim uma obrigação.

Se você já conhece o plugin Contact Form 7 e cria formulários com ele, hoje você vai descobrir uma ferramenta maravilhosa para tornar o uso desse plugin ainda mais avançado. No tutorial de hoje o CanalWP vai mostrar a você como é possível adicionar validação para formulário Contact Form 7 sem manipular qualquer linha de código. Se liga!

Também pode dar uma olhada na nossa lista de Plugins para Aprimorar o Contact Form 7 no WordPress.

Validação Para Formulário Contact Form 7

Para que você consiga realizar todos passos que mostrarei a seguir, inclusive para entender o por quê de a validação para formulários Contact Form 7 é tão interessante, é primordial que você tenha o plugin instalado em seu sistema WordPress. Logo, recomendo que você confira agora mesmo o post sobre Como Criar um Formulário de Contato no WordPress.

Afinal, O Que É Validação?

Você acessa um site e precisa preencher um formulário, daí alguns campos são de preenchimento obrigatório e ainda precisam seguir um padrão mínimo, como e-mail e telefone. Então, você insere todos os dados e ao clicar no botão de “enviar” ou “próximo” é informado que algum dado digitado não é válido? Pois bem, a validação de campos foi realizada e verificou-se que algum ou vários dos campos preenchidos continham informações que não estavam dentro do padrão permitido e esperado. O nome desse processo é Validação.

A validação de dados para formulários de cadastro, pesquisa e de contato é algo muito comum e extremamente necessário para evitar o recebimento de informações erradas e que não são válidas.

Jquery Validation For Contact Form 7

Para quem deseja adicionar validação rápida aos formulários de contato WordPress criados com o Contact Form 7 o plugin Jquery Validation For Contact Form 7 é uma boa dica.

Trabalhando com jQuery, o Jquery Validation For Contact Form 7 adiciona validações aos campos do formulário de forma rápida, limpa e sem complicação. Ele possui 2 versões: Free e PRO, onde a gratuita – aquela que irei demonstrar o uso aqui, aceita configuração de validação para campos que devem receber URL, apenas Letras ou Números e até para números de cartão de crédito.

Baixar Demo | Hospedagem

Criando e Configurando Validações

Com o Contact Form 7 e o plugin Jquery Validation For Contact Form 7, instalados e ativados em seu WordPress, podemos começar com as configurações de validação para os campos de seu formulário de contato.

No instante em que o Jquery Validation For Contact Form 7 for ativado, você será redirecionado para uma página muito básica de configurações do plugin.

Onde você deve simplesmente clicar no botão Salvar alterações para garantir que mensagens de Erro – quando um campo for verificado como inválido, sejam exibidas ao lado do mesmo.

Após gravar as definições básicas do plugin, vamos iniciar as configurações de validação para os campos do nosso formulário de contato.

Validação de Campos

Ainda na Dashboard do seu WordPress, busque pelo menu correspondente ao plugin Contact Form 7 – onde você geralmente acessa para criar os formulários de contato do seu site. Acesse Contato > Formulários de contato.

Na página de Formulários de contato você poderá criar um novo formulário ou editar um já existente. Geralmente o Contact Form 7 traz um formulário padrão e básico já criado.

Neste tutorial, o primeiro campo que nós vamos adicionar com a configuração de validação de dados é o campo de texto que receberá o nome do visitante. Então, precisamos que a validação seja feita de forma que apenas letras sejam aceitas.

Clique para adicionar um campo de texto e um pop-up será exibido.

Marque então aquele campo de texto como Campo obrigatório e na opção Classe do atributo, adicione a classe: lettersonly. Essa classe é reservada ao plugin Jquery Validation For Contact Form 7 indicando que a validação para receber “apenas letras” seja realizada.

Depois, clique no botão Inserir tag.

Agora vamos adicionar um campo de e-mail com validação. Para isso, escolha o campo do tipo e-mail e no pop-up para configurar o campo, marque apenas como Campo obrigatório e depois no botão para inserir o campo ao formulário (Inserir tag).

Para campos do tipo “e-mail” não é necessário adicionar uma classe para validação, porque o plugin Jquery Validation For Contact Form 7 entende que se o campo é do tipo e-mail, a validação para endereços de e-mail deverá ser realizada ali.

O próximo e último campo que iremos adicionar ao formulário é o de endereço do site ou URL.

Escolha o tipo de campo URL. E atribua a ele a classe: url.

O Jquery Validation For Contact Form 7 trabalha com classes reservadas, que quando adicionadas aos fields (campos) do formulário, a validação do mesmo é feita baseando-se na classe existente ali.

Para a versão Free do plugin, as classes disponíveis  são:

• Validação de Url: Quando precisa validar URLs.
  • Use a classe url. Exemplo de validação: http://www.example.com
• Validação de Números: Quando se quer validar um campo que deve receber apenas números.
  • Use a classe number. Exemplo de validação : 7645.46
• Validação para Dígitos: Quando se quer validar um campo que recebe apenas dígitos. Não são aceitos números decimais.
  • Use a classe digits. Exemplo de validação : 7645
• Validação para Cartão de Crédito: Quando precisa validar número de cartão de crédito.
  • Use a classe creditcard. Exemplo de validação: 5520010511051954
• IBAN (International Bank Acccount number): Quando precisa validar conta de banco internacional.
  • Use a classe iban. Exemplo de validação: AL47212110090000000235698741
• Apenas letras: Quando precisa validar caracteres existentes no alfabeto.
  • Use a classe lettersonly. Exemplo de validação: abcdefghijkl

Para ver todas as classes disponíveis, tanto para a versão gratuita, quanto para a PRO (paga) você pode acessar a página com métodos de validação do plugin.

Após a definição dos campos do formulário e suas validações, você deve seguir com a configuração padrão do Contact Form 7 para as demais abas. Veja como configurar o envio do formulário.

Testando a Validação

Após copiar a shortcode do formulário que acabamos de configurar e adicionar à uma das páginas do seu site, precisamos testar se as validações estão funcionando corretamente.

Olha só como fiz os meus testes:

Você vai perceber que as mensagens de validação que são exibidas, quando os dados digitados estiverem diferentes daqueles que devem ser aceitos, estarão em inglês. Não se preocupe, você pode utilizar uma ferramenta incrível para fazer a tradução dessas mensagens e de qualquer Tema ou Plugin que você possua em seu WordPress.

Para isso, basta conferir o post Como Traduzir Temas e Plugins WordPress Direto da Dashboard onde ensino passo a passo tudo o que você precisa e deve saber.

Conclusão

Trabalhar com validação de dados para formulários de contato, cadastro e de orçamento é algo excelente para economizar tempo – verificando informações verdadeiras das falsas -, pois reduz a possibilidade de erro por parte dos visitantes do site.

O plugin Jquery Validation For Contact Form 7 mostra-se como uma ferramenta muito interessante para tornar o uso do Contact Form 7 melhor e ainda mais avançado. Por isso, vale a pena sem sombra de dúvidas, testar e avaliar o plugin na prática!

Também mostramos como você pode Criar Redirecionamento Utilizando o Contact Form 7.

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.