Como exibir a confirmação e o formulário novamente após o envio

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.

Quando o formulário estiver criado, pode adicionar o fragmento de código no passo seguinte

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.

certifique-se de que o AJAX não está ativado no formulário

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!

Agora pode apresentar facilmente a confirmação e o formulário na mesma página após a submissão do formulário.

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.

lembre-se de desativar o AJAX para que este snippet funcione