How to Display the Confirmation and the Form Again After Submission

Introduction

Would you like to have the confirmation and your form display on the page after each successful form submission? By default when a form is submitted you can have the form display a confirmation message or redirect to another web page. In this tutorial, we’re going to show you how to achieve this using a small code snippet.

Setting up the form

First, you’ll need to create a new form. For the purpose of this tutorial, we’ve already completed this step. However, if you need assistance in creating a form with WPForms, please review this documentation.

For our form, we’ve added just the Name, Email and Paragraph Text form field.

Once your form is created you can add the code snippet in the next step

Disabling AJAX on the form

Next, you’ll need to make sure the Enable AJAX form submission is disabled on the form. To check this setting click on the Settings tab inside the form builder and then click General.

make sure AJAX is not enabled on the form

Adding the code snippet

Next, you’ll need to add a small code snippet to your site that will allow the form to display again before the confirmation message.

If you need help adding snippets to your site, please review this 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 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']
		);

		// If you want to preserve the user entered values in form fields - remove the line below.
		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 );

Since we only want this snippet to run on a particular form, we’re using the if ( absint( $form_data[‘id’] ) !== 235 ). This means that this snippet will only run if the form ID matches 235.

If you need help in identifying your form ID number, please see this tutorial.

If you want to keep the values inside the form fields after the form submits, just remove unset( $_POST[‘wpforms’][‘fields’] );.

Now you’ll see when the form is submitted, your visitors will see the confirmation and the form on the same page after the form is submitted!

Now you can easily display confirmation and form on the same page after the form submits.

And that’s it! Would you like to set a default date on your date picker? Take a look at our tutorial on How to Set a Default Date for Your Date Picker Form Field.

Action Reference: wpforms_frontend_output_success

FAQ

Q: Why does my confirmation message appear below the form?

A: If your confirmation message is appearing above your form and you’d like it to appear below, please change the priority of this function.

/*
 * 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 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']
		);

		// If you want to preserve the user entered values in form fields - remove the line below.
		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', 100, 3 );