Elemente - 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.

ABSCHNITTE

Basiswissen

Formular hinzufügen

Formulareinstellungen

Formular-Elemente

Webhooks


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.

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, reichen bereits wenige Klicks:

  1. Bewege deine Maus über "+ Inhalte hinzufügen"
  2. Klicke auf "Preset"
  3. Öffne den Abschnitt "Formulare" oder suche nach "form"
  4. Wähle eines der zur Verfügung stehenden Formulare aus und ziehe es an die gewünschte Stelle auf der Website

Sobald du das Preset auf die Website gezogen hast, steht dir ein voll funktionsfähiges Kontaktformular zur Verfügung. Ein Kontaktformular besteht aus drei Ebenen:

  • Dem Preset
  • Dem Formular-Container
  • und den Formular-Elementen

Hier im Beispiel ist ein E-Mail-Formular-Element ausgewählt, um die Struktur noch mal genauer zu zeigen. Über die Preset-Einstellungen links im Bild kannst du Designvorgaben bezüglich Farben und Darstellungsweisen treffen. Das Erscheinungsbild der Schrift auf der Website wird in den  Theme Einstellungen organisiert.


Formulareinstellungen

Mit den Formulareinstellungen gibst du das Verhalten des Formulars vor.

Über das Feld "Bezeichnung" vergibst du einen aussagekräftigen Namen. Der Vorteil ist, dass im Kundenportal die Formulareinträge jeweils nach Namen des Kontakformulars sortiert werden. Dadurch wissen du und dein Kunde jederzeit wo die Website-Besucher ihre Eingaben gemacht haben.

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

Sitejet stellt, wie eingangs bereits erwähnt, mehrere Formular-Elemente zur Verfügung. Im Folgenden gehen wir auf diese und deren Funktionen genauer ein.

Weitere Formular-Elemente kannst du hinzufügen, indem du folgende Schritte durchführst:

  1. Bewege deine Maus über "+ Inhalte hinzufügen"
  2. Klicke auf "Formular-Elemente"
  3. Wähle das entsprechende Element aus und ziehe es an die gewünschte Stelle innerhalb des Formulars

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. Mehrzeiliges Eingabefeld

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 bzw. Auswahlknöpfe 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.

Dropdown-Listen können helfen, das Formular einfach und ordentlich zu halten, falls es viele Optionen gibt.

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 Formulareinstellungen 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.

Wenn du in den Formulareinstellungen die Option "Mail versenden" deaktivierst, kannst du das Captcha-Feld auch ohne entsprechender E-Mail-Adresse aus dem Formular entfernen. In diesem Fall werden die Formulareinträge im Kundenportal aufgelistet und nicht per Email verschickt. 

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.


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 den Breadcrumbs klickst.

Alternativ kannst du auch einmal auf "Zu den Formular-Einstellungen" im aktuell ausgewählten Formularelement klicken (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.

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 über den Menüeintrag "Vorschau" oben rechts im Website Builder (CMS)
  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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen