Formulare hinzufügen

Formulare bieten Website-Besuchern die Möglichkeit mit dir in Kontakt zu treten. In diesem Artikel zeigen wir dir, wie du mit Sitejet Formulare auf deiner Website einfügst und optimal nutzt.

Basiswissen

Sitejet bietet dir eine Vielzahl von anwendungsstarken Presets. Mit Formular-Presets fügst du innerhalb von Sekunden ein funktionierendes Kontakformular hinzu. Zusätzliche Formular-Elemente bieten dir die Möglichkeit die Presets nach den individuellen Anforderungen deiner Kunden zu ergänzen. "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, sendet Sitejet automatisch Formulareinträge an die Login E-Mail-Adresse des Kunden. 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-Presets (orange), also fertige Kontaktformulare mit Standard-Feldern und die weiteren Formular-Felder (blau), um ein Kontaktforumlar weiter auf deine individuellen Bedürfnisse anzupassen.

Sobald du ein Kontaktformular-Preset auf die Website gezogen hast, steht dir ein voll funktionsfähiges Kontaktformular zur Verfügung. Wie du an der Breadcrumb sehen kannst, besteht ein Kontaktformularaus drei Ebenen:

• Dem Preset
• 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 Preset- und Element-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. In Sitejet reicht es, dieses Element hinzuzufügen und gemäß den eigenen Wünschen anzupassen. Hierfür bietet dir Sitejet viele Einstellungsmöglichkeiten.

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:

1. Trage neben "Maximaldatum" die Zahl "2" ein
2. Klicke auf "Tage von 'heute'"
3. 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:

1. Zurücksetzen des Formulars und Löschen aller eingegebenen Daten
2. Absenden des Formulars
3. 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 den Servern von Sitejet 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:

1.  Verwende eine E-Mail-Adresse, die über Sitejet verwaltet wird und mit einer über Sitejet registrierten Domain erstellt wurde, als Empfänger der Formulareingaben
2. 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.

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.

Webhooks

Ein Webhook ist eine Push-Benachrichtigung von einer Website an einen anderen Server. In Sitejet 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.

{
  "Name": "Johne Doe",
  "Phone": "+1 2345 67890",
  "Email": "john@doe.com",
  "Message": "Hello World"
}
		

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.

Klicke auf "View Webhook" um dir deine 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:

1. Bewege deine Maus zum Preview-Icon in der linken oberen Menüleiste
2. Klicke in der sich öffnenden Dropdown-Liste auf "Website öffnen"
3. Trage nun im Formular auf der Website ein paar Testwerte ein und schicke das Formular ab
4. 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.

Zurück zum Anfang