Demo: Grouped Products

The below form does not use the side summary. Instead it uses the Live summary Field to display a summary just before the submit button to allow users to verify their details easily.

The below summary is divided into sections. For this section fields are used and some of those are hidden (Travel dates and airport information) in the form but displayed in the summary while other sections such as travel information is omitted from the summary.

Additionally font awesome is used to display icons in the sections of the summary for the extra visual touch.

The products are all grouped into a table at the bottom of the summary. This table can have up to 4 columns which can be selected in the settings. Available columns are: label, qty, unit price and total price.

The form also uses a tax field added by GP Ecommerce. The subtotal row in the summary is displayed first to indicate the subtotal of the products and its options. Then the tax is displayed followed by the grand total (subtotal + tax)

Feature Overview / Key Highlights

  • Total Calculation: Display the total cost of all selected products at the bottom of the summary for clear pricing information.
  • Product and options breakdown: When using products and options, control how the price breakdown will appear. Label only, label and prices or only the total
  • Order fields by section fields: Utilize section fields in your form and the fields below it will appear like that in the summary.
  • Customizable Section Titles: Summary section titles will default to the section titles values but can be customized if needed.
  • Font Awesome Icons: Add Font Awesome icons to enhance visual appeal and improve section readability.
  • GP Ecommerce Support: Fully compatible with tax and discount fields added by the Gravity Perks Ecommerce plugin.
  • Preview before submission: Use the Live Summary Field just before the submit button to provide users with a clean form preview before submission.
  • Grouped products in table: It is possible to group all products throughout the form into a clear table with configurable columns: Label, QTY, unit price and total price.

Try the demo

Instructions

The form is already pre-populated for your convenience. Scroll down to see how the Live summary field displays a clear overview of the entered data nicely ordered by sections.

The products are displayed in a table with configurable columns (label, QTY, unit price and total price) and additionally the product breakdown is shown for the products with options.

Passenger Information

Passenger Name

Travel Information

MM slash DD slash YYYY
MM slash DD slash YYYY
Flight Package
Addons
$0.00
This field is hidden when viewing the form

Airports

This field is hidden when viewing the form

Dates

Summary

Backend Settings

Take a look behind the scenes. Below are screenshots of the admin settings panel so you can see exactly how this add-on integrates into Gravity Forms.

Related Resources