Skip to main content

How to showcase and sell products on your form using the Product field

The product field lets you display products with images, pricing, and a built-in cart directly on your form. Connect a payment gateway to send respondents to checkout, or use the price total in any custom flow.

The Product field lets you display individual products directly on your form — each with its own images, name, description, price, and quantity selector. Respondents can browse, add items to their cart, and proceed to checkout, all without leaving your form.

This is useful when you're collecting orders for physical or digital products, running a preorder, or letting people select from a set of services with different pricing.

💡 Want to set up the full order flow with online checkout? Check out how to create an order form with online payment.


How to add a Product field to your form

In your form editor, click Add field and find Product in the field list. You can add as many product fields as you need — one per product you'd like to showcase. Each field appears on the form as a card.

To control how the cards are laid out, you can adjust the form's width or each field's form width in the field settings. Narrower widths let you display multiple product cards side by side.


How to set up each Product card

Within each Product field, you can configure the following parameters:

Title and description

Add the product's name and a description directly on the card. This text appears alongside the images in the form.

Images

Click on the Product field to open the right-hand field settings panel. From there, you can upload one or more images to showcase the product. They appear within the card on your form — respondents can click an image to open a gallery with all product images, with the option to zoom in or out.

Unit price

Set the price per unit of this product. The currency is controlled by your form-wide currency setting — more on that in the next section.

Minimum and maximum amount

Control how many of this product a respondent can select in a single submission.

ℹ️ How the quantity limit works?

  • Minimum amount is the starting quantity added to the cart when the respondent clicks Add to cart. They can't go below it — if they try, the item is removed and the button resets.

  • Maximum amount is the upper limit they can select.

For example, if you set a minimum of 3 and a maximum of 5, clicking Add to cart immediately adds 3 to the cart. The respondent cannot decrease it to fewer than 3, and cannot add more than 5.

Custom labels and messages
You can customise the Add to cart button label, as well as the messages shown when a respondent tries to go below the minimum or above the maximum quantity.


How to set the currency for your Product fields

The currency for all product fields on a form is set in one place. Go to the form Settings panel on the right side of the editor and scroll down to the Form payment section.

There you'll find the Currency dropdown — whatever you select applies to all product fields on the form:


How does Formaloo calculate the total price from Product fields?

When you add a Product field to your form and publish it, Formaloo automatically creates a Price variable on your form (a system, read-only variable), so you don't need to set this up manually.

Every time a respondent selects a product and sets a quantity, the corresponding amount (unit price × quantity) is added to that Price variable.

If your form has multiple product fields, all selections are totalled up in the same variable:

ℹ️ The price variable's ID is always price. You can reference it anywhere in your form using @price — for example, on the ending page, in a confirmation email, or in a PDF template. This is useful when you want to show respondents their total at any point in the flow.


How to connect a payment gateway and accept payments on submission

If you'd like respondents to pay upon submitting the form, enable the Form with payment toggle in the Form payment section of your form settings. Once enabled, you'll be able to select a payment method from the dropdown.

ℹ️ Payment methods are set up separately, under your profile icon → Apps & integrations. Create your payment method there first, and it will appear in the payment method dropdown in your form settings.

Once a payment method is connected, respondents are redirected to the checkout page on submission. The total from the Price variable is passed directly to the checkout so they can complete their purchase.

💡 Want to customise the page respondents see after paying?

💡 Want to offer subscription-based payments for a product?

Enable the Stripe subscription (beta) toggle within the Product field's settings. This requires Stripe to be connected as your payment method. Check out how to create a subscription-based payment.


How to use Product field without connecting a payment gateway

You don't have to connect a payment integration to make use of Product fields or Price variable.

If you're building a preorder form, a quote calculator, or any flow where you want to show the total without processing a payment, you can still use Product fields and the Price variable to calculate and display the cost.

Simply pipe @price wherever you need it — on the ending page, in a confirmation email, or in a PDF template — and respondents will see their calculated total without proceeding to the actual payment.


How to add extra costs or options on top of your Product fields

If your form includes additional fees or options alongside products — such as packaging choices, shipping, or any kind of extras — you can factor those into the total price as well.

Unlike Product fields, amounts from other field types (e.g., choice fields or dropdowns) aren't added to the price variable automatically. You'll need to set up custom rules in Advanced logic: when a specific option is selected, add the corresponding amount to the Price variable.

From there, it works the same way — the amount gets included in the total, passed to checkout if payment is connected, and can be piped with @price anywhere in the form.

💡 For a detailed walkthrough of how this works, check out how to calculate the additional price in your order form.


How to control stock and availability within your form

The Product field doesn't currently have a built-in stock or availability limit. A few options can help if you need to control how many orders you accept:

  • Maximum quantity in Product field
    Limits how many of a specific product a single respondent can select per submission.

  • Maximum form responses
    Closes the form automatically once a set number of submissions is reached, regardless of which products were selected.

  • Reservation and availability limits
    If you're using single choice or dropdown fields alongside your product fields, those field types support built-in availability limits.


Looking for a different way to collect payment?

If collecting payment based on product or option selections isn't what you're after, and you'd like to charge a fixed amount with every submission regardless of what was filled in, you can set a fixed payment amount on your form instead.

This works well for collecting donations, event or workshop registration fees, membership fees, application fees, or consultation bookings — any situation where everyone pays the same amount.


Bottom line

The Product field takes care of product display, cart management, and pricing in one place — and ties directly into Formaloo's payment and piping features. Once your products are set up, the Price variable handles the math automatically, whether you're routing respondents to checkout or using the total in a follow-up email or ending page.

Did this answer your question?