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!


Posted

in

, ,