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 29 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 ) { | |
| if( ! class_exists( 'GFFormDisplay' ) ) { | |
| return $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 suite of 28+ essential add-ons for Gravity Forms with support you can count on.
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