Wie erstelle ich ein Formular

Schritt 1: Ein leeres Formular anlegen

Die Erstellung eines Formulars ist der einfachste Teil. Mit nur wenigen Klicks. Wir zeigen euch wie Ihr ein Formular anlegen könnt und die Einstellungen setzt.

Der erste Schritt ist es ein neues Formular anzulegen. Dazu geht Ihr auf die Formular Übersichtsseite in eurem Projekt. Solltet Ihr noch kein Formular vorher angelegt haben, sieht das bei euch wie folgt aus:

How to create a form - Step 1

Zunächst schreiben wir in das untere Eingabefeld, den neuen Namen unseres Formulares 'Contact Form' und drücken auf 'Create'. Nun wird ein neues Formular erstellt und Ihr gelangt automatisch in den Formular Designer. Das sollte nun so aussehen:

How to create a form - Step 2 - Form Designer

Schritt 2: Hinzufügen von Kontakt-Feldern

Als nächstes legen wir die Felder an, um Informationen von unserem Kunden zu erfahren. In dm einfachsten Fall reicht eine E-Mail und ein Text Feld aus.

Das erste Feld das wir hinzufügen ist ein E-Mail Eingabefeld. Dazu bewegen wir das 'Text' Feld per Drag and Drop auf eine der 'Drag'n'Drop' Zonen. Nun erscheint automatisch das Einstellungsmenü des Eingabefelds.

How to create a form - Step 2 - Field Settings

Die Einstellungen umfassen zwei verschiedene Bereich. 'General' und 'Validation'. Welches sich je nach Feldtyp noch unterscheiden kann. Im 'General' Bereich müssen wir einen 'Internal Name' setzen. Über diesen Namen wird im nachfolgenden Prozess der Datenverarbeitung zugegriffen und in der Kontaktanfrage E-Mail angezeigt.

Um in dem Formular einen Namen für das E-Mail Feld anzuzeigen, kann das 'Label' oder der 'Placeholder' genutzt werden. Es empfiehlt sich nur eines von beidem zu verwenden. Der Unterschied ist, dass das 'Label' über dem Eingabefeld steht und der 'Placeholder' in dem Eingabefeld. In unserem Test Formular nutzen wir das 'Label' und schreiben 'Your E-Mail' hinein.

Eine wichtige Funktion, ist die Validierung der E-Mail Adresse, die der Kunde eingibt. Dazu klicken wir auf 'Validation' und wählen 'E-Mail' im 'Regex Preset' Dropdown. Zusätzlich setzen wir noch den Haken bei 'Required'. Sodass der Kunde das Formular nur absenden kann, wenn eine gültige E-Mail Adresse eingegeben wurde.

Nachdem wir die Einstellungen gesetzt haben, klicken wir auf 'Apply' und die Einstellungen wurden in den Formular Designer übernommen.

How to create a form - Step 2 - Field Settings applied

Als zweites Feld wird ein 'Text Area' Feld angelegt um eine mehrzeilige Eingabe zu ermöglichen. Dieses Feld wird später für den Anfragetext des Kunden genutzt. In den Einstellungen des Feldes setzen wir den 'Internal Name' auf 'Message'.

Der letzte Schritt ist das hinzufügen des 'Submit' Buttons. Ansonsten kann der Kunden das Formular nicht absenden. Wie die anderen Felder fügen wir nun den 'Submit Button' hinzu. Der 'Internal Name' ist hierbei nicht wichtig. Die wichtige Einstellung ist 'Placeholder' um einen Text im Button anzuzeigen. In unserem Testformular schreiben wir 'Send' hinein.

Dein Formular sollte nun so aussehen:

How to create a form - Step 2 - Fields added

Schritt 3: Submit Actions

In der linken Sidebar gibt es eine Sektion 'Submit Actions'. Auf diese klicken wir.

Zu guterletzt muss noch das Verhalten beim Absenden des Formulars konfiguriert werden. Zunächst gibt es zwei direkte Aktionen. Die erste ist, dass eine Nachricht angezeigt wird, wenn das Formular abgesendet wurde. Alternativ kann auch auf eine anderen Seite weitergeleitet werden. Für unser Testformular nutzen wir die Einstellung 'Message' und schreiben als Text 'Thansk for contacting us.' hinein.

How to create a form - Step 2 - Submit Actions Message

Der nächste Schritt ist die Konfiguration der Informations E-Mail an uns selbst. Wir wollen schließlich mitbekommen, wenn uns jemand kontaktiert hat.

Wir wählen dazu 'Send Mail' in dem Dropdown 'Choose an action' aus. Die 'Submit Action' wird hinzugefügt und wir können mit der Konfiguration starten. Standardmäßig ist die neue 'Submit Action' nicht sofort aktiv. Für unseren Test reicht es aus, wenn wir bei 'Run on version states' den Haken bei 'non approved' setzen.

HINWEIS: Die States sind wichtig für Webseiten die ein Test und ein Live System haben.

In unserem Kontaktformular setzen wir noch die Felder 'From', 'To', 'Subject' und 'Template'.

HINWEIS: Um eine E-Mail an den Kunden selbst zu setzen, kann in dem zweiten 'To' Feld der 'Internal Name' des E-Mail Adressfeldes gesetzt werden.

Unsere Einstellungen sind:

How to create a form - Step 2 - Submit Actions E-Mail

Jetzt speichern wir das Fomular und sind fertig. :)

Artikel und Links die für dich interessant sein können:

Wie erstelle ich ein E-Mail Template Mail Templates