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 and read-only.

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 links automatically to the Product and Quantity fields in the form; no manual setup is required
  • Make sure the 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