Gravity Form displaying with confirmation text below it.

How to Keep Gravity Forms Displayed After Submission

| , ,

This post has been updated on 9 March 2022 to reflect updates to the code

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.

The code is embedded here, or can be viewed as a gist on GitHub.

Inserting the Form before the Confirmation Message

First, on line 3 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 7 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 15 to line 19, 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 21, 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'.

Clearing Inputs

So that covers keeping the form displayed, but now we need to clear all of the inputs in the form.

This is where the function dw_gf_footer_scripts() comes in. Without relying on jQuery it looks for Gravity Forms inputs and textareas to clear them out on reload. Crucially, hidden fields are left alone, so that the values assigned to them are still available for submission.

Final Notes

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.

https://hereswhatidid.com/2013/01/move-gravity-forms-jquery-calls-to-footer/

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!

Fediverse reactions

43 responses to “How to Keep Gravity Forms Displayed After Submission”

  1. DΛVID V3.0.11 Avatar

    I know, I don’t know why it didn’t grab the featured image like it should have for this post, ugh 😤

  2. Colin Avatar
    Colin

    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. david Avatar

      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.

  3. Wp_manga Avatar
    Wp_manga

    Does this work when ajax is true?

    1. david Avatar

      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. Wp_manga Avatar
        Wp_manga

        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. david Avatar

        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://david.garden/contact/

  4. Mamalia Avatar
    Mamalia

    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. david Avatar

      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://david.garden/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.

  5. Subash Krishnan Avatar
    Subash Krishnan

    This just worked for me. Thanks david 🙂

    1. david Avatar

      Glad to hear it!

  6. Saravana Krishna Avatar
    Saravana Krishna

    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. david Avatar

      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.

      1. Imran Shaikh Avatar

        I tried the same david, still loads the form with the input data within the fields.

  7. Julius Avatar
    Julius

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

    1. david Avatar

      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!

  8. Tusko Avatar

    The form still visible after submission, but validation and AJAX doesn’t work.

    1. david Avatar

      This can work with AJAX, but the error is with Gravity Forms and when it enqueues JavaScript files. I can’t say that this will work for you, but this solution may help: https://hereswhatidid.com/2013/01/move-gravity-forms-jquery-calls-to-footer/

  9. Annette Avatar

    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. david Avatar

      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!

  10. Chris Avatar
    Chris

    Nice coding and perfect, thanks alot, but even though what i had in mind before testing the code was to stop gravity form from resubmitting or updating entries on page reload.
    Am using a filter to update user meta on form submison but the updated value is cleared anytime the page is reloaded after submission.

  11. Mike Avatar
    Mike

    I get a syntax error when I pop this into my functions.php file.

    “Error message: syntax error, unexpected ‘” title=”‘ (T_CONSTANT_ENCAPSED_STRING)”

    It seems like it works for other folks, but I can’t determine why it won’t work for me.

  12. Mike Avatar
    Mike

    I managed to fix the syntax error I had, but I get “Oops! We could not locate your form.” after submission.

    My confirmation message displays just fine.

    Why can’t it find the form I’m submitting?

  13. Mike Avatar
    Mike

    Ah, your code is mangled on the site. I found the original gist, and I’m not getting an error anymore.

    But it still gives me the “Oops! We could not locate your form.” on refresh and I can’t figure out why.

    This site only has one form, its ID is 1 and it still doesn’t come back.

    Any thoughts why?

    1. david Avatar

      I just replaced it with the gist. The code syntax highlighter that I switched to doesn’t treat the content the same.

      I’ve not seen that issue before. Do you have it set for full page refresh when submitted?

      1. Mike Avatar
        Mike

        Not sure I follow. Do I have what set for full page refresh?

        The form itself?

        If so, yes, the page refreshes when the form submits. But your code can’t find the form for some reason.

    2. Zach Nicodemous Avatar

      I am getting the same error on my own website. Only one form on my site and after submission, I get “Oops! We could not locate your form.”. I’ll post another comment if I solve the issue.

      1. Zach Nicodemous Avatar

        Might not be an ideal solution, but I solved it by taking $shortcode out of the $form[‘confirmations’] and then adding “echo do_shortcode($shortcode);” before “return $form;”. I had to add some scripting though to clear the form after it echos again.

      2. Anthony Stackman Avatar
        Anthony Stackman

        What scripting did you add to clear the field values, I’m using your fix but this has become a stumbling block for me

  14. JP Avatar
    JP

    Thanks for the post but in my case it worked with the filter gform_pre_render

  15. Bigbanks Avatar
    Bigbanks

    Hi david,

    Thank you for the solution. In my case there were some problems.

    1. After the form got submitted I had an error: “We could not locate your form”. I have fixed it by wrapping shortcode on line 4 with do_shortcode() function:

    $shortcode = do_shortcode(‘[gravityform id=”‘ . $form[‘id’] . ‘” title=”true” description=”false”]’);

    2. The form become wrapped with .gform_confirmation_wrapper and .gform_confirmation_message classes, which caused the entire form become styled as confirmation wrapper (in my case confirmation wrapper have some specific background, font size and borders). To avoid this issue, I would recommend to add two closing and opening div’s on line 8 and move confirmation message to the top of the form:

    $form[‘confirmations’][ $key ][‘message’] = ” . $form[‘confirmations’][ $key ][‘message’] . ” . $shortcode;

    1. Nico Avatar
      Nico

      Thank you Bigbanks,
      It works like a charm!

    2. Sridhar Katakam Avatar

      @Bigbanks: Any chance you can share the full code?

  16. Ricky Poon Avatar

    I’m getting the following errors with Ajax and moving the jquery to the footer

    Notice: Undefined index: form in /public/wp-content/plugins/gravityforms/form_display.php on line 844

    Notice: Undefined index: lead in /public/wp-content/plugins/gravityforms/form_display.php on line 845
    Oops! We could not locate your form.

  17. Rod Avatar

    Thanks for sharing david, this is a great solution most especially if you wanted users to send the form multiple times based on their needs.

    As an example, if you offer services i.e web design or SEO. You can use this technique.

    This is also a good FREE solution if you want to save and don’t want to buy premium add-ons like the “Gravity Forms Reload Form” which basically do the same.

    Keep it up.

  18. Mary Makowsky Avatar
    Mary Makowsky

    Hello. Thank you so much for this! I need to apply this to just 3 out of many forms on our site. How can I specify those forms ids in this snippet?

    1. Mary Makowsky Avatar
      Mary Makowsky

      Never mind. Figured it out. Wrapped with if ( $form[‘id’] === 7 || $form[‘id’] === 8|| $form[‘id’] === 9) {}

      Thanks again! Can’t believe this isn’t an option in the form settings but glad someone has a free fix. 🙂

  19. pettrushkov Avatar
    pettrushkov

    Hi,
    I tried to use your filter, but added ajax=”true” to $shortcode and form broke https://take.ms/pdu40
    Each submit – new form added under old. I saw about link to move GF jQuery in footer, I tried this, but it not give me result

    1. david wolfpaw Avatar

      It’d be hard to guess what could be causing this, but I’m aware that having ajax="true" could cause this code not to work.

  20. Andry Avatar
    Andry

    Hi, thanks for solution.
    I have the same problem with ajax=”true” like pettrushkov says. Do you have any tips how to fix it or maybe you can create bug report for plugin support ?

Mentions

  • 💬 I was raised by a cup of internet (they/he)

Likes

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.

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)

🌙 ☀️