September 10, 2014: Fixed issue where init() was not a static function.
September 11, 2013: Updated to fix issue where Total field merge tags were not displaying due to GFCache issue.
May 22, 2013: Updated to support :noadmin filter on the {all_fields} merge tag.
February 13, 2013: Updated to fix issue where specify individual input merge tag (ie First Name of a Name field: {Name (First):4.3}) was returning the full field value instead of the individual inputs value.
Updated on December 4th, 2012 to pass the correct number of variables to the
preview_special_merge_tagsfunction.
Stop! There's a better way.
This snippet is available as a plugin with Gravity Perks, a suite of over 27 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 Simple Pre-submission Confirmation 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.
| <?php | |
| /** | |
| * Better Pre-submission Confirmation | |
| * https://gravitywiz.com/2012/08/04/better-pre-submission-confirmation/ | |
| */ | |
| class GWPreviewConfirmation { | |
| private static $lead; | |
| public static function init() { | |
| add_filter( 'gform_pre_render', array( __class__, 'replace_merge_tags' ) ); | |
| } | |
| public static function replace_merge_tags( $form ) { | |
| $current_page = isset(GFFormDisplay::$submission[$form['id']]) ? GFFormDisplay::$submission[$form['id']]['page_number'] : 1; | |
| $fields = array(); | |
| // get all HTML fields on the current page | |
| foreach($form['fields'] as &$field) { | |
| // skip all fields on the first page | |
| if(rgar($field, 'pageNumber') <= 1) | |
| continue; | |
| $default_value = rgar($field, 'defaultValue'); | |
| preg_match_all('/{.+}/', $default_value, $matches, PREG_SET_ORDER); | |
| if(!empty($matches)) { | |
| // if default value needs to be replaced but is not on current page, wait until on the current page to replace it | |
| if(rgar($field, 'pageNumber') != $current_page) { | |
| $field['defaultValue'] = ''; | |
| } else { | |
| $field['defaultValue'] = self::preview_replace_variables($default_value, $form); | |
| } | |
| } | |
| // only run 'content' filter for fields on the current page | |
| if(rgar($field, 'pageNumber') != $current_page) | |
| continue; | |
| $html_content = rgar($field, 'content'); | |
| preg_match_all('/{.+}/', $html_content, $matches, PREG_SET_ORDER); | |
| if(!empty($matches)) { | |
| $field['content'] = self::preview_replace_variables($html_content, $form); | |
| } | |
| } | |
| return $form; | |
| } | |
| /** | |
| * Adds special support for file upload, post image and multi input merge tags. | |
| */ | |
| public static function preview_special_merge_tags($value, $input_id, $merge_tag, $field) { | |
| // added to prevent overriding :noadmin filter (and other filters that remove fields) | |
| if( ! $value ) | |
| return $value; | |
| $input_type = RGFormsModel::get_input_type($field); | |
| $is_upload_field = in_array( $input_type, array('post_image', 'fileupload') ); | |
| $is_multi_input = is_array( rgar($field, 'inputs') ); | |
| $is_input = intval( $input_id ) != $input_id; | |
| if( !$is_upload_field && !$is_multi_input ) | |
| return $value; | |
| // if is individual input of multi-input field, return just that input value | |
| if( $is_input ) | |
| return $value; | |
| $form = RGFormsModel::get_form_meta($field['formId']); | |
| $lead = self::create_lead($form); | |
| $currency = GFCommon::get_currency(); | |
| if(is_array(rgar($field, 'inputs'))) { | |
| $value = RGFormsModel::get_lead_field_value($lead, $field); | |
| return GFCommon::get_lead_field_display($field, $value, $currency); | |
| } | |
| switch($input_type) { | |
| case 'fileupload': | |
| $value = self::preview_image_value("input_{$field['id']}", $field, $form, $lead); | |
| $value = self::preview_image_display($field, $form, $value); | |
| break; | |
| default: | |
| $value = self::preview_image_value("input_{$field['id']}", $field, $form, $lead); | |
| $value = GFCommon::get_lead_field_display($field, $value, $currency); | |
| break; | |
| } | |
| return $value; | |
| } | |
| public static function preview_image_value($input_name, $field, $form, $lead) { | |
| $field_id = $field['id']; | |
| $file_info = RGFormsModel::get_temp_filename($form['id'], $input_name); | |
| $source = RGFormsModel::get_upload_url($form['id']) . "/tmp/" . $file_info["temp_filename"]; | |
| if(!$file_info) | |
| return ''; | |
| switch(RGFormsModel::get_input_type($field)){ | |
| case "post_image": | |
| list(,$image_title, $image_caption, $image_description) = explode("|:|", $lead[$field['id']]); | |
| $value = !empty($source) ? $source . "|:|" . $image_title . "|:|" . $image_caption . "|:|" . $image_description : ""; | |
| break; | |
| case "fileupload" : | |
| $value = $source; | |
| break; | |
| } | |
| return $value; | |
| } | |
| public static function preview_image_display($field, $form, $value) { | |
| // need to get the tmp $file_info to retrieve real uploaded filename, otherwise will display ugly tmp name | |
| $input_name = "input_" . str_replace('.', '_', $field['id']); | |
| $file_info = RGFormsModel::get_temp_filename($form['id'], $input_name); | |
| $file_path = $value; | |
| if(!empty($file_path)){ | |
| $file_path = esc_attr(str_replace(" ", "%20", $file_path)); | |
| $value = "<a href='$file_path' target='_blank' title='" . __("Click to view", "gravityforms") . "'>" . $file_info['uploaded_filename'] . "</a>"; | |
| } | |
| return $value; | |
| } | |
| /** | |
| * Retrieves $lead object from class if it has already been created; otherwise creates a new $lead object. | |
| */ | |
| public static function create_lead( $form ) { | |
| if( empty( self::$lead ) ) { | |
| self::$lead = GFFormsModel::create_lead( $form ); | |
| self::clear_field_value_cache( $form ); | |
| } | |
| return self::$lead; | |
| } | |
| public static function preview_replace_variables( $content, $form ) { | |
| $lead = self::create_lead($form); | |
| // add filter that will handle getting temporary URLs for file uploads and post image fields (removed below) | |
| // beware, the RGFormsModel::create_lead() function also triggers the gform_merge_tag_filter at some point and will | |
| // result in an infinite loop if not called first above | |
| add_filter('gform_merge_tag_filter', array('GWPreviewConfirmation', 'preview_special_merge_tags'), 10, 4); | |
| $content = GFCommon::replace_variables($content, $form, $lead, false, false, false); | |
| // remove filter so this function is not applied after preview functionality is complete | |
| remove_filter('gform_merge_tag_filter', array('GWPreviewConfirmation', 'preview_special_merge_tags')); | |
| return $content; | |
| } | |
| public static function clear_field_value_cache( $form ) { | |
| if( ! class_exists( 'GFCache' ) ) | |
| return; | |
| foreach( $form['fields'] as &$field ) { | |
| if( GFFormsModel::get_input_type( $field ) == 'total' ) | |
| GFCache::delete( 'GFFormsModel::get_lead_field_value__' . $field['id'] ); | |
| } | |
| } | |
| } | |
| GWPreviewConfirmation::init(); |
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 package of 27 Gravity Forms plugins with premium support.
Just tried this and it broke my site. Won’t even let me in to the admin dashboard now. Let me know if you can help
Hi Max, this will help: https://gravitywiz.com/documentation/snippet-troubleshooting/
Hi! I have a form with 8 pages, a large one. I have put Merge tags in a HTML field and in a DIV that is position:fixed; to the top right corner and hidden. I then use jQuery to slide this up and down when a link is clicked in the meny. This HTML field is on every page.
All this is working great BUT, the merge tags does not display anything on the first page even if I go to page two and then back to the first page. I have “Total Price”, “Tax”, “Discount” details as merge tags.
Another problem; when I am on a page and the total is $100, another product is chosen and the total becomes $150 on the Gravity Total field, but the Merge tags stays at the same number until next page. Can I get the marge tags to update at the same time s the total field?
Thank you for a great plugin! Fredrik
Hi Frederick, currently merge tags only update on page refresh (aka submitting from one page to the next). We have plans to add support for this to the plugin version. For now, you might consider this plugin.
This plugin is causing a 500 error with ajax-admin.php when using the partial entries option in gravity forms and an SSL certificate. It took me a while to troubleshoot it being your code. The URL of our form is https://iink.biz/endorsement, however I have removed your code because of the error.
Hi Ryan, we’re no longer making updates to this snippet to support new Gravity Forms features. This problem has been resolved in the plugin version of this snippet.
Hi David,
Thanks so much for this snippet (why isn’t this part of GFs core?!).
An issue I encountered —which seems to be present in the paid plugin demo— was with multi-select checkboxes. The input value is displayed in the preview instead of the friendly label value.
I can’t seem to track down the code used to send notifications in the core which sends the label value, any guidance would be most appreciated.
Regards, Jennifer
Hi Jennifer, we’re having a particularly busy period right now so we’ve having to limit our support to Gravity Perks customers. If you’re a Gravity Perks customer you can request support here.
Thanks for the reply. The company I work for is tiny, so we currently cannot make use of the Perks at a level that justifies buying.
I’ve since come up with a workaround/hack that solves the problem.
Cheers!
I’m using this Free Better Pre-Submission Confirmation plugin and it’s been working great. Recently when someone goes to the cart the bottom section has an overlay and the loading icon spins and spins…..goes nowhere. When I tested plugin conflicts, if I disable this plugin the cart works fine. If I enable it, it doesn’t anymore.
What can I do about this?
I know a better (?) supported version is included in Gravity Perks.
Will this take care of the problem?
If I do that, will the transition to using the paid plugin be seamless and work without modifications?
THANKS
Hi Mad Dog,
Upgrading to the perk-version is as simple as uninstalling the existing snippet and installing the Gravity Perks plugin + the GF Preview Submission perk. No additional configuration is required. If you find it still does not work, we’ll be happy to provide support via the support form.
Can the confirmation section be ajaxed?
Can you elaborate on what you mean?
I see in the screenshot that there is a page break. Can we use this without the page break so it’s all on one page? So the fields would automatically be populated. Including an image upload?
Not yet but if you’d like to commission this functionality, we’d love to discuss it. Get in touch.
Wow – thank you! I have a love/hate relationship with Gravity Forms and today I was definitely stuck on hate. Why wouldn’t this be a standard feature? Another indication that the developers do not use the product… In what real world scenario are you able to charge credit cards without a pre-submission checklist? Standard operating procedure for ordering a pizza even!
Your post saved the day. Much obliged!
Glad we help, Clay. 🙂
Hi David,
Could you please confirm that the plugin is working with the latest versions and is there support for me if I install it and have issues? Thanks
This was working, and since the last wordpress and plugin updates it isnt sending any data through after submitting. I can see preview but the data disappears on submit and i receive a blank form. Any ideas please? Thank you in anticipation.
Hi Tessa, this snippet is provided as is. We recommend the plugin version which is well supported. 🙂
https://gravitywiz.com/documentation/gp-preview-submission/
Hi David,
Could you please confirm that the plugin is working with the latest versions and is there support for me if I install it and have issues? Thanks
Yes and yes. 🙂
Worked! ’nuff said!
Glad we could help. 🙂
Make sure to check out the plugin-version of this too! It’s part of Gravity Perks which includes auto-updates right in your WordPress admin, insanely helpful support, and access to a suite of 25 (as of Jan 5, 2017; we keep adding more!) Gravity Forms add-ons.
Hello, I would like to know if you have as a user to download a pdf form before sending, because I can not make the user after filling some of his data in a form he can print and upload and then send! Thank you!
Hi Erick, I’m not sure I understand. Could you provide more details about what you’re trying to accomplish?
I have a form where the customer has 3 steps to complete a registration, the first step he will fill in his personal data, the second step I wanted to print in pdf in a pdf template I created the data he filled in the first step. .. I realized that I am generating the pdf for the client after it fully saves the form, but I want it to print in step 2 before saving the form … it’s possible? Thank you!
To better understand the form: http://www.vigilancia-to.com.br/testes/
It might be possible; however, this snippet does not handle any PDF generation. You might try asking the support teams at Gravity2PDF or GravityPDF.
Ok, tanks!
Okay so I’ve gotten the confirmation page to show up but don’t know how to display all the entries which the user has made. Specifically, in the HTML Block, I don’t know what to input so it displays my form.
By the way, I am doing this for my own business and setting it up entirely myself, I don’t know anything about coding etc and have been learning on the fly. I would really appreciate if you could help me out.
Kind Regards, Amir
Hi Amir, you would add an HTML field to your form and then include the desired field merge tags to the Content setting of that field. The snippet doesn’t automatically populate the merge tag button with all available merge tags; however, GP Preview Submission does. It’ll be easier to use if you’re new to WordPress, Gravity Forms or site management in general.
Hi there! I think this is the solution i’m looking for, but just curious. Do I still have to add the snippet to the functions.php file if I purchase and install the Gravity Perks plugin, or does the plugin do that automatically. Just want to confirm. Thanks!
Hi Che, you will not need this snippet once you have Gravity Perks and the GP Preview Submission perk installed. Plug and play. 🙂