Skip to content

Total

The Total element automatically calculates and displays the total order amount. It is a read-only, auto-calculated field that computes the total from the price of Product and the Quantity in the form. The user does not need to enter it manually.

Basic

Label (required)

The label text displayed above or beside the total amount (e.g., "Total", "Grand Total", "Order Amount").

Unique Name (required)

Identifies this form element internally within the system. The name is auto-generated by default; you can also modify it manually as needed. Naming rules:

  • May only contain lowercase letters, numbers, and underscores
  • Must start with a letter

Advanced

Unique ID

The element's unique ID, auto-generated by the system, read-only and not editable.

Show in email

Whether the total amount appears in the email notifications (enabled by default). When disabled, the total amount is excluded from the submission email.

Auto-calculated field

Total is an auto-calculated field that requires no user input. The system calculates the order total amount automatically from the following elements:

Calculation formula: Total = Product price × Quantity + Shipping fee

Usage essentials

  • Total automatically associates with the Product and Quantity fields in the form; no manual association is required
  • Make sure Product and Quantity elements have been added to the form, otherwise Total cannot be calculated correctly
  • The Total field is read-only on the front end and cannot be modified by the user

Using e-commerce elements together

The elements required for a complete checkout flow:

ElementPurposeUser action
ProductSelect a productSelect the product to purchase
QuantityEnter quantityEnter the purchase quantity
TotalAuto-calculate totalAutomatically displayed (no action required)
ShippingSelect shippingSelect the shipping method

Complete checkout flow example

  1. Add a Product element and set the product name and price
  2. Add a Quantity element, link it to the Product, and set the quantity range
  3. Add a Total element to automatically display the total amount
  4. If shipping is needed, add a Shipping element to set the shipping fee
  5. Configure payment settings to complete online payment collection

Next steps

Built with VitePress