In der Verwaltungsoberfläche lassen sich nun eigene, vollständig anpassbare Formulare erstellen.
Formulare lassen sich frei aus verschiedenen Feldtypen wie Name, E-Mail, Passwort, Datei-Upload, Dropdown-Liste oder Schaltflächen zusammenstellen, wobei beliebig viele dieser Felder hinzugefügt werden können. Auch das Layout ist flexibel – Felder können nebeneinander platziert und frei verschoben werden. Fertige Formulare lassen sich über einen Shortcode mühelos in beliebige Textinhalte einbetten, darunter Artikel, statische Seiten, Produktseiten, Galerien oder Markenseiten.
Liste der Formulare
- Sprachen – Legt fest, in welcher Sprache die Formulare aufgelistet werden. Die ausgewählte Sprache wird auch beim Anlegen eines neuen Formulars verwendet.
- ID – Die eindeutige Kennung des Formulars.
- Name – Der Name des Formulars.
- Aktiv – Gibt an, ob das Formular für die Kunden im Shop sichtbar ist. Inaktive Formulare sind für Kunden nicht sichtbar.
- Formularcode – Der Code, der kopiert und in einen statischen Inhaltsblock eingefügt werden muss.
- Code kopieren – Kopiert den Formularcode in die Zwischenablage.
- Eingereichte Formulare anzeigen – Zeigt alle eingereichten Einträge für das ausgewählte Formular an.
- Abgesendete Formulare exportieren – Exportiert die eingereichten Formulareinträge in eine Excel-Datei. Der Export enthält die ID der Einreichung, den Benutzer, das Einreichungsdatum sowie alle im Formular eingegebenen Daten.
- Klonen – Erstellt eine Kopie des ausgewählten Formulars mit einer neuen ID.
- Wenn Shop-Betreiber auf die Schaltfläche „Bearbeiten“ klicken, können sie bestehende Formulare ändern.
- Wird ein Formular nicht mehr benötigt, können Shop-Betreiber es löschen, indem sie auf die Schaltfläche „Löschen“ (Papierkorb) klicken.
- Wenn Administratoren auf die Schaltfläche „Neu hinzufügen“ klicken, können sie ein neues Formular für die ausgewählte Sprache erstellen.
- Um ein Formular anhand des Titels zu suchen, geben Sie einfach seinen Namen in die Suchleiste ein und klicken Sie auf das Symbol „Suchen“ (Lupe).
- Formulare erstellen und bearbeiten
Um ein Formular zu erstellen, ziehen Sie einfach die gewünschten Felder von der rechten Seite an die gewünschte Position. Damit das Formular abgeschickt werden kann, muss es ein Schaltflächenfeld enthalten.
- Name – der Name des Formulars
- Aktiv (standardmäßig aktiviert) – legt fest, ob die Seite für Kunden sichtbar ist
- E-Mail-Benachrichtigung – Ist diese Option aktiviert, sendet das System nach dem erfolgreichen Absenden des Formulars eine Benachrichtigungs-E-Mail an die angegebenen E-Mail-Adressen
- Kontakt-E-Mail – Das System sendet beim Absenden des Formulars Benachrichtigungen an die eingegebenen E-Mail-Adressen
- Sprache – ermöglicht die Auswahl der Sprache, in der das Formular verfügbar sein wird
- Antworttyp – ermöglicht die Auswahl, wohin die Seite weiterleiten soll, nachdem der Kunde das Formular abgesendet hat
Sobald das Formular ausgefüllt ist, kopieren Sie einfach den Shortcode von der Listenseite und fügen ihn in einen statischen Inhaltsbereich ein:
Textfeld
Wenn ein Textfeld angelegt wird, hat der Benutzer die Möglichkeit, Text einzugeben.
- Erforderlich - Hier legen Sie fest, ob das Feld im Formular ausgefüllt werden muss oder optional ist.
- Bezeichnung - Hier können wir den Titel angeben, der über dem Textfeld angezeigt wird.
- Hilfetext - Hier können wir ausführlicher erläutern, was gemeint ist bzw. was in dem jeweiligen Feld abgefragt wird.
- Platzhalter - Was im Textfeld angezeigt werden soll, bevor wir hineinklicken.
- Klasse - Wenn Sie später per Code eine Gestaltung zuweisen möchten, lohnt es sich, eine eigene Klasse zu vergeben.
- Name - Hier kann der Name des Feldes festgelegt werden.
- Wert - Hier können Sie dem Textfeld bei Bedarf einen Wert zuweisen.
- Typ - Hier können wir festlegen, welcher Werttyp im Textfeld erwartet wird.
- Maximale Länge - Hier können wir die maximale Zeichenanzahl des eingegebenen Textes festlegen.
- Breite - Hier können wir die Breite des Eingabefeldes im Formular festlegen.
- Wie erscheint es im Frontend?
Auswählen
Der Benutzer kann bei der Auswahl aus mehreren Optionen wählen.
- Erforderlich – Hier legen Sie fest, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Wir können den Titel festlegen, der über dem Textfeld erscheint.
- Hilfetext – Eine ausführlichere Erläuterung dessen, was wir vom Benutzer in diesem konkreten Feld erwarten.
- Platzhalter – Text, der im Eingabefeld angezeigt wird, bis der Benutzer darauf klickt.
- Klasse – Wenn wir eigene Stile per Code anwenden möchten, ist es sinnvoll, eine bestimmte CSS-Klasse zu vergeben.
- Name – Hier können wir den Namen des Eingabefeldes festlegen.
- Bezeichnung (für Optionen) – Bei Optionsfeldern können wir festlegen, welcher Text über den Eingabeoptionen erscheint.
- Wert – Wir können den Wert einer bestimmten Kennzahl festlegen, was für die Datenstatistik nützlich ist.
- Select2 - Wir können die Suche innerhalb der verfügbaren Optionen aktivieren.
- Breite – Ermöglicht es, die Breite des Eingabefeldes im Formular festzulegen.
- Wie erscheint es im Frontend?
Textbereich
Das Textfeld für mehrzeilige Eingaben ähnelt dem einzeiligen Textfeld, da der Benutzer darin Text eingeben kann. Der Unterschied besteht darin, dass es sich für die Eingabe längerer Texte eignet.
- Erforderlich – Hier legen Sie fest, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Hier geben Sie den Titel an, der über dem Textfeld angezeigt wird.
- Hilfetext – Wir können eine ausführlichere Erläuterung dazu geben, was wir meinen oder was wir in diesem Feld abfragen.
- Platzhalter – Text, der im Eingabefeld angezeigt wird, bis darauf geklickt wird.
- Klasse – Wenn wir es später per Code gestalten möchten, ist es sinnvoll, eine eigene CSS-Klasse zu vergeben.
- Name – Hier definieren Sie den Namen des Feldes.
- Wert – Wir können einer Kennzahl einen Wert zuweisen; das ist für die Datenstatistik wichtig.
- Typ – Wir können festlegen, welcher Werttyp im Eingabefeld erwartet wird.
- Maximale Länge – Wir können die maximale Anzahl der im Textfeld zulässigen Zeichen festlegen.
- Zeilen – Hier können wir festlegen, wie viele Zeilen das Textfeld haben soll.
- Breite – Wir können die Breite des Eingabefeldes im Formular festlegen.
- Wie erscheint es im Frontend?
Datumsfeld
Über das Datumsfeld können Benutzer das gewünschte Datum bequem auswählen.
- Erforderlich – Hier legen Sie fest, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Hier geben Sie den Titel an, der über dem Textfeld angezeigt wird.
- Hilfetext – Hier können Sie ausführlicher erläutern, was gemeint ist bzw. was in diesem Feld abgefragt wird.
- Platzhalter – Text, der im Eingabefeld angezeigt wird, bis der Benutzer hineinklickt.
- Klasse – Wenn Sie es später per Code gestalten möchten, empfiehlt es sich, eine eigene CSS-Klasse zuzuweisen.
- Name – Hier definieren Sie den Namen des Feldes.
- Wert – Hier können Sie den Wert eines Feldes festlegen. Das ist für die Datenstatistik wichtig.
- Typ – Hier können Sie festlegen, welcher Werttyp im Textfeld erwartet wird.
- Min – Hier können Sie das früheste einstellbare Datum angeben.
- Max – Hier können Sie das späteste einstellbare Datum angeben.
- Schritt – Wenn wir eine Zahl x eingeben, ist jedes x-te Datum auswählbar.
- Flatpickr – Damit können wir die Darstellung des Datumseingabeformats ändern.
- Breite – Hier legen Sie die Breite des Formularfeldes fest.
- Wie erscheint es im Frontend?
Nummer
Über das Zahlenfeld kann der Benutzer einen numerischen Wert eingeben.
- Erforderlich – Hier legen Sie fest, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Hier geben Sie den Titel an, der über dem Textfeld angezeigt wird.
- Hilfetext – Hier können Sie ausführlicher erläutern, was gemeint ist bzw. was in diesem Feld abgefragt wird.
- Platzhalter – Text, der im Eingabefeld angezeigt wird, bis der Benutzer hineinklickt.
- Klasse – Wenn Sie es später per Code gestalten möchten, empfiehlt es sich, eine eigene CSS-Klasse zuzuweisen.
- Name – Hier definieren Sie den Namen des Feldes.
- Wert – Hier können Sie den Wert eines Feldes festlegen. Das ist für die Datenstatistik wichtig.
- Typ – Hier können Sie festlegen, welcher Werttyp im Textfeld erwartet wird.
- Min – Hier können Sie das früheste einstellbare Datum angeben.
- Max – Hier können Sie das späteste einstellbare Datum angeben.
- Schritt – Wenn wir eine Zahl x eingeben, ist jede x-te Zahl auswählbar.
- Breite – Hier legen Sie die Breite des Formularfeldes fest.
- Wie erscheint es im Frontend?
Kontrollkästchen-Gruppe
Mit der Kontrollkästchengruppe können Benutzer mehr als eine Option aus einer Liste von Auswahlmöglichkeiten auswählen.
- Erforderlich – Hier können wir entscheiden, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Hier können Sie den Titel festlegen, der über dem Textfeld angezeigt wird.
- Hilfetext – Wir können ausführlicher erläutern, was wir meinen oder was wir in dem jeweiligen Feld abfragen.
- Umschalten – Wenn diese Option aktiviert ist, erscheint anstelle eines Kontrollkästchens ein Umschalter.
- Inline – Standardmäßig erscheinen die Optionen untereinander; ist dies aktiviert, erscheinen sie nebeneinander.
- Klasse – Wenn wir später eigene Stile per Code anwenden möchten, ist es sinnvoll, eine eigene CSS-Klasse zu vergeben.
- Name – Hier können wir den Namen des Feldes festlegen.
- Bezeichnung (für Optionen) – Ermöglicht es, den Text festzulegen, der über den Eingabeoptionen angezeigt wird.
- Wert – Wir können festlegen, welchen Wert eine Kennzahl hat. Das ist für die Datenstatistik wichtig.
- Breite – Hier legen Sie die Breite des Formularfeldes fest.
- Wie erscheint es im Frontend?
Optionsfeldgruppe
Mit der Optionsfeldgruppe kann der Benutzer eine Option aus mehreren Auswahlmöglichkeiten auswählen.
- Erforderlich – Hier legen Sie fest, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Hier können Sie den Titel festlegen, der über dem Textfeld angezeigt wird.
- Hilfetext – Wir können ausführlicher erläutern, was wir meinen oder was wir in dem Feld abfragen.
- Inline – Standardmäßig erscheinen die Optionen untereinander; ist diese Option aktiviert, werden sie nebeneinander angezeigt.
- Klasse – Wenn wir später Stile per Code anwenden möchten, ist es sinnvoll, eine eigene CSS-Klasse zu vergeben.
- Name – Hier legen wir den Namen des Feldes fest.
- Bezeichnung (für Optionen) – Ermöglicht es, den Text festzulegen, der über den Eingabeoptionen angezeigt wird.
- Wert – Wir können den Wert einer Kennzahl festlegen. Das ist für statistische Daten wichtig.
- Breite – Wir können die Breite des Formularfeldes festlegen
- Wie erscheint es im Frontend?
Datei-Upload
Der Datei-Upload ermöglicht es Nutzern, die gewünschten Dokumente oder Bilder mühelos anzuhängen und einzureichen.
- Erforderlich – Hier können Sie entscheiden, ob das Feld im Formular ein Pflichtfeld oder optional ist.
- Bezeichnung – Sie können den Titel festlegen, der über dem Textfeld erscheint.
- Hilfetext – Sie können ausführlicher erläutern, was Sie meinen oder was Sie in dem jeweiligen Feld abfragen.
- Platzhalter – Was im Textfeld erscheinen soll, bis darauf geklickt wird.
- Klasse – Wenn Sie später einen Stil per Code anwenden möchten, lohnt es sich, eine eigene Klasse zu vergeben.
- Name – Hier können Sie den Namen des Feldes angeben.
- Mehrere Dateien – Hier können Sie erlauben, dass mehrere Dateien gleichzeitig hochgeladen werden.
- Bilder zulassen – Sie können festlegen, ob das Hochladen von Bildern erlaubt ist oder nicht.
- Dokumente zulassen – Sie können festlegen, ob das Hochladen von Dokumenten erlaubt ist oder nicht.
- Breite – Sie können die Breite des Formularfeldes festlegen.
- Wie erscheint es im Frontend?
Verstecktes Eingabefeld
Über das versteckte Feld können Daten mit dem Formular übermittelt werden, ohne dass der Benutzer sie eingeben muss.
- Name — Sie können den Namen des versteckten Feldes angeben
- Wert — Sie können dem versteckten Feld einen Wert zuweisen, den Sie später verwenden können. (dieses Feld erscheint nicht im Formular)
- Schaltfläche
Über die Schaltfläche kann das Formular abgeschickt oder zurückgesetzt werden.
- Bezeichnung – Sie können die Beschriftung (den Text) festlegen, die auf der Schaltfläche erscheint.
- Typ – Sie können den Typ der Schaltfläche festlegen. WICHTIG: Damit das Formular abgesendet werden kann, muss sein Typ auf „Submit“ gesetzt sein.
- Damit das Formular abgesendet werden kann, muss sein Typ auf „Submit“ gesetzt sein.
- Stil – Sie können den Stil der Schaltfläche auswählen.
- Klasse – Wenn Sie später eine eigene Gestaltung per Code anwenden möchten, lohnt es sich, eine eigene Klasse zuzuweisen.
- Name – Hier können Sie den Namen des Feldes angeben.
- Wert – Sie können festlegen, welchen Wert die Schaltfläche haben soll.
- Inline – Wenn diese Option aktiviert ist, nimmt die Schaltfläche im Formular keine ganze Zeile ein.
- Wie erscheint es im Frontend?
Header
Im Kopfbereich legen Sie den Titel des Formulars fest.
- Bezeichnung – Sie können den Text der Beschriftung festlegen.
- Typ – Sie können den Typ der Schaltfläche festlegen.
- Klasse – Wenn Sie später eine eigene Gestaltung per Code anwenden möchten, lohnt es sich, eine eigene Klasse zuzuweisen.
- Breite – Sie können die Breite der Beschriftung festlegen.
- Wie erscheint es im Frontend?
Absatz
Mit dem Absatz können Sie längere Beschreibungen oder Erläuterungen in das Formular einfügen.
- Inhalt — Sie können einen längeren Text in das Formular eingeben.
- Typ — Sie können den Typ der Schaltfläche festlegen.
- Klasse - Wenn Sie später per Code eine eigene Gestaltung anwenden möchten, lohnt es sich, eine eigene Klasse zuzuweisen.
- Breite — Sie können die Breite der Beschreibung festlegen.
- Wie erscheint es im Frontend?