Technologie

Wie füge ich eine mehrseitige Formularstruktur in Freeform hinzu?

Melden
  1. Einführung in Mehrseitige Formulare
  2. Grundprinzip der mehrseitigen Formularstruktur
  3. Schrittweise Umsetzung im Template
  4. Wichtiges zum Speichern und Validieren
  5. Navigation zurück und Mehrseitigkeit komfortabel gestalten
  6. Abschließende Hinweise

Einführung in Mehrseitige Formulare

Freeform, ein leistungsstarkes Formular-Plugin (z.B. für Craft CMS), ermöglicht es, komplexe Formulare zu erstellen. Für mehrseitige Formulare ist es sinnvoll, sogenannte "Steps" oder "Pages" zu definieren, um Nutzer durch unterschiedliche Abschnitte eines Formulars zu führen. Das verbessert die Nutzererfahrung, da nicht alle Felder auf einmal angezeigt werden.

Grundprinzip der mehrseitigen Formularstruktur

Um ein mehrseitiges Formular in Freeform zu realisieren, nutzt man typischerweise die Möglichkeit, innerhalb des Formulars verschiedene "Pages" festzulegen. Jede Page umfasst dabei eine bestimmte Gruppe von Eingabefeldern. Beim Absenden einer Page wird die nächste angezeigt, ohne die bislang eingegebenen Daten zu verlieren.

Das bedeutet, dass das Formular im Hintergrund zwischengespeichert wird und der Nutzer Schritt für Schritt durch die Seiten geleitet wird.

Schrittweise Umsetzung im Template

Im Twig-Template (angenommen, du verwendest Craft CMS) bindest du das Freeform-Formular ein und segmentierst die Felder mit {% page %} Tags. Dies sind die Trennpunkte zwischen den einzelnen Seiten des Formulars.

Die Syntax für ein mehrseitiges Freeform-Formular sieht folgendermaßen aus:

{% freeform form="deinFormularHandle" %} {{ form.start }} {% page %} {# Felder für Seite 1 #} {{ form.textField(vorname) }} {{ form.textField(nachname) }} Weiter {% endpage %} {% page %} {# Felder für Seite 2 #} {{ form.emailField(email) }} {{ form.textareaField(nachricht) }} Weiter {% endpage %} {% page %} {# Felder für Seite 3, z.B. Zusammenfassung oder Bestätigung #} {{ form.checkboxField(datenschutz) }} Ich akzeptiere die Datenschutzbestimmungen Absenden {% endpage %} {{ form.end }}{% endfreeform %}

In diesem Beispiel wird jede {% page %} durch {% endpage %} abgeschlossen und enthält die Felder, die auf der jeweiligen Seite angezeigt werden sollen. Nach dem Absenden einer einzelnen Seite navigiert Freeform automatisch zur nächsten.

Wichtiges zum Speichern und Validieren

Freeform behält automatisch die Zwischendaten zwischen den Seiten. Validation passiert pro Seite, so dass Fehler auf der aktuellen Seite angezeigt werden, bevor es zur nächsten geht.

Man kann auch benutzerdefinierte Validierungsregeln im Freeform-Formular im Backend konfigurieren. Diese Validierung wird entsprechend auf jeder Seite berücksichtigt.

Standardmäßig stellt Freeform Buttons bereit, um zum nächsten Schritt zu gelangen. Für eine bessere Nutzbarkeit kannst du auch "Zurück"-Buttons einfügen, indem du JavaScript oder custom Twig nutzt, um zwischen den Seiten zu navigieren.

Außerdem ist es möglich, den aktuellen Schritt hervorzuheben und dem Benutzer visuell zu zeigen, in welchem Abschnitt er sich gerade befindet.

Abschließende Hinweise

Die wichtigste Voraussetzung für mehrseitige Formulare in Freeform ist, dass dein Formular als Single-Formular mit mehreren Seiten angelegt ist, und die einzelnen Seiten über die {% page %} Blöcke im Template getrennt werden. Dadurch wird eine intuitive Schritt-für-Schritt Eingabe geschaffen, die den Nutzer nicht überfordert und zugleich umfangreiche Daten erfassen kann.

Ein abschließendes Testen des Formulars ist wichtig, um sicherzustellen, dass die Zwischenspeicherung und Validierung wie erwartet funktionieren und die Daten korrekt übergeben und abschließend verarbeitet werden.

0

Kommentare