Storefront Integration

Wie ein erstelltes Formular in den sichtbaren Bereich deines Shops kommt, hängt vom Formulartyp ab.

Platzierungs-Möglichkeiten

Möglichkeit	Wann nutzen?
CMS-Element „Formular"	freie Platzierung in einer Erlebniswelt
Spezialformular „Produkt-Anfrage"	Modal-Trigger auf jeder PDP, ohne CMS-Layout
Direkter Twig-Include	für Theme-Entwickler:innen

CMS-Element „Formular"

Das Formular-Werkzeug bringt einen eigenen CMS-Block und ein CMS-Element mit. Du kannst beide in jede Erlebniswelt einfügen:

1. Inhalte → Erlebniswelten öffnen

2. Layout-Editor starten und einen Abschnitt wählen

3. Block Formular ziehen

4. In den Element-Einstellungen rechts dein Formular auswählen

5. Layout speichern

Das Element rendert sauber im Theme deines Shops — inklusive Buttons, Eingabe-Styling, Bootstrap-Grid und allen Validierungs-Layouts.

Mehr dazu in CMS-Elemente.

Spezialformular „Produkt-Anfrage" (Premium)

Mit dem Formulartyp Produkt-Anfrage erscheint auf der Produktdetailseite automatisch ein „Frage zum Produkt"-Trigger. Per Klick öffnet sich ein Vollbild-Modal mit deinem Formular.

• Du musst die Anfrage in keinem CMS-Layout platzieren — sie wird automatisch in das Buy-Widget eingehängt.

• Über Sichtbarkeitsbedingungen im Reiter Spezialformular legst du fest, auf welchen Produkten / Kundengruppen / Verkaufskanälen oder dynamischen Produktgruppen die Anfrage erscheint.

• Versteckte Felder im Hintergrund senden Produkt-ID, Produktnummer, Produktname, Preis und URL mit — du siehst in der Einsendung sofort, zu welchem Produkt die Anfrage kam.

Mehrstufige Formulare (Wizard)

Sobald dein Formular zwei oder mehr Wizard-Schritt-Elemente enthält, wird es automatisch als mehrstufiges Formular gerendert: mit Stepper-Navigation, Fortschritts-Balken, „Zurück / Weiter"-Buttons und einer abschließenden Bestätigung im letzten Schritt.

Bedingte Felder

Felder oder Gruppen mit Sichtbarkeits-Bedingungen werden ein- und ausgeblendet, sobald sich der referenzierte Wert ändert. Ausgeblendete Inputs sind deaktiviert — der Server validiert und speichert sie deshalb nicht.

Validierung

Das Formular nutzt zwei Validierungsebenen:

• Client-seitig — sofortige Hinweise unter dem Feld, sobald die Kund:in den Submit-Button klickt; mit is-invalid-Markierung wie im Shopware-Default (z. B. Login)

• Server-seitig — robust und nicht umgehbar; nutzt den Shopware-Standard DataValidator mit Symfony-Constraints

Pro Feldtyp greifen passende Regeln (Pflichtfeld, gültige E-Mail, Wertebereich für Zahl & Datum, erlaubte Optionen, Dateigröße & -endungen).

Antwort-Verhalten

Was nach erfolgreicher Einsendung passiert, hängt vom Antworttyp ab:

• Erfolgsmeldung — eine Bootstrap-Alert-Box erscheint anstelle der Felder. Den Text kannst du pro Sprache anpassen.

• Weiterleitung auf URL (Premium) — der Browser navigiert nach einer optionalen Verzögerung (ms) zur angegebenen Ziel-URL.

Mehrsprachigkeit

Formulare, Felder, Beschriftungen, Platzhalter, Auswahl-Optionen, Mail-Vorlagen und Erfolgsmeldungen — alles ist pro Sprache übersetzbar. Der Storefront-Sprachwechsel funktioniert ohne extra Konfiguration.

Headless-Integration

Alle Storefront-Routen sind ebenfalls als Store-API-Endpoints verfügbar. Anbindungen aus eigenen Frontends laufen über /store-api/prems/form/submit. Details siehe Store API.