Bestellformular erstellen — mit Produktauswahl und Summe

Bestellformulare werden komplex, sobald Produkte in Varianten existieren — Größe, Farbe, Ausführung. Eine flache Liste mit jeder Kombination als eigene Option wird unübersichtlich. Besser ist eine Kaskade: erst Produkt wählen, dann Variante. Conditional Logic blendet die Folgefrage abhängig vom gewählten Produkt ein.

Für Catering oder modulare Bestellungen funktioniert das Bundle-Pattern: ein Hauptprodukt (z.B. "Mittagsmenü"), darunter optionale Erweiterungen (Beilage, Getränk, Dessert). Die Calculation Engine summiert automatisch und zeigt den Gesamtpreis live. Wer den Preis erst nach Klick auf "Bestellen" sieht, verliert Conversion.

Wichtig ist die saubere Datenstruktur dahinter. Jede Variante braucht eine eindeutige SKU oder Produkt-ID, sonst wird die spätere Auswertung Chaos. Wer Bestellungen ans Lager oder an einen Drittanbieter weiterleitet (etwa per Webhook an ein ERP), muss Felder konsistent benennen — nicht "Größe" mal mit "groß", mal mit "L". Eine Mapping-Tabelle hilft, Freitext durch standardisierte Werte zu ersetzen.

Mengenfelder wirken trivial, sind es aber nicht. Drei Fallen lauern: ein offenes Zahlenfeld erlaubt Eingaben wie "1000" oder "-5", ein Stepper ohne Maximum führt zu unrealistischen Bestellungen, und fehlende Schrittweiten (z.B. "0.5 Stück") wirken unprofessionell. Lösung: Min/Max definieren, Schrittweite passend zum Produkt (1 für Stückgut, 0,5 für Kilogramm), Standardwert vorbelegen.

Lagerbestand ist der zweite kritische Punkt. Wer ohne Verfügbarkeits-Prüfung verkauft, riskiert Überbuchung — und damit Stornierungen, die teurer sind als verlorene Bestellungen. Für einfache Cases reicht ein Maximum pro Variante; für ernsthaftes E-Commerce ist eine echte Stock-Anbindung (per Webhook an Shopify, WooCommerce oder ein eigenes ERP) Pflicht. Aktuell ist das in vielen Form-Buildern noch Roadmap-Thema.

Für zeitlich begrenzte Aktionen (Vorverkauf, Crowdfunding) lohnt sich ein hartes Limit mit Live-Anzeige: "Noch 23 von 100 verfügbar". Die Knappheits-Anzeige steigert Conversion deutlich, aber sie muss echt sein — manipulative Fake-Counter werden von Käufern bemerkt und zerstören Vertrauen nachhaltig.

Versandoptionen brauchen Klarheit, nicht Vielfalt. Drei Auswahlmöglichkeiten reichen meist: Standard, Express, Selbstabholung. Mehr verwirrt — Studien zeigen, dass mehr als fünf Versandvarianten die Conversion senken (Choice Overload). Die Kosten müssen transparent sein, ideal als zweite Spalte direkt neben der Option.

Für Zahlungsoptionen gilt dasselbe in noch strengerer Form. SEPA-Lastschrift, Kreditkarte, PayPal — diese drei decken etwa 85 Prozent des deutschen Marktes ab. Apple Pay und Google Pay lohnen sich bei Mobile-First-Zielgruppen zusätzlich. Vorkasse per Überweisung als Fallback ist sinnvoll, sollte aber nie die einzige Option sein, da sie Conversion massiv kostet.

Pro-Tipp: Versandkosten und Steuern frühzeitig zeigen, nicht erst auf der letzten Seite. Versteckte Zusatzkosten sind der Conversion-Killer Nummer eins im E-Commerce — laut Baymard-Studie der Hauptgrund für 49 Prozent aller Warenkorb-Abbrüche. Ein dynamischer Summen-Block, der Versand und MwSt. live aktualisiert, schafft Vertrauen.

Nach erfolgreicher Bestellung sind zwei Dokumente wichtig: die Bestellbestätigung (sofort nach Eingang, informativ) und die Rechnung (rechtsverbindlich, mit allen Pflichtangaben). Beides sollte automatisch ausgelöst werden, manuelle Versendung skaliert nicht und führt zu Verzögerungen.

Die Bestellbestätigung als E-Mail enthält: Bestellnummer, alle Positionen mit Preis, Versandadresse, voraussichtliches Lieferdatum und einen Kontaktweg bei Fragen. Sie ist nicht die Rechnung — das wird oft verwechselt. Die Rechnung kommt entweder als PDF-Anhang derselben Mail oder als separate Mail nach Versand.

Pflichtangaben für deutsche Rechnungen (§ 14 UStG): vollständiger Name und Adresse von Verkäufer und Käufer, Steuernummer oder USt-ID, Rechnungsnummer (fortlaufend, eindeutig), Rechnungsdatum, Liefer- oder Leistungszeitpunkt, Leistungsbeschreibung mit Menge und Einzelpreis, Steuersatz und Steuerbetrag. Wer mit Stripe arbeitet, kann viele dieser Felder automatisiert generieren lassen — manuelle PDF-Erstellung ist fehleranfällig.

Stripe hat sich als De-facto-Standard für Zahlungen im SaaS- und E-Commerce-Bereich etabliert — aus gutem Grund. Die Karten-Daten landen niemals auf Ihrem Server (PCI-Compliance bleibt bei Stripe), die Anbindung dauert Stunden statt Wochen, und Webhooks liefern jeden Status-Wechsel in Echtzeit.

Für Bestellformulare ist Stripe Checkout der einfachste Weg: Sie senden die Bestellung mit Beträgen an die Stripe-API, der Nutzer wird zu einer Stripe-gehosteten Zahlungsseite weitergeleitet, und nach Abschluss kommt er auf Ihre Bestätigungsseite zurück. Karten, SEPA, Apple Pay und Google Pay sind out-of-the-box dabei — kein zusätzlicher Aufwand pro Methode.

Pro-Tipps für die Praxis: Idempotenz-Keys verhindern doppelte Belastung bei Klick-Wiederholung. Webhooks immer signieren prüfen, sonst sind sie spoofbar. Test-Modus konsequent nutzen — Stripe stellt Test-Kartennummern bereit, mit denen Sie alle Szenarien (Erfolg, 3D-Secure, Fehlbeträge, Chargebacks) sauber durchspielen können. Erst nach grüner Test-Suite live schalten.