Side Summary Configuration

The Live Summary form settings have been re-organized into tabs since v2.0. Below we will talk about every option and what it does.

General

  • Enable/Disable Side Summary
    Toggle this on to display a side summary next to your form
  • Enable/Disable Sticky summary
    Toggle this on to make the side summary sticky on scroll. This setting does not apply to mobile devices.
  • Configure visible fields and their order
    Use the drag and drop tool to select your fields and also put them into the desired order. It is also supported to click on the field to move it to the other column.

    Select All button: Select all the fields of the form in the order as they appear in the form
    De-select All button: Deselect all fields. This also resets them to the original order in the form.

    Note: Quantity and option fields do not appear in the available fields section. These types of fields are always linked to a product so just select your product and any linked options or quantity fields will be automatically added.
  • Side of Summary
    Change the side of the form where you want to see the summary. This can be either Left or Right.
  • Background Settings
    This can be used to set a background behind the form and the summary and any space in between. Options such as Color and image are supported. When using the image option, you will need to copy the complete url into the settings box.
  • Group all product in a table
    When this setting is enabled, all products that are selected to show in your summary will automatically be added into a table at the end of your summary so below all the other fields but above the total section. This gives a really clear overview of all products and total price to the user. Read more about this feature on the following page: https://geekontheroad.com/documentation/live-summary-for-gravity-forms/grouped-products-table
  • Enable fontawesome 6 Free
    Turn this setting on to load the free fontawesome 6 library. This enables you to use fontawesome icons before each line in the summary. Turning this setting on is only necessary if your theme does not already load fontawesome. If you don’t know whether your theme loads fontawesome already, leave this setting turned off and see if the icons appear. If not then come back and turn this on. Still no icons after enabling this setting? Reach out to support

    How to use the icons? Go to the field settings of the field that needs to show an icon in front of it. On the field, go to the ‘Live summary’ tab and add the following CSS class: lsfa-free followed by any of the free fontawesome icons. For example the combination of lsfa-free fa-user will display a user icon.

Title

  • Enable/disable the Side Summary title
    Use this toggle to enable or disable the title that appears above the gravity summary.
  • Custom summary title
    Here you can easily change the text of the title. By default it is set to ‘summary’, change it into anything else here.
  • Font Settings
    Control the font used for the Title. Configure font-family, font-size, font-unit (px,%,em,rem,pt,in), font-color, text-align, text-weight.
  • Background Settings
    Configure the background of the title section.
    Possible options are background color and background image. When choosing background image, you can also set the background-fill, -position and repeat.
  • Border Settings
    Configure the border of the title section.
    Possible options are the border style, border color, border width and border radius.
  • Padding Settings
    Set the padding of every side of the summary. Unit options are px,%,em,rem,pt,in

Summary Lines (=the fields)

  • Nothing Selected text
    Use this text box to change the default nothing selected text.
  • Font Settings
    Control the font used for the lines in the summary. Configure font-family, font-size, font-unit (px,%,em,rem,pt,in), font-color, text-align, text-weight.
  • Background Settings
    Configure the background of the summary section.
    Possible options are background color and background image. When choosing background image, you can also set the background-fill, -position and repeat.
  • Border Settings
    Configure the border of the entire lines section.
    Possible options are the border style, border color, border width and border radius.
  • Padding Settings
    Set the padding of every side of the lines section. Unit options are px,%,em,rem,pt,in. This is not for each line but instead around all the lines as a whole.

Totals

  • Show total in summary
    Turn this toggle on to display a total below the summary. This total will appear if any product is selected in your form. If you want to change this default behavior and display the total even though no product was selected yet then use the JS filter: gotrgf_show_zero_total
  • Change the total label
    Use the textbox below the toggle to overwrite the default “total” label.
  • Enable/disable subtotal section
    Turn this toggle on to display a subtotal in the summary. A subtotal is the calculation of all products before adding any shipping, coupons, taxes or discounts.
  • Change the subtotal label
    Use the textbox below the toggle to overwrite the default “subtotal” label
  • Font Settings
    Control the font used for the total section of the summary. Configure font-family, font-size, font-unit (px,%,em,rem,pt,in), font-color, text-align, text-weight.
  • Background Settings
    Configure the background of the total section.
    Possible options are background color and background image. When choosing background image, you can also set the background-fill, -position and repeat.
  • Border Settings
    Configure the border of the total section.
    Possible options are the border style, border color, border width and border radius.
  • Padding Settings
    Set the padding of every side of the total section. Unit options are px,%,em,rem,pt,in. This is not for each line but instead around all the lines as a whole.

Form Container

  • Font Settings
    Control the font used for form itself. Configure font-family, font-size, font-unit (px,%,em,rem,pt,in), font-color, text-align, text-weight.
  • Background Settings
    Configure the background of the form section.
    Possible options are background color and background image. When choosing background image, you can also set the background-fill, -position and repeat.
  • Border Settings
    Configure the border of the gravity form section.
    Possible options are the border style, border color, border width and border radius.
  • Padding Settings
    Set the padding of every side of the form section. Unit options are px,%,em,rem,pt,in. This is not for each line but instead around all the lines as a whole.

Reset

On this tab is only a reset button. When used it will reset all live summary settings to their defaults. This will also reset the selected fields for the side summary to nothing. This reset button does not apply to any Live summary fields you may have in the form.
Use with caution as settings cannot be retrieved.

Scroll to Top