Você tem interesse em mostrar a mensagem de confirmação do formulário junto com o próprio formulário após o envio? Normalmente, quando um formulário é enviado, você tem a opção de exibir uma mensagem de confirmação ou redirecionar para outra página da Web. No entanto, neste tutorial, vamos orientá-lo no processo de realização de ambos usando um simples snippet de código.
Criando o formulário
Primeiro, você precisará criar um novo formulário. Para o propósito deste tutorial, já concluímos essa etapa. No entanto, se você precisar de ajuda para criar um formulário com o WPForms, consulte esta documentação.
Para o nosso formulário, adicionamos apenas os campos de formulário Name, Email e Paragraph Text.
Desativar o AJAX no formulário
Em seguida, você precisará garantir que a opção Ativar envio de formulário AJAX esteja desativada no formulário. Para verificar essa configuração, clique na guia Settings (Configurações ) dentro do construtor de formulários e, em seguida, clique em General (Geral).
Exibindo a confirmação e o formulário
Em seguida, você precisará adicionar um pequeno trecho de código ao seu site que permitirá que o formulário seja exibido novamente antes da mensagem de confirmação.
Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.
/*
* Display confirmation message and form after successful submission.
*
* @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
*/
function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
wpforms()->frontend->output( $form_data[ 'id' ] );
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
Como queremos que esse snippet seja executado somente em um formulário específico, estamos usando o if ( absint( $form_data[ 'id' ] ) !== 235 ). Isso significa que esse snippet será somente executado se o ID do formulário corresponder 235.
Se precisar de ajuda para identificar o número de identificação do formulário, consulte este tutorial.
Se você quiser manter os valores dentro dos campos do formulário depois que o formulário for enviado, basta comentar o unset( $_POST[ 'wpforms' ][ 'fields' ] );. Você pode fazer isso adicionando duas barras (//) na frente do código dos campos não definidos.
Exemplo:
// unset( $_POST[ 'wpforms' ][ 'fields' ] );
Agora você verá que, quando o formulário for enviado, seus visitantes verão a confirmação e o formulário na mesma página depois que o formulário for enviado!
E é isso! Gostaria de definir uma data padrão em seu seletor de datas? Dê uma olhada em nosso tutorial sobre Como definir uma data padrão para o campo de formulário do seletor de data.
Ação de referência
wpforms_frontend_output_success
PERGUNTAS FREQUENTES
P: Por que minha mensagem de confirmação aparece abaixo do formulário?
R: Se a mensagem de confirmação estiver aparecendo acima do formulário e você quiser que ela apareça abaixo, altere a prioridade dessa função.
Para explicar o que é a prioridade de uma função, vamos dar uma olhada no snippet acima, especificamente na última linha.
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
Nesse caso, o nome do gancho de ação (conforme definido pelo WPForms) é wpforms_frontend_output_success, o nome da nossa função é wpf_dev_frontend_output_success. Dentro dessa função, passamos 3 argumentos($form_data, $fields, $entry_id) e temos a prioridade padrão definida como 10.
Como queremos que a funcionalidade padrão do formulário apareça primeiro, neste caso, a mensagem de confirmação, precisamos alterar a prioridade para que a mensagem apareça primeiro e a função seja executada depois. Para fazer isso, aumentaremos a prioridade para 1000.
A maioria das funções usa 10 como número de prioridade padrão; portanto, se você quiser que algo seja executado antes, a prioridade deve ser inferior a 10; se quiser que a função seja executada depois, aumente a prioridade para algo acima de 10.
/*
* Display confirmation message and form after successful submission.
*
* @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
*/
function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
wpforms()->frontend->output( $form_data[ 'id' ] );
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 );
P: Por que o snippet não está funcionando para mim?
R: Se o snippet não estiver funcionando, verifique se você alterou o 235 para corresponder ao ID do formulário em seu site. Consulte este tutorial para ajudar a encontrar o ID do formulário.
P: Por que vejo uma página em branco depois de enviar pela segunda vez?
R: Se estiver vendo uma página em branco ou um erro de AJAX no log do console, certifique-se de ter desativado o AJAX conforme mencionado nas etapas acima. Esse snippet só funcionará se o AJAX estiver desativado no formulário.