Product
The Product element adds purchasable products to a form and is the core element of FormBuilder's e-commerce features. After a user selects a product, combine it with Quantity, Total, and other elements for a complete checkout flow.
Basic
Label (required)
The label text displayed above or beside the product field (depending on the Label position setting).
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
This name references this field in email templates.
Display Mode
The way products are displayed and selected. After choosing different modes, the product configuration area below presents different content.
| Mode | Description | Suitable scenarios |
|---|---|---|
| Single Product | Single product; directly displays one fixed product | Quick ordering of a single item |
| Dropdown Select | Dropdown selection; users select a product from a dropdown list | Many products; saves space |
| Radio Buttons | Radio buttons; users select a product from a radio list | Few products; clear at a glance |
| Card Selection | Card selection; products appear as cards for users to choose | Need to display product images and detailed information |
Settings under Single Product mode
When Single Product is selected, configure the information for a single product:
Product Name
The display name of the product (e.g., "Premium Membership Plan").
SKU
The product's SKU code (e.g., "PROD-001"), used for inventory management and order tracking.
Price
The price of the product (minimum 0). Set it via the +/- buttons or enter it directly in the number input box.
Currency format
The specific currency symbol and format of the price are determined by the form's payment settings. Make sure the price is set accurately, as it directly affects the Total calculation.
Settings under Dropdown Select mode
When Dropdown Select is selected, users choose a product from a dropdown list.
Products
The core configuration of the multi-product mode, used to manage the list of selectable products. Each product contains:
- Name: Product name
- SKU: Product code
- Price: Product price (minimum 0)
Each product provides the following action buttons:
| Button | Description |
|---|---|
| ✓ (Default) | Set as the default selected product |
| 🗑 (Remove) | Delete this product |
| ＋ (Add) | Add a new product below |
| 📄 (Duplicate) | Duplicate this product |
| ≡ (Sort) | Drag to adjust the product order |
Click the Add Product button at the bottom to add a new product.
Show Price
When enabled (enabled by default), price information appears next to the product options, so users can see each product's price directly.
"Please select" option
Whether to display a "Please select" prompt item at the top of the dropdown list (enabled by default). This prompt item has no value, ensuring the user must actively select a product.
Please select text
The display text for the "Please select" prompt item (e.g., "Please select a product").
Label Icon
An icon for the product field's label.
Settings under Radio Buttons mode
When Radio Buttons is selected, users choose a product from a radio button list.
Products
Manages the list of selectable products, configured the same way as in Dropdown Select mode (Name / SKU / Price + 5 action buttons + Add Product).
Show Price
When enabled (enabled by default), price information appears next to the product options.
Options layout
The arrangement of the radio button product options. Available options:
- Inline: Options arranged in a single row
- One option per line: Each option on its own line
- 2 columns ~ 10 columns: Options arranged in a 2-10 column grid
Layout suggestions
Use Inline or One option per line when there are few products; use a multi-column layout when there are many products to save space.
Settings under Card Selection mode
When Card Selection is selected, products appear as cards, suited to scenarios that need to display product images and detailed information.
Products
Manages the list of selectable products. Unlike other modes, Card Selection's product list has an additional Image column to set an image for each product:
- Name: Product name
- SKU: Product code
- Price: Product price (minimum 0)
- Image: Product image (click the image button to select an image file)
The action buttons are the same as in other modes (default value/delete/add/duplicate/sort + Add Product).
Image suggestions
Clear product images greatly enhance the visual effect and purchase conversion rate of Card Selection mode. We recommend using the same ratio and dimensions for all product images.
Show Price
When enabled (enabled by default), price information appears on the product cards.
Options layout
The arrangement of the product cards. Available options:
- Inline: Cards arranged in a single row
- One option per line: Each card on its own line
- 2 columns ~ 10 columns: Cards arranged in a 2-10 column grid
Image Ratio
The display ratio of the image in the product cards. Available options:
| Ratio | Description | Suitable scenarios |
|---|---|---|
| 1:1 Square (default) | Square | Product thumbnails, icons |
| 4:3 Standard | Standard ratio | Traditional product photos |
| 3:2 Classic | Classic ratio | DSLR camera photos |
| 16:9 Widescreen | Widescreen | Banner product images, video covers |
| 2:1 Panoramic | Panoramic | Wide display |
| 3:4 Portrait | Portrait | Vertical product images |
| 2:3 Portrait Tall | Tall portrait | Poster-style display |
Image ratio suggestions
Choose an appropriate ratio based on your product image characteristics, and ensure all products use the same ratio to keep the card layout neat and uniform.
Description
The description text for the field, used to introduce product-related information (such as specifications, features, or promotional notes).
Validate
The Product element supports only one validation rule:
| Validator | Description |
|---|---|
| Required | Required; checks whether the user has selected a product |
Styles
Label position
The display position of the label. Available options:
- Inherit: Uses the global configuration in Form style settings
- Vertical: The label appears above the product
- Horizontal: The label appears to the left of the product
- Hidden: The label is hidden
Icon position
The display position of the label icon (shown in Dropdown Select / Radio Buttons / Card Selection modes). Available options:
- Inherit: Uses the global configuration
- Start: The icon is on the left
- End: The icon is on the right
Data
Show in email
Whether this product field appears in the email notifications (enabled by default). When disabled, this field is excluded from the submission email.
Advanced
Unique ID
The element's unique ID, auto-generated by the system, read-only and not editable.
Using e-commerce elements together
Product is typically used together with the following elements for a complete checkout flow:
| Element | Purpose |
|---|---|
| Product | User selects the product to purchase |
| Quantity | User enters the purchase quantity |
| Total | Automatically calculates the order total (Product price × Quantity) |
| Shipping | Sets shipping method and shipping fee |
Complete checkout flow example
- Add a Product element and set the product name and price
- Add a Quantity element to let the user enter a quantity
- Add a Total element to automatically calculate the total amount
- If shipping is needed, add a Shipping element to set the shipping fee
- Configure payment settings to complete online payment collection