How to add a live order summary to gravity forms

Recently I had a customer who needed to show a live summary while filling out their form. Gravity forms does not have a build-in solution for this so I had to come up with a custom one and so behold… the groundbreaking Live summary for gravity forms add-on was born. It is a “simple” plugin build on the official gravity forms add-on framework and it will do just what the title says it would do.

Features list

Adds a responsive live summary next to any gravity form (it will show under the form on mobile devices)
Supports conditional logic
Supports calculations
Supports all GF currencies
Shows total price of all selected products
Translation ready (since v1.0.5)

How do I enable this?

1. Download and install the free plugin

Download the plugin for FREE from or search for it in the wp dashboard. The name of the plugin is Gravity Forms Live Summary.

2. Activate the summary for your form

By default the summary is turned off for every form. If you want to turn it on then simply open the form settings and check the checkbox that says “Turn on Summary”.

You can also control the visibility of the total at the bottom of the summary. This will be shown by default if there are (any type) of products in the form (and the summary was switched on)

3. Choose which fields to show in the summary

Next you simply have to select all the fields that you want to show in the summary. Simply navigate to the general settings of each field and check the “show in summary” checkbox.


  • The summary currently uses the product label as label in the summary. Longer field labels will become multiple lines in the summary. In the near future it will be possible to define a different label to show in the summary.
  • The summary looks best on a full width page template.

CSS: giving the summary a better look

The plugin adds a flexbox around the form and the summary. The class of this div is “gotrgf_form_container”. Inside we have two children.

  • “gotrgf_form_wrapper” is placed around the form and can be used to change or remove the border that is automatically added by this plugin. As an example you can find the css snippet below to turn it off.

Need help?

I provide free support for this add-on. Leave a comment or visit the support form and let me know how I can help you.


Have a suggestion to make this plugin better? Or you found a bug? Or just want to share something? Please reach out by leaving a comment below or visiting the support form.

Notify of
Inline Feedbacks
View all comments
Scroll to Top