Product Basket: Add a Product Catalog and Cart to Any Form

What Is a Product Basket?

A product basket - sometimes called a product field or product list - is a form element that shows a catalog of products inside a form and lets the respondent add them to a cart. Customers see product cards with images and prices, choose options such as size or colour, set a quantity, and the form works out the order total.

In FormNX that element is called Products, and its cart-wide settings live under Basket Settings. Drag it onto any form and it brings three things with it: your catalog, a cart, and the checkout maths - tax, shipping, discount codes and the final amount to charge - turning the form into a simple online store. It sits alongside the rest of your form, so the same submission captures the order and the customer's name, email, delivery address and notes.

Product Basket vs a Dropdown and a Calculation Field

Before a dedicated product element existed, the standard way to build an order form was a dropdown for the item, a number field for the quantity, and a calculation field to multiply one by the other. That approach still works well for simple pricing. Here is what changes when the catalog gets real:

The short version: if you need a total from a few answers, a calculation field is the lighter tool. If the form looks like a shop, use Products.

How Product Variants Work

A variant group is the type of choice - Size, Colour, Flavour, Duration. The options are the choices inside it. Add more than one group and FormNX generates a row for every possible combination automatically. A T-shirt with Size (Small, Medium, Large) and Colour (Black, White) produces six:

Each row carries two controls. Set Price gives that exact combination its own price - this is how a 2XL costs more than a small, or a premium colourway carries a surcharge. Combinations you leave switched off simply use the product's base price, so you only touch the ones that differ. Out of Stock blocks that one combination while every other combination of the same product stays on sale.

Combinations multiply quickly - three sizes by three flavours by two packaging options is already eighteen rows to price. Start with the groups customers genuinely choose between and add more only when you need them.

Stock Status and Order Limits

Two settings keep you from selling what you cannot deliver. Out of Stock can be switched on for a whole product or for one variant combination - a single size option that has sold out, say; the item stays visible with its images and description intact, clearly marked, and cannot be added to the cart. Because nothing is deleted, turning it back on when stock returns is one click rather than a rebuild.

Maximum units one person can order caps the quantity a single customer can put in their cart for that product. Set it to 2 for a one-per-household style offer, to 4 for a ticket cap, or to 0 for unlimited. Marking something out of stock does not affect orders you have already received - it only stops new ones from the moment you save.

Tax, Shipping and Free-Shipping Thresholds

Basket Settings apply to the whole cart rather than to individual products. Turn on tax and enter your rate, then pick the mode that matches how you quote prices: added on top of the total calculates the percentage on the cart total and adds it, so the final amount is higher than the sum of the product prices; already included in prices leaves the total alone and simply shows customers how much of it is tax.

Turn on shipping to add a flat delivery charge to every order, and set free shipping over to a value above which delivery becomes free. Leave that field empty and shipping is always charged. A free-shipping threshold is one of the few settings on this page that changes customer behaviour rather than just recording it - a shopper one item short of free delivery will often add the item.

Discount Codes That Carry Their Own Rules

Switch on discount codes - coupon or promo codes, if you prefer - and a code entry box appears at checkout. Each code you create has four parts: the code itself - type your own, such as WELCOME26, or generate a random one - the discount value, the type (percent takes that percentage off the total, fixed takes that exact amount off), an optional usage limit capping how many times it can be redeemed, and an optional expiry date after which it stops working.

Custom codes are easier to promote; random codes suit one-off, single-customer offers. You can run several at once, each with its own limits, and the total updates the instant a customer applies one.

A Worked Example: What the Customer Actually Pays

Here is how the basket adds up a real order, in the order FormNX applies each step. A customer buys two Medium/Black T-shirts at 20.00 and one 2XL/Black at 24.00 (the 2XL combination has its own price), enters the code SUMMER10 for 10% off, and your basket is set to 20% tax added on top, 5.00 shipping, free over 50.00.

Three details worth knowing. The discount is taken off the subtotal first, and tax is calculated on the discounted amount. The free-shipping threshold is checked against that same discounted amount - so a code can tip an order into free delivery, or out of it. And shipping is never taxed. If your tax mode were already included in prices instead, the total would stay at 57.60 and the tax line would simply show 9.60 of it as tax.

One, Two or Three Column Layouts

You choose which layouts respondents can browse in. Select more than one and they get a layout switcher on the form; select a single layout and products always appear that way with no switcher shown. One column suits a handful of premium items where the image and description do the selling, two columns is the balanced default for most catalogs, and three columns lets customers scan a longer list quickly. Mobile screens stack products regardless, so small screens need no separate thought. Clicking any product card opens its full details, variant options, quantity selector and add-to-cart button.

Taking Payment for the Cart Total

The Products field is included on every Pro plan. It works out what to charge; your payment form settings collect it. Connect Stripe, PayPal or Razorpay - you can offer more than one on the same form so the customer picks - and the cart total, after tax, shipping and any discount, is charged as a single payment. FormNX takes a 0% platform fee, so only your payment provider's own processing fees apply.

Before you share the form, place one test order yourself: check that every product shows the right price and images, that variant combinations charge what you expect, that tax and shipping appear correctly, that your discount code reduces the total as intended, and that the payment step completes. Five minutes of testing costs less than refunding a mispriced order.

Where Your Orders Land

Each order arrives with the rest of your form responses in your submissions list, showing the products, variants and quantities chosen next to the customer's contact and delivery details - the order and the customer record stay together. On paid plans FormNX can also generate a PDF of each order, which works as a receipt or a picking slip and can be attached to the confirmation email the customer receives.

Need the catalog to appear only for some respondents? Conditional logic shows or hides the Products field based on an earlier answer - ask which region someone is in, and reveal the catalog only once they pick a region you deliver to.

Where the Products Field Fits

For the full walkthrough of every setting - the General, Products and Basket Settings tabs, building variant groups, and the discount code panel - see the Products field documentation.

If you are building a complete ordering workflow rather than adding a catalog to an existing form, start from the order form builder, which covers the whole process from customer details through to payment and order tracking. For a ready-made starting point, browse the e-commerce form templates and order form templates.