How to use “Product” field

After creating your form, you will be redirected to the Form Builder screen.

In the right-hand panel, open the Elements tab. Under Standard Fields in the Add Fields section, click on Product to add it to your form.

The Product field will be added to your form.

Edit Product Field Settings

Click the Edit (pencil) icon on the Product field to open the settings panel.

General Section

• Label: Defines the name of the Product field displayed on the form. Set the label for this field. This will be displayed to users.
• Description: Add additional information to help users understand the product

Product Settings: This section controls how products are displayed and how users interact with them in your form.

Display Mode: Choose how the product options are presented:

• Dropdown: Display products in a compact dropdown list
  • Show Quantity Field: Enable to allow users to input quantity
  • Show Price: Enable to display product prices
  • Show Description: Enable to display additional product details
• Radio Buttons: Show all products as selectable options
• Checkboxes: Allow users to select multiple products
• User Defined Amount: Allow users to enter their own amount

Products:

• Click Add Product to create products
• Each product typically includes:
  • Product Name
  • Price
  • Description (optional)

Required: Enable this option to make the field mandatory.

Appearance Section

• Placeholder: Enter hint text displayed inside the field before the user selects a value
• Field Colors: Customize the colors of the field
• Field Label Visibility: Control whether the field label is displayed
• Field Label Margin: Adjust spacing around the label
• Field Padding: Adjust spacing inside the field
• Field Margin: Adjust spacing outside the field
• Field Icon: Add an icon inside the field for better UI/UX
• Field Border Radius: Set the roundness of the field corners (in pixels)
• Custom CSS Class: Add a custom CSS class for advanced styling

Advanced Settings

• Default Value: Enter a default value for the field. This value will be pre-filled when the form loads.
• Visibility: Control who can see this field:

• Visible: Field is displayed to all users
• Hidden: Field is not visible to users but still exists in the form data
• Administrative: Field is only visible to admins.

Conditional Logic

     Enable this option to show or hide the field based on user input.

Duplicate the Product Field

Hover over the Product field. Click the Duplicate icon. A new Product field with the same settings will be created.

Reorder the Product Field

Drag and drop the field to change its position in the form.

Delete the Product Field

Click the Trash icon to remove the field.

Save Changes

Click Save Changes to apply updates.

Publish 

This option allows you to publish the form to your store, making it visible and usable for customers.