Shipping
The Shipping element sets shipping methods and shipping fees in the form. The shipping fee is automatically included in the Total for a complete order amount calculation.
Basic
Label (required)
The label text displayed above or beside the shipping field (e.g., "Shipping Method", "Shipping Fee", "Logistics").
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
Display Mode
The way shipping methods are displayed. After choosing different modes, the configuration area below presents different content.
| Mode | Description | Suitable scenarios |
|---|---|---|
| Single | Single shipping method with a fixed shipping fee | Only one shipping method (e.g., flat-rate shipping) |
| Dropdown Select | Dropdown selection; users select a shipping method from a dropdown list | Multiple shipping methods; saves space |
| Radio Buttons | Radio buttons; users select a shipping method from a radio list | Few shipping methods; clear at a glance |
| Card Selection | Card selection; shipping methods appear as cards | Need to display logistics images and detailed information |
Settings under Single mode
When Single is selected, configure one fixed shipping method:
Price
The shipping fee amount (minimum 0). Set it via the +/- buttons or enter it directly in the number input box.
Free shipping
Setting Price to 0 gives free shipping — ideal for promotions or pickup scenarios.
Settings under Dropdown Select mode
When Dropdown Select is selected, configure a list of shipping methods for users to choose from:
Shipping Options
The core configuration of Dropdown Select mode, used to manage the selectable shipping methods. Each shipping method contains:
- Label: Shipping method name (placeholder: Method, e.g., "Standard Shipping")
- Value: Submitted value (placeholder: Value)
- Price: Shipping fee amount (minimum 0)
Each shipping method provides the following action buttons:
| Button | Description |
|---|---|
| ✓ (Default) | Set as the default selected method |
| 🗑 (Remove) | Delete this shipping method |
| ＋ (Add) | Add a new shipping method below |
| 📄 (Duplicate) | Duplicate this shipping method |
| ≡ (Sort) | Drag to adjust the order |
Click the Add Shipping Option button at the bottom to add a new shipping method.
Example
Common shipping method configurations:
- Standard Shipping — 15 (delivered in 3-5 days)
- Express Shipping — 30 (delivered in 1-2 days)
- Pickup — 0 (free shipping)
"Please select" option
Whether to display a "Please select" prompt item at the top of the dropdown list. This prompt item has no value, ensuring the user must actively select a shipping method.
Label Icon
An icon for the shipping field's label.
Settings under Radio Buttons mode
When Radio Buttons is selected, users choose a shipping method from a radio button list.
Shipping Options
Manages the selectable shipping methods, configured the same way as in Dropdown Select mode (Label / Value / Price + 5 action buttons + Add Shipping Option).
Options layout
The arrangement of the radio button shipping 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 shipping methods; use a multi-column layout when there are many shipping methods to save space.
Settings under Card Selection mode
When Card Selection is selected, shipping methods appear as cards, suited to scenarios that need to display logistics images and detailed information.
Shipping Options
Unlike other modes, Card Selection's shipping method list has an additional Image column to set an image for each shipping method (such as a logistics company logo):
- Label: Shipping method name (placeholder: Method)
- Value: Submitted value
- Price: Shipping fee amount (minimum 0)
- Image: Shipping method 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 Shipping Option).
Image suggestions
A logistics company logo or shipping illustration for each shipping method enhances the visual effect of Card Selection mode. We recommend using the same ratio and dimensions for all shipping method images.
Options layout
The arrangement of the shipping method 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 shipping method cards. Available options:
| Ratio | Description | Suitable scenarios |
|---|---|---|
| 1:1 Square (default) | Square | Logistics logos, icons |
| 4:3 Standard | Standard ratio | Traditional logistics images |
| 3:2 Classic | Classic ratio | DSLR camera photos |
| 16:9 Widescreen | Widescreen | Banner shipping images, vehicle images |
| 2:1 Panoramic | Panoramic | Wide display |
| 3:4 Portrait | Portrait | Vertical logistics images |
| 2:3 Portrait Tall | Tall portrait | Poster-style display |
Image ratio suggestions
Choose an appropriate ratio based on your shipping method image characteristics, and ensure all shipping methods use the same ratio to keep the card layout neat and uniform.
Included in total
Whether in Single, Dropdown Select, Radio Buttons, or Card Selection mode, the shipping fee is automatically included in the Total. Calculation formula: Total = Product price × Quantity + Shipping fee
Description
The description text for the shipping field, used to explain shipping-related information (e.g., "Delivered in 3-5 business days", "Free shipping nationwide").
Validate
The Shipping element supports only one validation rule:
| Validator | Description |
|---|---|
| Required | Required; checks whether the user has selected a shipping method |
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 shipping field
- Horizontal: The label appears to the left of the shipping field
- Hidden: The label is hidden
Icon position
The display position of the label icon (shown in Dropdown Select mode). 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 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
The elements required for a complete checkout flow:
| Element | Purpose | User action |
|---|---|---|
| Product | Select a product | Select the product to purchase |
| Quantity | Enter quantity | Enter the purchase quantity |
| Total | Auto-calculate total | Automatically displayed (no action required) |
| Shipping | Select shipping | Select the shipping method |
Complete checkout flow example
- Add a Product element and set the product name and price
- Add a Quantity element, link it to the Product, and set the quantity range
- Add a Shipping element and set the shipping methods and fees
- Add a Total element to automatically display the total amount (product + shipping)
- Configure payment settings to complete online payment collection