Está interessado em mostrar a mensagem de confirmação do formulário juntamente com o próprio formulário após a submissão? 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 guiá-lo pelo processo de realização de ambos usando um simples trecho de código.
Criar o formulário
Em primeiro lugar, é necessário criar um novo formulário. Para o propósito deste tutorial, nós já completamos este passo. No entanto, se precisar de ajuda para criar um formulário com o WPForms, consulte esta documentação.
Para o nosso formulário, adicionámos apenas o campo de formulário Nome, E-mail e Texto do parágrafo.
Desativar o AJAX no formulário
Em seguida, tem de se certificar de que a opção Ativar envio de formulário AJAX está desactivada no formulário. Para verificar esta definição, clique no separador Definições dentro do construtor de formulários e, em seguida, clique em Geral.
Visualizar a confirmação e o formulário
Em seguida, terá de adicionar um pequeno fragmento de código ao seu sítio que permitirá que o formulário seja apresentado 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 só queremos que esse snippet seja executado em um formulário específico, estamos usando o if ( absint( $form_data[ 'id' ] ) !== 235 ). Isto significa que este snippet irá apenas executar se o ID do formulário corresponder 235.
Se precisar de ajuda para identificar o número de identificação do seu formulário, consulte este tutorial.
Se quiser manter os valores dentro dos campos do formulário após o envio do formulário, basta comentar o unset( $_POST[ 'wpforms' ][ 'fields' ] );. Para o fazer, basta adicionar duas barras oblíquas (//) à frente do código dos campos não definidos.
Exemplo:
// unset( $_POST[ 'wpforms' ][ 'fields' ] );
Agora, quando o formulário for enviado, os seus visitantes verão a confirmação e o formulário na mesma página depois de o formulário ser enviado!
E já está! Gostaria de definir uma data predefinida no seu seletor de datas? Consulte o nosso tutorial sobre Como definir uma data predefinida para o seu campo de formulário de seleção de data.
Ação de referência
wpforms_frontend_output_success
FAQ
P: Porque é que a minha mensagem de confirmação aparece por baixo do formulário?
R: Se a mensagem de confirmação estiver a aparecer por cima do formulário e quiser que apareça por baixo, altere a prioridade desta função.
Para explicar o que é a prioridade de uma função, vejamos o excerto acima, especificamente a ú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 desta função, passamos 3 argumentos($form_data, $fields, $entry_id), e temos a prioridade padrão definida como 10.
Como queremos que a funcionalidade predefinida do formulário apareça primeiro, neste caso, a mensagem de confirmação, precisamos de alterar a prioridade para que a mensagem apareça primeiro e a função seja executada depois. Para o efeito, vamos aumentar a prioridade para 1000.
A maioria das funções utiliza 10 como número de prioridade por defeito, pelo que, se quiser que algo seja executado antes, a prioridade deve ser inferior a 10; se quiser que a função seja executada depois, deve aumentar a prioridade para algo superior a 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: Porque é que o snippet não está a funcionar para mim?
R: Se o snippet não estiver a funcionar, certifique-se de que alterou o 235 para corresponder ao seu próprio ID de formulário no seu site. Consulte este tutorial para ajudar a encontrar o ID do formulário.
P: Porque é que vejo uma página em branco depois de enviar pela segunda vez?
R: Se estiver a ver uma página em branco ou um erro AJAX no registo da consola, certifique-se de que desactivou o AJAX, conforme mencionado nos passos acima. Esse snippet só funcionará se o AJAX estiver desativado no formulário.