Como Implementar Validações Avançadas em Formulários com Contact Form 7 e Bootstrap 5.3

O Contact Form 7 (CF7) é um dos plugins mais populares para criar formulários no WordPress. Ele é extremamente flexível e permite que você adicione validações personalizadas usando filtros e hooks do WordPress. Neste post, vamos mostrar como integrar validações avançadas ao CF7, utilizando o Bootstrap 5.3 para estilização do formulário.

O Que Vamos Criar?

Um formulário com os seguintes campos:

• CPF: Validação personalizada para garantir que o CPF seja válido.
• E-mail: Verificação se o e-mail segue o formato correto e se o domínio é válido.
• CEP: Integração com a API ViaCEP para buscar automaticamente o endereço.

O formulário será estilizado com o Bootstrap 5.3 e incluirá mensagens de erro dinâmicas.

1. Criando o Formulário no Contact Form 7

No painel do WordPress, crie ou edite um formulário no CF7 com o seguinte código:

	<div class="mb-3">
	[text* cpf class:form-control placeholder "Digite seu CPF"]
	</div>
	<div class="mb-3">
	[email* email class:form-control id:email placeholder "Digite seu e-mail"]
	</div>
	<div class="mb-3">
	[text cep class:form-control id:cep placeholder "Digite seu CEP"]
	</div>
	<div class="mb-3">
	[text endereco class:form-control id:endereco readonly placeholder "Endereço"]
	</div>
	<div class="mb-3">
	[text cidade class:form-control id:cidade readonly placeholder "Cidade"]
	</div>
	<div class="mb-3">
	[text estado class:form-control id:estado readonly placeholder "Estado"]
	</div>
	<div class="text-center">
	[submit class:btn class:btn-primary "Enviar"]
	</div>

view raw 01-form.php hosted with ❤ by GitHub

Como funciona?

• Adicionamos classes do Bootstrap para estilização.
• O campo endereco, cidade e estado são marcados como readonly para serem preenchidos automaticamente com a API ViaCEP.
• IDs foram atribuídos para facilitar a manipulação via JavaScript.

2. Adicionando Validações Personalizadas

Validação de CPF

Adicione o seguinte código ao arquivo functions.php do seu tema:

	<?php
	// Validação personalizada para CPF
	add_filter('wpcf7_validate_text', 'validar_campo_cpf', 10, 2);
	add_filter('wpcf7_validate_text*', 'validar_campo_cpf', 10, 2);
	function validar_campo_cpf($result, $tag) {
	$tag_name = $tag['name'];
	if ($tag_name === 'cpf') {
	$cpf = isset($_POST[$tag_name]) ? sanitize_text_field($_POST[$tag_name]) : '';
	if (!validarCPF($cpf)) {
	$result->invalidate($tag, "CPF inválido. Por favor, insira um CPF válido.");
	}
	}
	return $result;
	}
	function validarCPF($cpf) {
	$cpf = preg_replace('/[^0-9]/', '', $cpf);
	if (strlen($cpf) != 11 || preg_match('/(\d)\1{10}/', $cpf)) {
	return false;
	}
	for ($t = 9; $t < 11; $t++) {
	for ($d = 0, $c = 0; $c < $t; $c++) {
	$d += $cpf[$c] * (($t + 1) - $c);
	}
	$d = ((10 * $d) % 11) % 10;
	if ($cpf[$c] != $d) {
	return false;
	}
	}
	return true;
	}

view raw 02-wpcf7-validate-text.php hosted with ❤ by GitHub

Validação de E-mail

Adicione a seguinte função para validar o e-mail:

	<?php
	add_filter('wpcf7_validate_email*', 'validar_campo_email', 10, 2);
	function validar_campo_email($result, $tag) {
	$tag_name = $tag['name'];
	if ($tag_name === 'email') {
	// Obtém o valor do campo de e-mail
	$email = isset($_POST[$tag_name]) ? sanitize_email($_POST[$tag_name]) : '';
	// Verifica se o e-mail está vazio ou inválido
	if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
	$result->invalidate($tag, "Endereço de e-mail inválido. Insira um e-mail válido.");
	return $result;
	}
	// Verifica o domínio do e-mail
	$dominio = substr(strrchr($email, "@"), 1); // Extrai o domínio
	if (!checkdnsrr($dominio, "MX")) {
	$result->invalidate($tag, "O domínio do e-mail não é válido ou não existe.");
	}
	}
	return $result;
	}

view raw 03-wpcf7-validate-email.php hosted with ❤ by GitHub

Integração com a API ViaCEP

Adicione este código para buscar os dados do CEP automaticamente:

	<?php
	add_action('wp_enqueue_scripts', 'carregar_scripts_cep');
	function carregar_scripts_cep() {
	wp_enqueue_script('viacep-js', get_template_directory_uri() . '/assets/js/viacep.js', ['jquery'], null, true);
	}

view raw 04-carregar-scripts-cep.php hosted with ❤ by GitHub

Crie o arquivo viacep.js na pasta assets/js do tema com o seguinte código:

	document.getElementById('cep').addEventListener('blur', function () {
	const cep = this.value.replace(/\D/g, '');
	if (cep) {
	fetch(`https://viacep.com.br/ws/${cep}/json/`)
	.then(response => response.json())
	.then(data => {
	if (!data.erro) {
	document.getElementById('endereco').value = data.logradouro;
	document.getElementById('cidade').value = data.localidade;
	document.getElementById('estado').value = data.uf;
	} else {
	alert('CEP não encontrado.');
	}
	})
	.catch(() => alert('Erro ao buscar o CEP.'));
	}
	});

view raw 05-viacep.js hosted with ❤ by GitHub

3. Estilizando com Bootstrap 5.3

Adicione os estilos do Bootstrap ao seu tema. Caso ainda não esteja usando o Bootstrap, inclua o seguinte no arquivo functions.php:

	<?php
	function carregar_estilos_bootstrap() {
	wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
	wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', [], null, true);
	}
	add_action('wp_enqueue_scripts', 'carregar_estilos_bootstrap');

view raw 06-carregar-estilos-bootstrap.php hosted with ❤ by GitHub

4. Testando o Formulário

1. Crie uma nova página no WordPress e insira o shortcode do CF7.
2. Preencha os campos com dados inválidos para verificar se as validações estão funcionando corretamente.
3. Teste o CEP para garantir que os campos de endereço sejam preenchidos automaticamente.

Conclusão

Com este guia, você aprendeu a integrar validações avançadas no Contact Form 7, utilizando o poder dos filtros do WordPress, JavaScript e a estilização do Bootstrap 5.3. Agora, seus formulários estão mais interativos, seguros e profissionais.

Se você gostou deste tutorial ou tem dúvidas, deixe um comentário abaixo!