Formulare bieten Website-Besuchern die Möglichkeit mit dir in Kontakt zu treten. In diesem Artikel zeigen wir dir, wie du Formulare auf deiner Website einfügst und optimal nutzt.
Inhaltsangabe
Basiswissen
Im Editor findest du eine Vielzahl an vorgefertigten Section-Templates mit denen du schnell und einfach eine Website erstellen kannst. Mit Formular-Sections fügst du innerhalb von Sekunden ein funktionierendes Kontakformular hinzu. Zusätzliche Formular-Elemente bieten dir die Möglichkeit die Formular-Sections an individuellen Anforderungen anzupassen. "Captcha"-Elemente sind ebenfalls Bestandteil eines jeden Formular-Presets und stellen sicher, dass das Formular von einem Menschen und nicht von einem Computer ausgefüllt wurde.
Standardmäßig werden die Formulareinträge an eine vom Kunden favorisierte E-Mail-Adresse geschickt. Diese legst du in den Formular-Einstellungen im Feld "Empfänger" fest. Du kannst auch mehrere Empfänger festlegen, indem du folgendes Format benutzt: email@abc.de; anderemail@abc.de; info@mein-postfach.io
Tipp: Kennst du schon das Kundenportal? Hier organisierst du sämtliche Informationen über deinen Kunden wie Kontaktdaten, Adresse, Login E-Mail-Adresse. Solltest du keine E-Mail-Adresse in den Formular-Einstellungen hinterlegt haben, werden die Formulareinträge automatisch an die Login E-Mail-Adresse des Kunden gesendet. Sobald ein Kontaktformular abgeschick wurde, werden sämtliche angegebenen Informationen zusätzlich als Formulareintrag im Kundenportal zur Verfügung gestellt.
Formular hinzufügen
Um ein neues Formular auf deiner Website hinzuzufügen, wähle die Kategorie Formular in der linken Sidebar aus. Unter dieser Kategorie findest du Formular-Sections (in orange markiert), also fertige Kontaktformulare mit Standard-Feldern und weitere Formular-Felder (in blau markiert), um ein Kontaktforumlar weiter auf deine individuellen Bedürfnisse anzupassen.
Sobald du eine Formular-Section auf die Website gezogen hast, steht dir ein voll funktionsfähiges Kontaktformular zur Verfügung. Wie du an der Breadcrumb sehen kannst, besteht ein Kontaktformular aus drei Ebenen:
- Dem Section-Container
- Dem Formular-Container
- und den Formular-Elementen
Hier im Beispiel ist ein Texfeld-Formular-Element ausgewählt, um die Struktur noch mal genauer zu zeigen. Wie gewohnt, kannst du über die Einstellungen im linken Panel das Design und die Darstellung deines Formulars weiter anpassen.
Formular-Einstellungen
Mit den Formular-Einstellungen gibst du das Verhalten des Formulars vor. Du erreichst die Formular-Einstellungen, indem du entweder im Breadcrumb auf Formular klickst oder aus den Einstellung eines Formular-Feldes heraus, denn dort findest du den Button Zu den Formular-Einstellungen - hier am Beispiel des Textfeldes zu sehen:
Sobald du die Formulare-Enstellungen geöffnet hast, kannst du auch hier unterschiedliche Anpassungen vornehmen.
Über das Feld Bezeichnung vergibst du einen aussagekräftigen Namen. Gerade wenn du unterschiedliche Kontaktformulare auf der Website nutzt, solltest du unbedingt einen Namen verwenden, denn im Kundenportal werden die Formulareinträge pro Kontaktformular aufgelistet. Und wenn alle gleiche heißen, dann kann das schnell verwirren. Deswegen nutze Bezeichnungen wie bspw. "Kontaktformular Startseite" oder "Kontaktformular Kontakt" oder "Kontaktformular Terminbuchung", um eine schnelle Zuordnung zu ermöglichen.
Die Felder Weiterleitung und Webhook URL spielen nach dem Abschicken eines Formulars eine Rolle: Im Feld Weiterleitung trägst du die URL oder den Slug der Unterseite ein, zu der du die Website-Besucher nach erfolgreichem Abschicken der Eingaben weiterleiten möchtest. Hierbei handelt es sich meist um "Danke"-Seiten oder dergleichen, die beispielsweise mit Hilfe von "Pixel-Scripts" genutzt werden, um das Website-Besucherverhalten genauer tracken zu können. Näheres zu Pixeln erfährst du im Artikel " Benutzerdefinierten HTML-, CSS- und JavaScript-Code einfügen". Außerdem können die Eingaben über eine Webhook URL an externe Tools wie beispielsweise CRM-Systene weitergegeben werden, sobald ein Website-Besucher das Formular abschickt. Näheres hierzu erfährst du im Abschnitt Webhooks.
In den Formulareinstellungen definierst du außerdem die Empfänger-E-Mail-Adresse, die Absender-E-Mail-Adresse sowie den Betreff. Das kann z. B. für automatische E-Mail-Filter hilfreich sein, um Formulareinträge in bestimmte Ordner sortieren zu lassen.
Formular-Elemente
Wie bereits erwähnt kannst du aus mehrere Formular-Elemente auswählen und so das Formular an deine Bedürfnisse anpassen. Im Folgenden gehen wir auf die einzelenen Elemente und ihre Funktionen genauer ein.
In der Formular-Kategorie enthalten die Boxen mit den Formular-Elementen Icons statt Thumbnails:
Für alle Formular-Elemente gilt, dass sie als "Erforderlich" markiert werden können. Ist ein Element "Erforderlich", wird der Website-Besucher darauf hingewiesen, dass dieses Feld ausgefüllt werden muss, sofern es beim Abschicken noch leer ist. Manche Elemente bieten zusätzlich "Platzhalter" an. Diese befüllen das Textfeld mit Beispiel-Inhalt bis dieser überschrieben wird.
1. Textfeld
Textelemente sind nützlich, wenn die Eingabe von Klartext erforderlich ist. Dies kann für Namen, Titel, Adresszeilen usw. verwendet werden. Du kannst Label vergeben, die über bzw. neben dem Eingabefeld angezeigt werden. Platzhalter sind ebenfalls möglich.
2. Nummernfeld
Ein Nummernfeld ist nützlich, wenn bei einer Eingabe Zahlen, aber kein Text erwartet wird. Für dieses Feld können Minimal- und Maximalwerte angegeben werden, was sich z. B. für Bestellungen anbietet.
3. E-Mail Feld
Mit einem E-Mail Feld kannst du sicherstellen, dass der Website-Besucher eine korrekt formatierte E-Mail-Adresse angibt. Der Browser erkennt falsche Eingaben (z. B. kein übliches E-Mail-Format, fehlendes "@"-Zeichen, etc.) und weist den Website-Besucher beim Abschicken darauf hin, sodass die E-Mail-Adresse korrigiert werden kann.
4. Telefonnummernfeld
Dies funktioniert genauso wie die zuvor genannten Eingabefelder. Verwende es nur für Telefonnummern.
5. Textbereich
Textbereiche bieten mehr Platz, um ganze Texte zu schreiben. Dies ist ideal für Nachrichten oder detaillierte Beschreibungen. Die Anzahl der Zeilen ist nützlich, um die Höhe des Textfeldes zu bestimmen. Diese lässt sich vom Website-Besucher mit einem modernen Browser individuell anpassen.
6. Checkboxen
Checkboxen bzw. Kontrollkästchen sind großartig, wenn mehrere Auswahlmöglichkeiten innerhalb des Formulars zur Verfügung stehen sollen. Über das Feld "Neue Optionen anlegen..." werden weitere Optionen hinzugefügt. Die Namen der Optionen können jederzeit angepasst werden. Zu jeder Option kann festgelegt werden, dass es "Erforderlich" ist. Ist dieses Feld aktiv, wird beim Absenden des Formulars überprüft, ob der Website-Besucher dieses Feld angeklickt hat. Hat er das nicht, wird er entsprechend darauf hingewiesen.
7. Radiobuttons
Radiobuttons funktionieren ähnlich wie Checkboxen. Hier ist jedoch immer nur eine Option auswählbar. Nachdem eine Auswahl getroffen wurde, bleibt immer genau eine Option ausgewählt. Weitere Optionen können per [Enter]-Taste oder durch Klicken auf das Haken-Icon auf der rechten Seite hinzugefügt werden.
8. Auswahllisten
Auswahllisten oder auch Dropdown-Listen ermöglichen es, eine bestimmte Option aus einer Liste auszuwählen. Ist das Feld "Mehrfach" angeklickt, können auch mehrere Optionen gleichzeitig ausgewählt werden - ähnlich wie bei Checkboxen. Ist das Feld nicht angeklickt, funktionieren Auswahllisten ähnlich wie Radiobuttons: Es kann nur eine Option ausgewählt werden. Du kannst zusätzlich festlegen, ob eine Auswahl erforderlich sein soll. Der "Bitte wählen"-Text ist ebenfalls anpassbar.
9. Datums- und Uhrzeitfeld
Datums- und Uhrzeitfelder bieten sich für das Festlegen eines möglichen Termins an und müssen normalerweise umständlich mit Javascript erstellt werden. Im Editor kannst du dieses Element ganz einfach hinzufügen und gemäß deinen eigenen Wünschen anpassen.
Im Abschnitt Allgemein kannst du wie üblich ein Label und Platzhalter vergeben und festlegen, ob eine Terminauswahl erforderlich sein soll.
Im Abschnitt Datum & Uhrzeit kannst du festlegen, ob das Datum, die Uhrzeit oder beides auswählbar sein soll. Wähle das gewünschte Datums- und Uhrzeitformat aus und schränke ggf. die Tageszeit mit den Feldern Mindest- und Maximaluhrzeit ein. So lassen sich z. B. Reservierungen innerhalb der Öffnungszeiten eines Restaurants ermöglichen. Auch die Zeitintervalle, aus denen der Website-Besucher wählen kann, können angepasst werden. Die Vorgabe "60 Minuten" erlaubt beispielsweise nur die Auswahl von 12:00 Uhr, 13:00 Uhr, 14:00 Uhr usw., während "15 Minuten" die Auswahl von 12:00 Uhr, 12:15 Uhr, 12:30 Uhr usw. ermöglicht. Wochennummern lassen sich für eine bessere Übersichtlichkeit ein- und ausblenden. Einbetten zeigt den gesamten Kalender anstelle eines Eingabefeldes an. Wird die Kalenderansicht nicht eingebettet, wird der Kalender beim Klicken als Popup angezeigt.
Das obere Bild zeigt neben den Einstellungsmöglichkeiten den darstellungstechnischen Unterschied zwischen einem "eingebetteten" Element und einem "nicht eingebetteten" Element.
Im Abschnitt Wochentage werden die auswählbaren Wochentage vorgegeben.
Soll ein frühestmögliches und spätestmögliches Datum vorgegeben werden, gebe diese in den Abschnitten Mindestdatum bzw. Maximaldatum vor. Ohne bedeutet hier, dass es keine Einschränkung gibt. Fix legt einen bestimmten Tag fest. Dynamisch erlaubt es ausgehend vom aktuellen Tag ein Datum in der Zukunft festzulegen. So können Website-Besucher bei der Vorgabe "5 Tage von 'heute'" für das "Mindestdatum" beispielsweise immer nur Termine auswählen, die mindestens 5 Tage in der Zukunft liegen. Das gibt dir bzw. deinem Kunden genug Zeit, um auf eine Anfrage zu reagieren. Möchtest du nur maximal 2 Monate für die Zukunft planen, gehe wie folgt vor:
- Trage neben "Maximaldatum" die Zahl "2" ein
- Klicke auf "Tage von 'heute'"
- Wähle "Monate von 'heute'" aus
10. Formular-Button
Damit Website-Besucher ein Formular abschicken können, wird mindestens ein Button benötigt. Das Formular-Button-Element kann insgesamt drei Funktionen haben:
- Zurücksetzen des Formulars und Löschen aller eingegebenen Daten
- Absenden des Formulars
- Keine Aktion (eignet sich, um beispielsweise eigene Javascripts auszuführen)
Zusätzlich kannst du unabhängig von anderen Buttons spezifische Designs vorgeben.
11. Datei-Upload Element
Nutze dieses Element, wenn Website-Besucher Dateien selbst hochladen können sollen. Im Feld Dateiformate trägst du alle Dateiformate bzw. -typen ein, die zum Hochladen zugelassen werden. Dabei kannst du beispielsweise ".jpg, .png" eingeben, um JPG- und PNG-Dateien zu erlauben. Du kannst aber auch "images/*" als Dateityp angeben, um alle Bilddateien auf einmal zu erlauben.
Auch dieses Feld kann als Erforderlich markiert werden.
Wenn du ein Formular abschickst, werden die Dateien per E-Mail an die in den Formulareinstellungen angegebene E-Mail-Adresse verschickt. Die Dateien werden nicht auf unseren Servern gespeichert. Das Limit für die maximale Dateigröße ergibt sich deshalb aus der maximalen Dateigröße, die auf dieser E-Mail-Adresse empfangen werden kann.
12. Captcha
Ein Captcha stellt sicher, dass das Kontaktformular nicht für Spam-Mails missbraucht wird. Solltest du die "Mail versenden"-Option in den Formular-Einstellungen deaktivieren, kannst du das Captcha-Feld auch aus dem Formular entfernen. In diesem Fall werden die Formulareinträge im Kundenportal aufgelistet. Lässt du die "Mail versenden"-Option aktiviert, ist das Captcha zwingend erforderlich, sofern nicht eine der zwei folgenden Alternativen genutzt wird:
- Verwende als Empfänger der Formulareingaben eine E-Mail-Adresse, die über uns verwaltet wird und mit einer Domain erstellt wurde, die bei uns registriert wurde
- Verwende Formulare von Drittanbietern, indem du den Einbettungscode des Drittanbieters beispielsweise mit einem HTML Element in dein Website-Projekt einfügst
Ohne diese Alternativen ist ein Speichern des Projekts ohne Captcha Element nicht möglich.
Auch für das Captcha können Label und/oder Platzhalter vergeben werden. Zusätzlich hast du die Möglichkeit Text- und Hintergrundfarben für das Captcha-Bild festzulegen. Ein transparenter Hintergrund kann nützlich sein, wenn ein Bildhintergrund oder eine Hintergrundtextur im Formularcontainer verwendet wird. Berücksichtige, dass die Lesbarkeit des Captchas erhalten bleibt.
13. Normale Elemente
Innerhalb des Formularcontainers können nicht nur Formularelemente sondern auch normale Elemente verwendet werden. Sogar ganze Presets sind möglich. Kombiniere beispielsweise Spalten-, Akkordeon- oder andere Presets mit dem Formular-Container, um jedes gewünschte Formular-Design zu erstellen.
Bei der Übermittlung der Formulareinträge werden nur Eingaben des Website-Besuchers übertragen.
Formulare testen
Ob das Formular funktioniert, kannst du bereits auf der Vorschau-Website teste. Die Website muss dazu also noch nicht veröffentlicht sein. Nutze das Formular einfach, wie ein Website-Besucher und schau nach, ob du bzw. dein Kunde die E-Mail-Benachrichtigung erhalten hat. In der Regel sollte die Benachrichtigung innerhalb von 5 bis 10 Minuten ankommen.
Solltest du mehrere Male hintereinander das Formular testen, kann es sein, dass deine IP automatisch für 24 Stunden blockiert wird und du vom Abschicken weiterer Formulareinträge abgehalten wird. Durch diesen Mechanismus schützen wir dich und deine Kunden vor Spam. Um das Formular vor Ablauf der 24 Stunden wieder zu nutzen, kannst du einfach deine letzten Einträge im Kundenportal unter "Formulareinträge" für das jeweilige Formular, das du getestet hast, löschen. Anschließend kanndst du auf der Website wieder Formulareinträge abschicken.
Webhooks
Ein Webhook ist eine Push-Benachrichtigung von einer Website an einen anderen Server. Im Editor können Webhooks genutzt werden, um Formulareinträge an einen anderen Server zu übermitteln. Jedes Mal, wenn ein Website-Besucher dieses Formular absendet, werden die Daten an die von dir angegebene URL gesendet.
Wofür Webhooks benutzt werden können
Standardmäßig wird jeder Formulareintrag per E-Mail an deinen Kunden gesendet und im Kundenportal bereitgestellt. Es ist auch verbreitet, die Formulardaten über andere Dienste zu verarbeiten.
Mögliche Anwendungsfälle sind:
- Erstellen eines Lead in einem CRM (z. B. Salesforce, Pipedrive)
- Einen Platz in einem Kalender buchen (z. B. Google Kalender)
- Übertragen der Daten an einen Instant Messenger (z. B. Slack)
- und vieles mehr
Webhook einrichten
Falls noch nicht geschehen, füge ein Formular auf der Website hinzu. Wie das funktioniert, haben wir im Abschnitt Formular hinzufügen bereits gezeigt. Wechsel anschließend in die Formular-Einstellungen, indem du doppelt auf Formular in der Breadcrumb oder auf Zu den Formular-Einstellungen im aktuell ausgewählten Formularelement klickst (hier am Beispiel des Datumsfelds).
Im Einstellungsfenster siehst du nun im Abschnitt Mitteilungen das Feld Webhook URL.
Je nachdem, welchen Service du mit deinem Formular verbinden willst, ist die hier einzutragende URL unterschiedlich. Welche URL hier einzutragen ist, erfährst du in der Dokumentation des ausgewählten Services. Sobald du die URL eingetragen hast, bestätige sie mit der [Enter]-Taste und speichere das Projekt anschließend.
Request Payload
Wann immer nun das Formular mit Informationen gefüllt und abgeschickt wird, werden die folgenden Daten an die von dir eingetragene URL geschickt.
Parameter | Beschreibung | |
data | Die angegebenen Informationen als JSON-Objekt formattiert. Beispiel:{ "Name": "Johne Doe", "Phone": "+1 2345 67890", "Email": "john@doe.com", "Message": "Hello World" }
Dabei werden die Bezeichnungen verwendet, die du ins Feld "Label" eingetragen hast.
|
|
form_id | Eine einmalige Nummer, die dieses spezielle Formular eindeutig bestimmt. Dies wird für dich im Hintergrund gehandhabt. | |
form_name | Der Name des Formulars welcher im Feld "Bezeichnung" eingetragen wurde
|
|
submitted_at | Das Datum inklusive Uhrzeit an dem das Formular abgeschickt wurde, formattiert nach ISO 8601, z. B. "Thu, 21 Dec 2000 16:01:07 +0200" | |
Die Webhook-Funktion mit Zapier benuzten
Zapier.com bietet Workflows zur Automatisierung der gemeinsamen Nutzung von Webanwendungen. Es können beispielsweise Formulareinträge an Zapier gesendet und in weiteren Schritten verarbeitet werden. Solche Automatisierungsvorgänge werden bei Zapier.com als "Zap" bezeichnet. Erstelle zunächst ein neues Zap und wähle "Webhooks by Zapier" als Auslöser/Trigger.
Sobal du den Trigger ausgewählt hast, kannst du auf "Test" klicken, um dir die individuelle Webhook URL anzeigen zu lassen.
Kopiere diese URL wie oben beschrieben in das Feld "Webhook URL":
Speichere deine Änderungen und führe folgende Schritte aus:
- Bewege deine Maus zum Preview-Icon in der linken oberen Menüleiste
- Klicke in der sich öffnenden Dropdown-Liste auf Website öffnen
- Trage nun im Formular auf der Website ein paar Testwerte ein und schicke das Formular ab
- Gehe anschließend zurück zu Zapier.com und klicke auf "Test this Step"
Hier werden nun die Testwerte angezeigt, sofern du alles richtig gemacht hast. Anschließend können weitere Schritte für die Verarbeitung der Daten konfiguriert werden. Je nachdem an welches Tool (Drittanbieter) die Informationen übergeben werden, sind hier ggf. weitere Schritte innerhalb des Tools und Zapier erforderlich.
Kommentare
0 Kommentare
Zu diesem Beitrag können keine Kommentare hinterlassen werden.