Create an order form — with product selection and total

Order forms become complex as soon as products exist in variants — size, color, version. A flat list with every combination as its own option becomes unmanageable. Better is a cascade: choose product first, then variant. Conditional logic shows the follow-up question depending on the chosen product.

For catering or modular orders, the bundle pattern works: a main product (e.g. "lunch menu"), below it optional extensions (side, drink, dessert). The calculation engine sums automatically and shows the total live. Anyone seeing the price only after clicking "order" loses conversion.

A clean data structure behind the scenes matters. Every variant needs a unique SKU or product ID, otherwise later evaluation becomes chaos. Anyone forwarding orders to inventory or to a third party (e.g. via webhook to an ERP) must name fields consistently — not "size" sometimes with "big", sometimes with "L". A mapping table helps replace free text with standardized values.

Quantity fields look trivial but are not. Three traps lurk: an open number field allows entries like "1000" or "-5", a stepper without maximum leads to unrealistic orders, and missing step sizes (e.g. "0.5 pieces") look unprofessional. Solution: define min/max, step size matching the product (1 for piece goods, 0.5 for kilograms), preset a default value.

Stock is the second critical point. Selling without availability check risks overbooking — and cancellations cost more than lost orders. For simple cases, a maximum per variant is enough; for serious e-commerce, a real stock connection (via webhook to Shopify, WooCommerce or own ERP) is mandatory. This is currently still on the roadmap in many form builders.

For time-limited campaigns (pre-sale, crowdfunding), a hard limit with live display pays off: "23 of 100 still available". A scarcity indicator clearly boosts conversion, but it must be real — manipulative fake counters get noticed by buyers and destroy trust permanently.

Shipping options need clarity, not variety. Three options usually suffice: standard, express, self-pickup. More confuses — studies show more than five shipping variants lower conversion (choice overload). Costs must be transparent, ideally as a second column right next to the option.

The same applies even more strictly to payment options. SEPA direct debit, credit card, PayPal — these three cover about 85 percent of the German market. Apple Pay and Google Pay add value for mobile-first audiences. Bank transfer as a fallback makes sense but should never be the only option, as it costs conversion massively.

Pro tip: show shipping and taxes early, not only on the final page. Hidden extras are conversion killer number one in e-commerce — per Baymard study the main reason for 49 percent of all cart abandonments. A dynamic total block that updates shipping and VAT live builds trust.

After a successful order, two documents matter: the order confirmation (immediately after receipt, informative) and the invoice (legally binding, with all mandatory information). Both should be triggered automatically; manual sending does not scale and leads to delays.

The order confirmation as email contains: order number, all items with price, shipping address, expected delivery date and a contact path for questions. It is not the invoice — that is often confused. The invoice comes either as PDF attachment in the same mail or as a separate mail after shipping.

Mandatory information for German invoices (§ 14 UStG): full name and address of seller and buyer, tax number or VAT ID, invoice number (sequential, unique), invoice date, delivery or service date, service description with quantity and unit price, tax rate and tax amount. Anyone working with Stripe can auto-generate many of these fields — manual PDF creation is error-prone.

Stripe has established itself as the de facto standard for payments in SaaS and e-commerce — for good reason. Card data never lands on your server (PCI compliance stays with Stripe), integration takes hours not weeks, and webhooks deliver every status change in real time.

For order forms, Stripe Checkout is the easiest path: you send the order with amounts to the Stripe API, the user is redirected to a Stripe-hosted payment page, and after completion they return to your confirmation page. Cards, SEPA, Apple Pay and Google Pay are included out of the box — no extra work per method.

Practical tips: idempotency keys prevent double charges on click-repeat. Always verify webhook signatures, otherwise they are spoofable. Use test mode consistently — Stripe provides test card numbers with which you can cleanly play through all scenarios (success, 3D Secure, declined amounts, chargebacks). Only go live after a green test suite.