September 10, 2014: Fixed issue where init() was not a static function.
Stop! There's a better way.
This snippet is available as a plugin with Gravity Perks, a suite of over 47 premium Gravity Forms plugins!
Are you interested in adding a quick pre-submission confirmation page to your forms where users can preview their entered data before it is submitted? Gravity Forms does not provide any way to do this by default; however, with a bit of custom code and a few simple form configuration instructions, you’ll have pre-submission confirmations working like magic!
One of the big things missing from the our old Simple Pre-submission Confirmation Snippet was support for Gravity Form merge tags. With some recent changes to Gravity Forms, supporting this in HTML fields became a lot easier.
Let’s dig in!
Step 1: The Code
The following code can be copied and pasted into your theme’s functions.php file.
This code provides the ability to use Gravity Form merge tags in an HTML field on the final page of your form, allowing users to preview their data before submission. Since you can now use merge tags, there is no need for the old shortcode method from the previous version of this snippet.
Step 2: The Form
With the code in place, it’s time to configure the form. The first thing we’ll need to do is add a page at the end of the form for the pre-submission confirmation. You can do this using the Page Break field type.
Next add an HTML field from the “Standard Fields” section. I renamed my HTML field “Confirmation”. Your page should now look something like this:
Pre-submission Confirmation Page ConfigurationGo ahead and select the HTML field for editing. The “Content” setting of this field now supports all merge tags like {Name (First):4}, {Question:5}, and even more advanced merge tags like {all_fields}. How about that!
You can see exactly what this content generates by submitting the demo form here.
Summary
Let me know how this new code works out for you!
Did this resource help you do something awesome with Gravity Forms?
Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.
Does this require legacy mode to work or will it work without it? I have it implemented on a website but need to make updates to the Gravity form for ADA compliance. I made changes on a dev server but the preview on pre-submission has stopped working. The only thing of note I can see changed on the form between the two environments is turning off legacy mode apart from some general layout changes to fields.
Hi Alan,
I’m unsure if it requires Legacy mode to work, but looking at the fact that this snippet was created more than a year ago, and we are no longer adding features to it, that could be the case. We have a Perk version of this functionality, which is up-to-date and should work better with the latest features of Gravity Forms. I will recommend you try that. https://gravitywiz.com/better-pre-submission-confirmation/
Best,
Bonjour, mais le code ne fonctionne pas, il affiche des erreurs à chaque fois :(
Hi Amira,
I just tested the code, and I can confirm that it works. The code displays a preview of the form fields before submission. The form has to be a multi-step with a page break. You can insert the field merge tags on the last page to see the preview.
Best,
Hi David, this class works great for the most part, thank you for sharing this.
I have noticed a bug though with an image upload field, hoping you can point me in the right direction. I have a multipage form with an image upload field on page 1. If I upload an image and make it to the last page with all the field previews, everything works well. However if I go back to page 1 and upload a different image, the originally uploaded image still appears as the preview on the last page. What I would like is for the newly uploaded image to appear in the preview.
I’m having trouble reading through the class methods to figure out where it would need to “refresh” the URL for the uploaded image. Is this something you can help me with? I figure there is a filter or action to add somewhere but it’s tough.
I don’t know if it helps, but curiously enough a new image preview will show up but only if logged in as an admin. If you’re logged out, the image preview will not show a new uploaded image.
Hi James,
We were able to reproduce the issue. Working with images is tricky stuff. If you are a Gravity Wiz customer, drop us a line Support a we will help you troubleshoot and fix this issue in the Perk version of the snippet.
Best,
Hi, This is exactly what I was looking for but I have a few questions. I have a build your own gift box form and I am using this so the customer can preview all the products they have selected before they add to cart.
1 – Can its how each products price and the total at the bottom. At the moment it is only showing total price. 2 – Can a customer edit their products, delete some and then the option to add more. 3 – How can I edit the style of the form to look like my Product page? I have used the same Custom CSS Class as the Product page but is not changing the look of it.
Hi Brenda,
1) You should be able to do this with our GP eCommerce field Perks and some customization to the Order Summary markup snippet.
2) No, it’s currently not possible for a user to edit the field values on the Preview Submission page. To edit the values, a user will have to navigate back to the page with the value they want to change.
3) You may want to check out this documentation from Gravity forms on editing the style and designs: https://docs.gravityforms.com/design-overview/
Best,
1 – I tried this and it caused my site to shut down so I clearly do not have the proper knowledge for this. Is there anywhere I can get the exact process to add the amount of each product in the summary?
2 – I then need to add this to the form saying ‘Please press pervious in the bottom right hand corner, this will bring you back to the product page where you can deselect and change your products choice’. Can you let me know how I can add that?
3- I add the css that I used on the product page but it didn’t change any of the design of it.
Hi Brenda,
1) Please refer to our article on snippet troubleshooting for details on installing our snippets.
2) You can add the text within an HTML field on the last page of the form. The same page as the HTML field that has the all_fields merge tag.
3) Here is an article on how to add CSS to a WordPress Website. If you’re a Gravity Perk License holder, you can get in touch with us via support form so we can take a closer look at your setup and assist you further.
Best,
Hello, I have a Gravity forms with a lot of fields and I would like to display a specific field on a specific page of my website. For example : on my home page : I would liket to display field number 1, 2 and 3 (ID field) and on an another page I would like to display only the field with ID 7. I tried this shortcode : [gravityform id="1" title="false" description="false" ajax="true" tabindex="1" field_values="check=First Choice,Second Choice" field_id=7] but it is not working. Any idea ? Thank you so much for you rhelp
Hello Stephane, this is an interesting question and we would love to take a look at your setup! Could you please drop us a support request so we could get to the bottom of this one for you. 😁
Hi David, i want to use this nice plugin. i want το customize the preview by using the individual field merge tags. Μy guestion is , is it possible, the preview not to be all in one line. I want like a letter, with spaces between the field merge tags, and is some cases to be in one line down. (such as thanks/apology letter for example) I will not use labels
thank a lot Antonis
Hi Antonis, if you’re using the individual merge tags, you will need to use HTML
<
p> and
tags to add space between the fields as desired.
thanks for your help i really appreciate, one more question…very important for the form i want to create with gravity…
the Submission Preview is it possible to be in the same page with the fileds, and not in a separate page? so the users dont have do press button for next page (in order to make changes in the forms) .
If you need it on the same page, I would recommend going with Populate Anything which supports Live Merge Tags. Live Merge Tags are replaced as the user types.
Hi David I have a long complicated form with various fields being displayed depending on what the user has input in other fields etc. Some of the these hidden fields have default values in. How can I preview ONLY the fields that are visible? Ive tried the snippet you linked to but that didnt work. Thanks
Ignore me. I just got this working! :)
Glad to hear it, Daniel!
How we can give styling to gravity form review page. By default it shows label heading in one row and result in other row. i want to show both label heading and result in one row?
You can take complete control of the All Fields merge tag with this: https://gravitywiz.com/gravity-forms-all-fields-template/
Love using Gravity Perks but find the help support hard to reach as my emails get intercepted by a robot. Once you do get though to David he is extremely helpful.
Hi Paul, support is always available via our support form.
https://gravitywiz.com/support
As a small team, tickets arriving in a standardized format allows us to provide the most efficient support possible.
This is an amazing little snippet, thanks so much! Only one small issue.
Using {all_fields} in the last screen but the email field is always empty. In the confirmation email its populated. Any idea why?
Strange. I’m not able to recreate this on my end. I’d recommend giving the plugin version a try. Alternately, you could try doing a theme/plugin conflict to see if a theme or plugin is conflicting with the snippet.
https://docs.gravityforms.com/testing-for-a-themeplugin-conflict/
Hi on my review page (which looks great now thanks) the customer only wants certain sections i.e. the customers personal details to be shown I am using a paged form how do i go about doing this thanks in advance Alistair
Hi Alistair, you can customize your preview by using the individual field merge tags rather than the {all_fields} merge tag. Alternately, you can customize the {all_fields} markup and exclude specific fields via the All Fields Template plugin.
Thanks David, I’am slowly getting there with the below, I presume I need to wrap in divs or spans so i can style manually but the main thing is how do i tell it if the field is empty don’t show
Name: {Name:6.3}, {Name:6.6}, Date of Birth: {Date of Birth:7}, Sex: {Sex:5}, Marital Status: {Marital Status:8}, Email: {Email:10}, Telephone: {Telephone:11}, Address: {Address:37.1}, {Address:37.2}, {Address:37.3}, {Address:37.4}, {Address:37.5}
This will help: https://gravitywiz.com/gravity-forms-conditional-shortcode/
Works great but very ugly anyway of styling the Table as it seems pre-populated with style and don’t know were to change Thanks in advance
Hi Alistair, this is the default way that Gravity Forms styles its
{all_fields}merge tag. If you’d like to change this, we suggest our All Fields Template plugin: https://gravitywiz.com/gravity-forms-all-fields-template/I am using this addon for my submissions page, and it works great, but one small issue I have is when listing the merge tags in the HTML block in a list format, there are gaps where the merge tags that were not selected are.
My temporary fix is placing each merge tag in its own HTML block, and setting the visibility conditions accordingly. But this is preventing me from placing a “Copy To Clipboard” button on the summary page
Hi Dillon, I think the [gravityforms] conditional shortcode will help out here: https://gravitywiz.com/gravity-forms-conditional-shortcode/
i have problem using the file upload with the multiple not displaying on the pre-submission,can you plz help me .
You’ll need to upgrade to Gravity Forms Preview Submission to get support for file uploads.
Hi I cant get the files I submitted to display on the preview page. When i click the link to view file i get a page cannot be displayed error.
File uploads do not work with the snippet version. You’ll need the plugin version: https://gravitywiz.com/documentation/gravity-forms-preview-submission/
Thanks for this great snippet. As a heads up, it appears that it does not support multi-file uploads right now.
Hi Mark, this is supported in the perk-version. :)
Touché! Thanks for letting me know.
Hi there, i’ve been using this for a long time, and it worked great!!
but now it seems to be broken with gravity forms 2.3! (https://www.gravityforms.com/gravity-forms-v2-3-released/)
–> the submit and back buttons don’t seem to work anymore, nothing happens when i click on them.
do you experience the same problems with gravity 2.3? or should it be working? would be great if you can help.
greetings from austria
I would not expect anything in 2.3 to conflict with this nor would I expect this snippet to impact page navigation. I’d recommend a theme/plugin conflict to confirm. https://docs.gravityforms.com/testing-for-a-themeplugin-conflict/
Hello. I’m not sure of the correct terminology, but I’m trying this snippet and I’m experiencing a difficulty: When I use a field with a sub-value, the pre-submission confirmation shows the entire field. For example I’m trying this:
“Hello, how’s the weather in {Address (City):4.3}?” Which should return the info from Address Field Value 4, sub-value 3 (City):
“Hello, how’s the weather in Portland?
But what I’m getting is this:
“Hello, how’s the weather in 123 1st St, Portland, OR 97086, USA?”
So it’s displaying the entire contents of the Address field. Any idea on how to fix this?
Thanks.
Hi I’m using your snippet to make a pretty pre-submission page. Everything works fine, but when using a “Option field” it won’t display value AND price in notification mail when the order has been submitted. Please take a look here: https://prnt.sc/gjoyk3 It does display the value and price on the pre-submission page but I would like to transfer these values to mail as well. Can you help me doing that? Thanks Andreas
We don’t have a simple solution for this but if you’re using the {all_fields} merge tag, you might consider our new plugin for customizing this: https://gravitywiz.com/gravity-forms-fields-template/
Is there any way to hide fields with visibility set to hidden? like this code from gravity documentation?
This snippet definitely works with the plugin version of this code but I suspect it will also work with the snippet version.
https://gist.github.com/spivurno/7bc96d50c1299a484166df0d06b96b48