Blog

Como Validar Formulários do Elementor (PRO) ➜ Aula Completa (2022)

Elementor-PRO-Como-validar-campos-de-formulários
eCommerce

Como Validar Formulários do Elementor (PRO) ➜ Aula Completa (2022)

Nesse conteúdo quero mostrar a você como validar formulários criados com o Elementor PRO através do backend usando Ajax (hooks/API).

Torne-se Especialista em Elementor
Faça o Curso Mais Completo e Acessível do Brasil!
MATRICULE-SE AGORA

Veja o vídeo:

O Elementor Pro é uma excelente opção se você deseja ter uma suíte quase completa para criar sites, contendo funcionalidades úteis e produtivas.

Obtenha o Elementor PRO – vale muito a pena.

Como você deve saber, o Elementor trabalha com widgets, e um dos mais importantes é o de formulários ou também chamado de Elementor Forms.

Como um WordPress Form Builder (construtor de formulários), o Elementor Forms nos permite criar formulários bastante funcionais para diferentes necessidades, rapidamente.

Além disso, tem as “Ações após enviar” (ações após pressionar o botão enviar) que são bastante úteis, e o melhor de tudo, que podem ser combinadas.

Desse modo, por exemplo, você poderia ter essa combinação:

  1. Adicionar uma pessoa a uma mailing list
  2. Enviar uma mensagem para o administrador e outra para quem enviou o formulário
  3. Enviar um webhook para o Zapier ou outro serviço similar
  4. Ao final, redirecionar o usuário para uma página de agradecimento.

Portanto, Formulários do Elementor são excelentes e não perdem muito para o plugins específicos e mais robustos de formulários, como Gravity Forms.

No entanto, há um problema se você quiser ter um formulário mais sério, porque não há validações realmente úteis, nativamente, no Elementor.

Como assim? O Elementor possui apenas validação básica de frontend usando correspondências e obrigatoriedade nos campos. 

Contudo, alguém usando o Inspetor (Element Inspector) de qualquer navegador pode modificar o código e enviar qualquer informação sem ser validada de acordo.

Por exemplo, você pode abrir o Inspetor de Elementor e trocar o tipo de campo do e-mail para tentar enviar sem validar esse e-mail.

Agora, algumas pessoas optam por usar bibliotecas Javascript ou jQuery puras para validar os formulários, e isso parece até uma coisa interessante.

Entretanto, isso traz outro problema que é adicionar um peso adicional ao que já possui o Elementor e suas bibliotecas, comprometendo a performance.

Além disso, se o usuário sabe desativar o Javascript, todas essas validações vão pelo ralo.

Como validar campos de formulários?

Elementor PRO ➜ Como validar campos de formulários

Sim, há uma solução para fazer as validações – por backend. 

Desta forma, mesmo que o usuário utilize o inspetor ou desabilite o javascript, os dados ainda serão validados.

A boa notícia, é que o Elementor Forms possui Hooks que permitem validação de backend (server-side) que podem retornar mensagens de erro em tempo real via Ajax.

Veja a documentação em Elementor Forms API.

Para fazer isso, você deve criar um plugin ou editar o arquivo functions.php do seu tema (recomendo trabalhar com um tema filho) para adicionar essas validações.

Aqui está um exemplo para uma validação global:

// Validate the Ticket ID field is in XXX-XXXX format.
add_action( 'elementor_pro/forms/validation', function ( $record, $ajax_handler ) {
    $fields = $record->get_field( [
        'id' => 'ticket_id',
    ] );

    if ( empty( $fields ) ) {
        return;
    }

    $field = current( $fields );

    if ( 1 !== preg_match( '/^\w{3}-\w{4}$/', $field['value'] ) ) {
        $ajax_handler->add_error( $field['id'], 'Invalid Ticket ID, it must be in the format XXX-XXXX' );
    }
}, 10, 2 );

Usando o Hook elementor_pro/forms/validation você pode fazer a validação em todas as submissões de formulários do Elementor.

Os argumentos que vemos acima para a função são os seguintes:

ArgumentoModeloDescrição
recordForm_RecordO registro enviado.
ajax_handlerAjax_HandlerO componente Manipulador Ajax.

Você também pode fazer validações por tipo de campo, usando o Hook elementor_pro/forms/validation/{$field_type}.

Isso vai permitir validar tipos de campo individuais, como por exemplo os campos de telefone, email, etc.

Aqui está um exemplo:

// Validate the Tel field is in XXX-XXX-XXXX format.
add_action( 'elementor_pro/forms/validation/tel', function( $field, $record, $ajax_handler ) {

    // Match this format XXX-XXX-XXXX, 123-456-7890

    if ( preg_match( '/[0-9]{3}-[0-9]{3}-[0-9]{4}/', $field['value'] ) !== 1 ) {
        $ajax_handler->add_error( $field['id'], 'Please make sure the phone number is in XXX-XXX-XXXX format, eg: 123-456-7890' );
    }
}, 10, 3 );

Os argumentos que vemos acima são os seguintes:

ArgumentoModeloDescrição
fieldArrayO campo enviado.
recordForm_RecordO registro enviado.
ajax_handlerAjax_HandlerO componente Manipulador Ajax.

Esses são recursos bem úteis que vão facilitar bastante a validação de formulários do Elementor do lado do servidor (backend).

Validação de E-mails

Agora, por exemplo, a validação de e-mails no Elementor, quando você usa o tipo de campo e-mail, verifica se há um arroba (@) e um ponto (.), o que não é tão preciso.

Assim, poderíamos criar uma função de validação da seguinte forma:

add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
    if ( !filter_var(  $field['value'], FILTER_VALIDATE_EMAIL ) ) {
        $ajax_handler->add_error( $field['id'], 'Insira um e-mail válido.' );
    }
}, 10, 3 );

Então, você pode ter mais precisão usando a função filter_var() do PHP ou mesmo a função is_email() do WordPress para ser mais eficaz.

Validação por ID de campo

Cada campo no Elementor Forms tem um ID que podemos personalizar – isso é um recurso muito útil e uma prática recomendada. 

Graças a isso, podemos fazer uma validação geral em todos os formulários do nosso site onde os campos tenham o mesmo ID, o que vai facilitar bastante.

Então, vamos criar uma função extra que nos permita obter um campo pelo ID inserido, da seguinte forma:

function elementor_get_field($id, $record){
	
	$fields = $record->get_field([
		'id' => $id
	]);
	
	if(empty($fields)){
		return false;
	}
	
	return current($fields);
	
}

E aqui está a função de exemplo que usei no vídeo que mostrar como usar a função acima e executar validações em diversos campos:

function valida_campos( $record, $ajax_handler ) {
	
	if($field = elementor_get_field('aceita_termos', $record)){
		
		if($field['value']!= 'on'){			
			$ajax_handler->add_error( $field['id'], 'Você precisa aceitar os termos!' );			
		}
		
	} 
	
	if($field = elementor_get_field('idade', $record)){		
			
			
			if(empty( trim($field['value']))){
				
				$ajax_handler->add_error( $field['id'], 'Insira sua idade' );
				
			}else if(!filter_var(trim($field['value']), FILTER_VALIDATE_INT )){
				
				$ajax_handler->add_error( $field['id'], 'Somente números...' );
				
			}					
		
		
		//
	} 
	
	if($field = elementor_get_field('nome', $record)){
		
		if(empty( trim($field['value']))){

			$ajax_handler->add_error( $field['id'], 'Insira seu nome' );

		}else if(3 >= strlen(trim($field['value']) )){

			$ajax_handler->add_error( $field['id'], 'Pelo menos 3 caracteres...' );

		}
		
	} 	
		
}

O último passo é acionar essa função no Hook de validação de formulários do Elementor usando add_action:

add_action('elementor_pro/forms/validation','valida_campos', 10, 2);

É isso! Acho que com esse base você será capaz de realizar qualquer tipo de validação em formulários do Elementor.

Se você precisar, pode pesquisar no Google sobre funções para validação de campos específicos como CPF, telefones brasileiros, etc.

Eu criei um arquivo com diversas validações no GitHub Gist (veja aqui).

Você gostou desse conteúdo? Deixe um comentário abaixo:

Deixe seu comentário aqui...

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Nosso site usa cookies e, portanto, coleta informações sobre sua visita para melhorar nosso site (por meio de análise), mostrar a você conteúdo de mídia social e anúncios relevantes. Por favor, consulte nossa página Termos & Políticas para mais detalhes ou concorde clicando no botão 'Aceitar'. OBS: Ao continuar a navegação, você, automaticamente, concorda.

Configurações de Cookies

Abaixo, você pode escolher os tipos de cookies que quer permitir neste site. Clique no botão "Salvar Configurações de Cookies" para aplicar sua escolha.

FuncionalNosso site usa cookies funcionais. Esses cookies são necessários para permitir que nosso site funcione.

AnalíticoNosso site usa cookies analíticos para permitir a análise de nosso site e a otimização para o propósito de a.o. a usabilidade.

Mídia SocialNosso site coloca cookies de mídia social para mostrar conteúdo de terceiros, como YouTube e Facebook. Esses cookies podem rastrear seus dados pessoais.

PublicidadeNosso site coloca cookies de publicidade para mostrar anúncios de terceiros com base em seus interesses. Esses cookies podem rastrear seus dados pessoais.

OutrosNosso site coloca cookies de terceiros de outros serviços que não são analíticos, mídia social ou publicidade.