How to Display the Confirmation and the Form Again After Submission

Introduction

Would you like to have the confirmation and your form displayed 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' ]
		);

		// Uncomment 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 );

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.

To explain what the priority of a function is, let’s take a look at the snippet above, specifically the last line.

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

In this case, the name of the action hook (as defined by WPForms) is wpforms_frontend_output_success, the name of our function is wpf_dev_frontend_output_success. Inside this function, we are pass 3 arguments ($form_data, $fields, $entry_id), and we have the default priority set to 10.

Since we want the default functionality of the form to appear first, in this case, the confirmation message, we need to change the priority so that the message appears first and the function runs after. To do this, we are going to increase the priority to 99.

Most functions use 10 as a default priority number so if you want something to run before you would make the priority something under 10 if you want the function to run after, increase the priority to something over 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' ]
		);

		// Uncomment 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', 99, 3 );

Q: Why isn’t the snippet working for me?

A: If the snippet isn’t working, please make sure you’ve changed the 235 to match your own form ID on your site. Please see this tutorial to help find your form ID.

Q: Why do I have to disable AJAX?

A: AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. This snippet won’t call upon the wpforms()->frontend->output function unless the page reloads completely.