Im Modul Formulare erstellen und bearbeiten Sie angelegte Formulare. Sie werden diese nutzen, um Seiten-Besuchern eine Möglichkeit zu geben, Kontakt aufzunehmen oder sich z. B. zu einem Newsletter anzumelden.

Beim Bearbeiten von Formularen steht Ihnen frei, welche Informationen der Nutzer hinterlassen muss und welche er freiwillig angeben kann. Bereits vorhandene Formulare können jederzeit angepasst und beliebig viele neue Formulare angelegt werden. Beim Erstellen von Formularen werden Sie schnell mit den Funktionen und der Arbeit mit diesem Modul vertraut werden.

Formular – Übersicht

Das erste, was Sie sehen, wenn Sie auf das Modul Formulare klicken, ist eine Übersicht aller vorhandenen Formulare. Sie können nun ein bestimmtes Formular bearbeiten, indem Sie auf das Stiftsymbol klicken. Mit dem zweiten Symbol duplizieren Sie ein Formular und mit dem Papierkorb-Symbol löschen Sie es.

Mit + Formularname oder dem +-Symbol über dem Inhaltsbereich erstellen Sie ein neues Formular.

Ein erstelltes Formular lässt sich beliebig oft verwenden. Dafür müssen Sie nur in der Seitenansicht (oder Listenansicht) ein Formular-Inhaltselement hinzufügen und das passende Formular in dem Plug-In auswählen. 

Formulare erstellen

Als Erstes müssen Sie zwischen einem leeren und einem vordefinierten Formular wählen. Im leeren Formular müssen Sie nur noch einen Formularnamen und den Formularspeicher festlegen. Der Name kann jederzeit geändert werden. Bei einem vordefinierten Formular müssen Sie zusätzlich eine Ausgangsvorlage wählen. In unserer Website-Base finden Sie eine Vorlage für ein einfaches Kontaktformular, bestehend aus zwei Seiten/Schritten, die bereits einen Datenschutzhinweis enthält.

Nach Erstellen des Formulars gelangen Sie zur Bearbeitungsansicht.

Leeres Formular

Vordefiniertes Formular

Formulare bearbeiten

Links befindet sich die Spalte, in der ein Formular-Seitenbaum zu sehen ist. Eine Seite ist im leeren Formular automatisch angelegt. Im vordefinierten Formular finden Sie zwei Seiten. Seiten können jederzeit hinzugefügt oder gelöscht werden.

In der Mitte fügen Sie die einzelnen Formularelemente hinzu und wählen sie zum Bearbeiten aus. Jedes Element kann aber auch über den Formular-Baum angewählt werden. Wenn Sie im Formular-Seitenbaum eine Seite und kein einzelnes Element angewählt haben, sind in der Mitte einfach alle Elemente aufgelistet. Jedes Element kann in dieser Ansicht angeklickt werden, sodass Sie in die Einstellungen des Elementes (rechte Spalte) gelangen.

Im rechten Bereich werden Einstellungen zum Formular, den enthaltenen Seiten und den einzelnen Elementen angepasst.

Formular

Wenn Sie im Formular-Seitenbaum den Formularnamen auswählen, können Sie in der rechten Spalte allgemeine Informationen zum Formular anpassen.

  • Formularname: Der Formularname lässt sich jederzeit hier ändern.
  • Beschriftung des Absenden-Buttons: Das ist der Button, den User als letztes zum Bestätigen und Absenden ihrer Eingaben betätigen.
  • Unsichtbares reCaptcha verwenden: Unterscheidet Bots vom menschlichen Verhalten, ohne dass eine Interaktion mit dem Nutzer notwendig ist.
  • Finisher: Legen z. B. fest, wer nach dem Absenden benachrichtigt wird und wie mit den eingegebenen Informationen verfahren wird.

Finisher

Finisher legen fest, wie mit Informationen und Dateien umgegangen wird, wenn der Nutzer seine Angaben abschickt und wer darüber informiert werden soll. Sie sollten die Reihenfolge der Finisher beachten. Als Erstes sollten immer Nutzer und Admin benachrichtigt werden. Wenn Sie hochgeladene Dateien nicht im System speichern möchten, folgt nach den E-Mails das Löschen der Uploads. Erst als letztes steht der Finisher zur Weiterleitung des Users auf eine andere Seite. Dabei sollten Sie entweder auf eine interne Seite oder eine externe URL verweisen.

Mail Templates: E-Mail an den Nutzer der Webseite

Mit diesem Finisher wird der User unter der angegebenen Adresse kontaktiert. Dafür muss das E-Mail-Element im Formular bereits eingefügt sein (oder ein anderes Element, das eine E-Mail-Adresse beinhaltet). Wenn das Element vorhanden ist, lässt sich im erforderlichen Feld das Element mit der Adresse auswählen. Zusätzlich können Sie ein Mail-Template festlegen z. B. contact_user.

Mail Templates: E-Mail an den Admin der Webseite

Nach dem Absenden der Eingaben kann auch der Admin der Seite benachrichtigt werden. Dafür muss nur die entsprechende E-Mail-Adresse eingetragen werden. Auch hier können sie die Mail-Templates nutzen, in diesem Fall: contact_admin.

Uploads löschen

Verhindert das Speichern der hochgeladenen Dateien im System. Die Dateien werden dann nur als Anhang in den E-Mails mitgeschickt.

Forms - Nutzereingaben in der Datenbank Speichern

Normalerweise werden Nutzereingaben auf der Domain-Startseite gespeichert. Wenn Sie eine andere Seite festlegen möchten, müssen Sie in diesem Finisher die entsprechende Page-ID eintragen.

Weiterleitung zu einer Seite

Nach Absenden der Daten, können Sie den User auf eine intern gelegene Seite weiterleiten.

Zu einer URL weiterleiten

Oder Sie leiten ihn zu einer externen Seite z. B. eine Landing-Page. Tragen Sie hierfür einfach eine URL ein.

Finisher-Beispiel – Mail Templates: E-Mail an den Nutzer der Webseite

Formular-Schritt/Seite

Wenn Sie im Formular-Seitenbaum eine Seite angewählt haben, können Sie den Seitennamen sowie die Beschriftung des Vorherige- und des Nächste-Buttons festlegen. Diese Einstellungen müssen für jede einzelne Seite vorgenommen werden. Wo die Buttons dann auf der Seite zu sehen sind, zeigen die Frontend-Aufnahmen unseres Beispiel-Formulars.

Um einen neuen Schritt hinzuzufügen, klicken Sie im Formularbaum links auf den Button Neuen Schritt erstellen. Die Seite kann dann mit den Elementen Ihrer Wahl befüllt werden.

Formular-Element

Wenn ein Element angeklickt oder hinzugefügt wurde, sehen Sie einige Felder, die ausgefüllt werden können. Am wichtigsten sind das Label des Elements, der Platzhalter, die Festlegung, ob es sich um ein Pflichtfeld handelt und eventuell Validatoren.

Um ein neues Element hinzuzufügen, wählen Sie eine Seite/einen Schritt aus klicken im mittleren Bereich unten auf den Button Neues Element erstellen. Suchen Sie dann aus der Liste der Elemente das aus, was sie benötigen. Die verfügbaren Elemente sehen Sie im Screenshot zum leeren Formular.

Validatoren

Validatoren können einzelnen Formular-Elementen zugeschrieben werden. Sie kontrollieren oder beschränken die Eingaben der User im Frontend. Nicht alle Validatoren sind für alle Elemente verfügbar. Manche Elemente enthalten automatisch einen Validator, so wie z. B. das E-Mail-Element, andere wiederum haben keine Validator-Auswahl. Optional können Sie jedem Validator eine Fehlermeldung hinzufügen, die erscheint, wenn die Validierung fehlschlägt. Folgende Validatoren sind vorhanden.

  • Alphanumerisch: Die Eingabe muss Buchstaben und Ziffern enthalten.
  • Nicht-XML-Text: Der Validator prüft, ob der angegebene Wert ein gültiger Text ist, also keine XML-Tags enthält.
  • Länge des Strings: Legen Sie eine minimale und eine maximale Zeichenanzahl der Eingabe fest.
  • E-Mail: Der Validator überprüft, ob die Eingabe der Form einer E-Mail-Adresse entspricht.
    • Das E-Mail-Element enthält automatisch diesen Validator.
  • Ganzzahl: Prüft, ob der angegebene Wert eine gültige ganze Zahl ist.
  • Fließkommazahl: Prüft, ob die Eingabe eine Fließkommazahl bzw. Gleitkommazahl ist.
  • Zahlenbereich: Geben Sie ein Minimum und/oder ein Maximum der Zahl an, die die Nutzer eingeben sollen.
  • Zahl: Nur beim Element 'Zahl' vorhanden und ist automatisch ausgewählt.
  • Regulärer Ausdruck: Geben Sie einen validen regulären PHP-PCRE-Ausdruck ein. Der Validator prüft, ob die Eingabe der Nutzer dem Ausdruck entspricht.
    • Kann kontrollieren, ob z. B. angegebene Domain-Namen nur der Top-Level-Domain entsprechen.
  • Dateigröße: Sichert, dass keine zu großen Dateien hochgeladen werden. Geben Sie ein Minimum und ein Maximum an.
    • Dateien sollten nicht mehr als 10 MB groß sein.
    • Validator nur bei Datei- und Bildupload verfügbar. 
  • Datumsbereich: Legen Sie Anfangsdatum und Enddatum fest.
    • Nur beim Element 'Datum' vorhanden.
  • Anzahl der übermittelten Werte: Prüft, ob der angegebene Wert die angegebene Anzahl von Elementen enthält. 
  • Datum/Uhrzeit: Prüft, ob der angegebene Wert gültig ist. Es wird erwartet, dass die Datumszeichenfolge gemäß dem W3C-Standard formatiert ist, d.h. "YYYYY-MM-DDT###:###:##:##+###:##", z.B. "2005-08-15T15:52:01+00:00".
  • reCaptcha server-side validator: Nur beim Element 'Verborgen' verfügbar.

Hinweis auf die Datenschutzvereinbarung

Jedes Kontaktformular, das die Angabe von personenbezogenen Daten (z. B. Name oder E-Mail-Adresse) verlangt, muss einen Datenschutzhinweis beinhalten. Orientieren Sie sich bei der Konfiguration dieses Elementes an dem bereits angelegten Kontaktformular in der Website-Base. Im vordefinierten Formular, was ein einfaches Kontaktformular enthält, findet sich auch ein Datenschutzhinweis.

Beispiel Formular

Formular mit drei Seiten im Frontend. Welche Elemente verwendet wurden, ist in den Backendaufnahmen zu sehen.

Vorschau des Formulars im Backend

Sie wollen mehr erfahren?

Alle Informationen zu den verfügbaren Angeboten finden Sie auf den Seiten unserer Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.