Enviar dados de formulário do Elementor Pro para função PhP e responder
A tempos venho trabalhando com Elementor Pro e tem ajudado muito nas entregas que temos feito aqui na agência em termos de agilidade no desenvolvimento. Nos últimos anos entregamos alguns sistemas de gestão e utilizamos Elementor Pro para construir as interfaces gráficas desses sistemas e o ponto alto desse processo se deu essa semana, quando conseguimos pela primeira vez receber os dados de um formulário em uma função PhP e retornar para o Java Script a resposta da nossa função, e não apenas “success”.
Nosso grande dilema até então era o fato de não termos controle sobre o que acontecia no back-end, apenas sabíamos que os dados haviam sido enviados com sucesso, se a função havia armazenado ou se algum dado estava com problemas era sempre uma incógnita.
Vamos a prática!
<?php
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) { } );
?>Essa é a action que trata os dados enviados por todos os formulários do site, ou seja, dentro da função pode-se identificar qual formulário enviou os dados e executar um script ou até mesmo funções com os dados enviados pelo formulário. Até aqui tudo certo, já era uma prática nossa, sua não? Então vou mostrar um pouco mais dessa action.
<?php
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
$form_name = $record->get_form_settings( 'form_name' );
$raw_fields = $record->get( 'fields' );
if( 'nome-do-formulario' == $form_name ) {
$return = function_trata_dados( $raw_fields );
$handler->data['customer_mail'] = $return;
}
}, 10, 2 );
?>A função executada na action usa dois parâmetros, o $record trás os dados do dormulário, então nele consigo identificar o nome do formulário (linha 2) e um array com os campos dele (linha 3), faça o que quiser com essas informações, acima estou mostrando um exemplo de uso.
O segundo parâmetro “$handler” foi o grande sucesso da semana, ele devolve ao front-end resposta sobre o envio, na posição “customer_mail” pode-se passar uma String que será tratada no JS a seguir:
<script>
$(document).on('submit_success', '#id-formulario', function( event, response ) {
if ( response.data.customer_mail ) {
console.log( response.data.customer_mail );
}
});
</script>
E esse é o JS que trata a resposta da action “’elementor_pro/forms/new_record’”. Simples assim! (Depois de sabermos da existência disso hehehe).
Dúvidas, fica a vontade para comentar…
Comentários