> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/plugins/formular-baukasten/storefront-integration.md).

# 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](/plugins/formular-baukasten/cms-elemente.md).

## 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](/plugins/formular-baukasten/store-api.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.premsoft.de/plugins/formular-baukasten/storefront-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.