Gravity Form displaying with confirmation text below it.

How to Keep Gravity Forms Displayed After Submission

Sometimes you’ll have a Gravity Form that you want to keep visible after it is submitted. Maybe you want people to be able to fill out the same form multiple times, or maybe your design looks better with the form still showing.

Gravity forms has a filter hook built in called gform_pre_submission_filter, which can be used to make changes to the form, among other things, after the form has validated (ensured that required fields are filled, nothing is blocked, etc), but before the form submits and notifications are sent. You can learn a bit more about that filter on the Gravity Forms documentation.

We’re going to use this filter and create our own PHP function that will check the form before it is submit, and create a div that holds any confirmation messages that we have set.

// Allow the Gravity form to stay on the page when confirmation displays.
add_filter( 'gform_pre_submission_filter', 'dw_show_confirmation_and_form' );
function dw_show_confirmation_and_form( $form ) {
	$shortcode = '
. '" title="true" description="false"]'; if ( array_key_exists( 'confirmations', $form ) ) { foreach ( $form['confirmations'] as $key => $confirmation ) { $form['confirmations'][ $key ]['message'] = $shortcode . '<div class="confirmation-message">' . $form['confirmations'][ $key ]['message'] . '</div>'; } } return $form; }

First, on line two we add our function, dw_show_confirmation_and_form, to the filter. Notice that we use the parameter $form in our function, which gives us access to details about this specific form.

On line four I’m getting the shortcode that inserts the form into the page. In this case I want it to get the proper ID of the form, and I want to display the title of the form but not its description.

Below that, from line six to line ten, we’re checking to see if there are any confirmations for this form. If so, we’re going to loop through each confirmation and append it to the form shortcode (so the form will display again), then put the confirmation text inside of a div that we’ve given the class .confirmation-message. That class can then be used to style the display of the confirmations.

Finally, on line twelve, we return the form. Since we’ve prepended the shortcode with the ID of the form, when the form submits it will display the form again, followed by our confirmation message.

Gravity Form displaying with confirmation text below it.
Our post-submission form, with the confirmation text displaying below

The code above will make this change to all forms. If you need to target just one form, use the ID of the form and change the filter to include the form number after an underscore at the end. For instance, if we’re making this change to form three, we’ll change our filter call to 'gform_pre_submission_filter_3'.

Edit: A few people have pointed out that this can cause issues with using ajax="true" for your form. This can be due to when the JavaScript is loaded, and some necessary jQuery not loading before this. The following post gives an easy way to make Gravity Forms files load in the footer, but it could potentially cause problems with other extensions or plugins.

You may also want to do other things, like control whether any fields stay filled or not, update without refreshing the page, or scrolling down to the confirmation when complete, but those are lessons for another day!

22 comments on “How to Keep Gravity Forms Displayed After Submission

Comment navigation

  1. I wanted to try this out, but line 4 throws an error:

    PHP Parse error: syntax error, unexpected ‘” title=”‘ .

    The quotes don’t seem to line up for me (odd number of single and double quotes on this line).

    1. Hey Colin, the content of the code block was getting read, which it shouldn’t have been. I’ve replaced the code block with a Gist of the code so that line four shows up properly.

    1. It has for me, but there could be a variety of things working together in any specific situation. Have you given it a try with AJAX on for a form display?

      1. For me with ajax true it throws back a javascript error “jQuery is not defined”
        So the two forms stay on the page.
        I figured the iframe loaded after the ajax call doesn’t load the jQuery file causing the error.

      2. If you’d like to send some info including a URL with the form, I can take a look. None of the things that I’ve shown in this tutorial are using an iframe, but perhaps something else on the site could be causing jQuery not to load, or not to load in time.

        https://davidwolfpaw.com/contact/

  2. Hi David,
    I have a page with gravity form that ask the user to enter a start date and end date.
    On that same page we have a summary of different information including those dates.
    So what I would like to do is in place of being redirected somewhere else and getting an confirmation email when I enter the dates, is auto populate those dates in the summary. Additionally I will use this entry on a different form (a contract).
    How can I do that?
    Thanks! (I am a little lost!)

    1. It’s not quite the same as what this post covers, but you should be able to do both.

      While editing a form, go to the Confirmations page, and instead of having it redirect to another page, select “Text” for the confirmation type. On the right of the text editor there is an icon of a downward facing arrow with lines below it. You can click that to get access to all of the form fields. As an example, my contact form has a field titled Name and it has the field ID of 9, so I can type {Name:9} into the confirmation and it will display the name that was entered into that field.

      Next, you could use query strings to pass the field data to another form. If you go to the Advanced tab while editing a field in the second form (that will receive the data) and check “Allow field to be populated dynamically”, a new input called “Parameter Name” appears. You can then send type in a name to use in a query string, which can be part of a URL. Then, on the first form you can instead redirect to the page that the new form is on with the dates that you want to send as parameters. As an example, the link https://davidwolfpaw.com/contact/?fname=David&website=https://fixupfox.com/ goes to my contact form with the name field set to “David” and website set to https://fixupfox.com/.

      It’s harder to explain this as a post comment, so I’m going to write a new post for next week about this.

  3. Hey there…, When I have tried to pass the form again in Confirmation Message it works, but the problem is it reloads the form with input data filled. Any function is there to resolve it?

    1. Did the form submit the data as well? Try setting AJAX to false on the form as well. In the Gravity Form shortcode add ajax="false" and see if that helps.

  4. Hi David,
    thanks for this tip. Is it posible to put the confirmation message before the form ?

    1. Absolutely. Where I put the following:

      $form['confirmations'][ $key ]['message'] = $shortcode . 'confirmation HTML';

      You can swap around the shortcode and form like this:

      $form['confirmations'][ $key ]['message'] = 'confirmation HTML' . $shortcode;

      That should get you what you’re looking for!

  5. This works great! Thank you! How do you clear the form, and scroll down to the confirmation instead of it jumping to the top of the page?

    1. I would look into adding an HTML reset input, and an anchor link on the confirmation. This sounds like a good job for some JavaScript!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.