Como Exibir a Confirmação e o Formulário Novamente Após o Envio

Você tem interesse em exibir a mensagem de confirmação do formulário ao lado do 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 guiá-lo através do processo de realização de ambos usando um simples trecho de código.

Criando o formulário

Primeiro, você precisará criar um novo formulário. Para fins deste tutorial, já completamos esta etapa. No entanto, se precisar de ajuda para criar um formulário com o WPForms, por favor, revise esta documentação.

Para o nosso formulário, adicionamos apenas os campos de formulário Nome, Email e Texto de Parágrafo.

Desativando o AJAX no formulário

Em seguida, você precisará garantir que a opção Habilitar envio de formulário AJAX esteja desativada no formulário. Para verificar esta configuração, clique na guia Configurações dentro do construtor de formulários e, em seguida, clique em 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 trechos ao seu site, por favor, revise 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 este trecho seja executado apenas em um formulário específico, estamos usando if ( absint( $form_data[ 'id' ] ) !== 235 ). Isso significa que este trecho será executado apenas se o ID do formulário corresponder a 235.

Se você quiser manter os valores dentro dos campos do formulário após o envio, basta comentar a linha unset( $_POST[ 'wpforms' ][ 'fields' ] );. Você pode fazer isso adicionando duas barras (//) na frente do código de 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 após o envio do formulário!

E é isso! Gostaria de definir uma data padrão no seu seletor de data? 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 sua mensagem de confirmação estiver aparecendo acima do seu formulário e você gostaria que ela aparecesse abaixo, por favor, altere a prioridade desta função.

Para explicar o que é a prioridade de uma função, vamos dar uma olhada no trecho acima, especificamente na última linha.

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

Neste caso, o nome do hook 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, estamos passando 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, vamos aumentar a prioridade para 1000.

A maioria das funções usa 10 como número de prioridade padrão, então, se você quiser que algo seja executado antes, defina a prioridade como algo abaixo de 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, certifique-se de ter alterado o 235 para corresponder ao ID do seu próprio formulário em seu site. Por favor, veja este tutorial para ajudar a encontrar o ID do seu formulário.

P: Por que vejo uma página em branco depois de enviar pela segunda vez?

R: Se você estiver vendo uma página em branco ou um erro AJAX no log do console, certifique-se de ter desabilitado o AJAX, conforme mencionado nas etapas acima. Este snippet só funcionará se o AJAX estiver desabilitado no formulário.