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

Tem interesse em mostrar a mensagem de confirmação do formulário juntamente com o próprio formulário após o envio? Normalmente, quando um formulário é enviado, tem a opção de exibir uma mensagem de confirmação ou redirecionar para outra página web. No entanto, neste tutorial, iremos guiá-lo através do processo de realização de ambos utilizando um simples trecho de código.

Criação do formulário

Primeiro, terá de criar um novo formulário. Para efeitos deste tutorial, já completámos este passo. No entanto, se precisar de assistência na criação de um formulário com o WPForms, por favor, consulte esta documentação.

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

Desativar AJAX no formulário

Em seguida, terá de se certificar de que a opção Ativar envio de formulário AJAX está desativada no formulário. Para verificar esta configuração, clique no separador Configurações dentro do construtor de formulários e, em seguida, clique em Geral.

Exibir a confirmação e o formulário

Em seguida, terá de 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, 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 este trecho seja executado apenas num formulário específico, estamos a usar o código if ( absint( $form_data[ 'id' ] ) !== 235 ). Isto significa que este trecho será executado apenas se o ID do formulário corresponder a 235.

Se quiser manter os valores dentro dos campos do formulário após o envio do formulário, basta comentar a linha unset( $_POST[ 'wpforms' ][ 'fields' ] );. Pode fazer isto adicionando duas barras (//) em frente ao código de campos não definidos.

Exemplo:

// unset( $_POST[ 'wpforms' ][ 'fields' ] );

Agora verá que, quando o formulário for enviado, os seus visitantes verão a confirmação e o formulário na mesma página após o envio do formulário!

E é tudo! Gostaria de definir uma data padrão no seu seletor de datas? Dê uma vista de olhos ao nosso tutorial sobre Como Definir uma Data Padrão para o Campo do Formulário Seletor de Datas.

Ação de Referência

wpforms_frontend_output_success

FAQ

P: Por que é que a minha mensagem de confirmação aparece abaixo do formulário?

R: Se a sua mensagem de confirmação estiver a aparecer acima do seu formulário e gostaria que aparecesse abaixo, por favor, altere a prioridade desta função.

Para explicar o que é a prioridade de uma função, vamos dar uma vista de olhos ao trecho acima, especificamente à ú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 a passar 3 argumentos ($form_data, $fields, $entry_id), e temos a prioridade padrão definida para 10.

Uma vez que 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, portanto, se você quiser que algo seja executado antes, defina a prioridade como algo inferior a 10; se quiser que a função seja executada depois, aumente 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: Por que é que o trecho não está a funcionar para mim?

R: Se o trecho de código não estiver a funcionar, certifique-se de que alterou o 235 para corresponder ao ID do seu próprio formulário no 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 estiver a ver uma página em branco ou um erro AJAX no registo da consola, certifique-se de que desativou o AJAX, conforme mencionado nos passos acima. Este trecho de código só funcionará se o AJAX estiver desativado no formulário.