Beiträge in diesem Abschnitt

Weitere anzeigen

Widgets: Kontaktformulare

  • Aktualisiert

Widget-Kategorien: Unternehmen

Mit dem Kontaktformular-Widget baust du ein Webformular in deine Website ein, etwa für Newsletter-Anmeldungen, Kundenfragen oder einfach zum Sammeln von Feedback. Deinen Besuchern stehen im Kontaktformular-Widget verschiedene Eingabefelder zur Verfügung: Text, Dropdown, Radio-Buttons, Kontrollkästchen, Datum, Uhrzeit, E-Mail und Telefonnummer.

Warnung: Dupliziere Kontaktformulare besser nicht; das duplizierte Formular macht in der Regel Probleme.

Wie du Widgets hinzufügst, erfährst du unter „Widgets hinzufügen".

Inhalts-Editor: Das Formular konfigurieren

Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option für den Inhalts-Editor.

Kontaktformular-Felder

Bestehende Felder änderst du, indem du in der Liste auf den Namen des Felds klickst.

Um neue Felder hinzuzufügen, klicke auf Feld hinzufügen.

Nachdem du ein bestehendes Feld angeklickt oder ein neues Feld hinzugefügt hast, erscheinen zusätzliche Einstellungen. Viele Einstellungen hängen vom ausgewählten Feldtyp ab.

Hinweis:

  • Bei Radio-Buttons und Kontrollkästchen kannst du Bilder hinzufügen, die für die Optionen angezeigt werden. Die Bilder erscheinen nicht in der E-Mail, die du aus den Formulareinsendungen erhältst, aber die ausgewählte Beschriftung erscheint (auch wenn sie auf der Website ausgeblendet ist).
  • Beachte, dass das Aussehen der Eingabefelder auf deiner Live-Website je nach verwendetem Browser leicht von dem abweichen kann, was du im Editor siehst.

Einstellungen und Hinweise zu Kontaktfeldern

  • Die meisten Feldtypen haben diese Optionen:
    • Pflichtfeld. Wenn ein Pflichtfeld leer bleibt, erscheint beim Absenden des Formulars ein roter Rahmen darum. Derzeit wird kein Hinweis ergänzt (zum Beispiel ein Sternchen), du kannst aber manuell einen zur Feldbezeichnung oder zum Platzhalter hinzufügen.
    • Neue Zeile ab diesem Feld starten.
    • Feldgröße. Passe die Breite des Felds an.
  • Bei Radio-Buttons und Kontrollkästchen kannst du Bilder hinzufügen, die für die Optionen angezeigt werden. Die Bilder erscheinen nicht in der E-Mail, die du aus den Formulareinsendungen erhältst, aber die ausgewählte Beschriftung erscheint (auch wenn sie auf der Website ausgeblendet ist).
  • Zeitfeld: Der Schalter 24-Stunden-Zeitformat verwenden wirkt sich nur auf die in den Einsendungen angezeigte Uhrzeit aus; das Format der Zeitauswahl, das Besucher sehen, hängt von deren Browsereinstellungen ab.
  • Datei-Anhang-Feld:
    • Der Dateiname darf beim Hochladen kein Leerzeichen enthalten.
    • Die maximale Dateigröße für Anhänge beträgt 10 MB.
    • Pro Datei-Anhang-Feld kann nur eine Datei hochgeladen werden (wenn mehrere Dateien hochgeladen werden müssen, muss für jede ein eigenes Feld eingefügt werden).
    • Die folgenden Dateiformate werden unterstützt: .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar sowie alle Videodateiformate.
    • Eingereichte Datei-Anhänge verfallen nach 90 Tagen.
    • Dateien werden nicht zum Media Manager hinzugefügt.
  • Telefonnummernfeld: Das Telefonnummernfeld prüft die Validierung, um sicherzustellen, dass die Formatvorgaben erfüllt sind; ist das nicht der Fall, erscheint ein Fehler mit einer Meldung. Die Vorgaben sind: mindestens eine Zahl und keine ungültigen Zeichen. Neben Zahlen sind Leerzeichen, Pluszeichen (+), Bindestriche (-) und Punkte (.) gültige Zeichen.

Senden-Button

Passe den Text an, der auf dem Senden-Button erscheinen soll.

reCAPTCHA

Neue Formulare erhalten standardmäßig eine reCAPTCHA-Prüfung. Sie schützt dein Formular vor Spammern und beschleunigt das Absenden für deine Besucher.

Wähle eine Position für das reCAPTCHA.

Lege fest, ob das reCAPTCHA als Symbol oder als Text im Formular angezeigt wird.

Hinweis: Das reCAPTCHA kann nicht deaktiviert werden.

Einsendungen (Optionen und Einstellungen für nach dem Absenden eines Formulars)

Benachrichtigung über neue Einsendungen

An welche E-Mail-Adresse und mit welchem Betreff die Formularantworten gehen, legst du unter Neue Versandbenachrichtigung fest. Trage die E-Mail-Adresse unbedingt in das Feld Formulare werden gesendet an ein; nur dann erhältst du eine Kopie der eingereichten Informationen.

Bleibt das Feld Formulare werden gesendet an leer, dient die primäre E-Mail-Adresse aus der Content Library als Empfänger. Gibt es keine solche Adresse, gehen die Einsendungen standardmäßig an den Kontoinhaber. Alle Antworten landen auf der Seite mit den Formularantworten.

Aktionen nach dem Absenden

Klicke auf Aktionen nach Übermittlung, um Folgendes einzurichten:

  • Dankes- und Fehlermeldungen. Nutze den Rich Text Editor, um Farbe, Hervorhebungen (fett, kursiv und unterstrichen) und Aufzählungen hinzuzufügen und Text in die Felder einzugeben.
  • Weiterleitungseinstellungen. Du kannst auf eine Seite deiner Website oder eine externe Website weiterleiten.
  • E-Mail-Einstellungen: Standardmäßig wird eine automatische Antwort an die Person gesendet, die das Formular abgeschickt hat, zusammen mit einer Kopie ihrer Einsendung (sofern die angegebene E-Mail-Adresse gültig ist). Wenn diese Option aktiviert ist, gibt es die folgenden zusätzlichen Einstellungen.
    • Automatische Antwort an den Formularabsender. Standardmäßig wird eine automatische Antwort an die absendende Person gesendet (sofern die angegebene E-Mail-Adresse gültig ist). Um das auszuschalten, deaktiviere die Option Automatische Antwort an den Formularabsender.
    • Formularname. Du kannst außerdem den Formularname festlegen (der Name, den du hier eingibst, erscheint im Feld „From" der gesendeten E-Mail). Wenn die Einstellung „Automatische Antwort" deaktiviert ist, steht diese Einstellung nicht zur Verfügung.
    • E-Mail-Betreffzeile. Wenn die Einstellung „Automatische Antwort" deaktiviert ist, steht diese Einstellung nicht zur Verfügung.
    • E-Mail-Nachricht. Wenn die Einstellung „Automatische Antwort" deaktiviert ist, steht diese Einstellung nicht zur Verfügung.
    • eine Kopie des ausgefüllten Formulars des Absenders beifügen. Diese Option ist standardmäßig aktiviert. Entferne das Häkchen, um sie zu deaktivieren. Wenn die Einstellung „Automatische Antwort" deaktiviert ist, steht diese Einstellung nicht zur Verfügung.

Tracking

Um deinem Formular Tracking-Code hinzuzufügen, klicke auf Tracking und füge Conversion-Code oder AdWords in das dafür vorgesehene Feld ein.

Formulartitel

Gib einen Formulartitel ein. Um den Formulartitel auszublenden, klicke auf das Augensymbol.

Hinweis: Ein geänderter Formulartitel greift erst, nachdem eine neue Antwort eingereicht wurde. Soll es schnell gehen, schicke einfach eine Testantwort ab und warte ein paar Minuten, bis das Formular aktualisiert ist.

Tab „Integrationen" (Angebote von Drittanbietern)

Über den Tab Integration sendest du Daten erfolgreicher Einsendungen an einen Drittanbieterdienst. Mehr Informationen findest du weiter unten im Abschnitt „Kontaktformular-Integrationen (zusätzliche Konfigurationsoptionen)".

Kontaktformular-Integrationen (zusätzliche Konfigurationsoptionen)

Um die Reichweite deines Kontaktformulars zu erweitern, verbinde es mit verschiedenen Drittanbieterlösungen.

Um eine Integration hinzuzufügen, klicke im Inhaltsbereich auf den Tab Apps & Integrations.

Hinweis: Wir bieten Mailchimp und Constant Contact nicht mehr als Kontaktformular-Integrationen an. Wenn du sie zuvor installiert hattest, bleiben sie für deine Website weiterhin verfügbar.

Google-Sheets-Integration

Mit der Google-Sheets-Integration landen die Daten jeder Kontaktformular-Einsendung sofort in einer Tabelle in Google Sheets. Übernommen werden alle Kontaktfelder des Formulars, dazu ein Zeitstempel, wann das Formular abgeschickt wurde.

  1. Klicke auf Google Sheets und dann auf Mit Google anmelden.
  2. Klicke auf Zulassen, um die Berechtigungen zur Verbindung mit deinem Google-Konto zu erteilen. Wenn dein Computer mit mehreren Google-Konten verbunden ist, wähle das Konto, das du mit diesem Formular verbinden möchtest.
  3. Wähle, ob du Daten zu einer bestehenden oder zu einer neuen Tabelle hinzufügen möchtest.
  4. Wähle die Tabelle, an die du die Formulardaten senden möchtest. Du kannst die Tabelle aus einer Liste auswählen oder über die Suchleiste eine bestimmte Tabelle finden.

Hinweis:

  • Wenn du mehrere Formulare auf der Website hast, kannst du jedes mit einer anderen Tabelle verbinden, auch mit Tabellen in verschiedenen Google-Konten.
  • Du kannst mehrere Formulare mit derselben Tabelle verbinden. Achte in diesem Fall darauf, dass die Felder und ihre Reihenfolge im Formular identisch sind, damit die eingereichten Informationen passen.
  • Wenn du Formulardaten an eine Google-Tabelle sendest, kannst du die Daten trotzdem als .csv-Datei herunterladen und weiterhin E-Mails zu Formular-Einsendungen erhalten.

Webhooks-Integrationen

Viele Online- und Cloud-Dienste lassen sich über sogenannte Webhooks anbinden. Ein Webhook schickt Benachrichtigungen an eine bestimmte Webadresse, die Endpoint-URL. Auf diesem Weg kann dein Kontaktformular bei jedem Absenden ein Ereignis senden.

So stellst du die Verbindung zu einem anderen Dienst her: Erstelle bei deinem Wunschdienst eine eigene Endpoint-URL und füge sie im Kontaktformular in das Webhooks-Integrationsfeld ein. Bei jeder Einsendung schickt das Formular dann eine POST-Anfrage an den Endpoint, mit den Daten im JSON-Format im Body. So können die JSON-Daten aussehen:

{"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":"test@example.com","Phone":"(555).555.1212","Message":"Webhook Form Submission!"}

Hinweis: „Submission Date" und „Form Title" werden immer bereitgestellt. Die übrigen Felder (field_name : value) richten sich nach den im Formular konfigurierten Feldern. Alle Feldinformationen werden als String gesetzt und in Anführungszeichen gestellt. Zum Beispiel wird 7 als „7" gesendet.

Eine Endpoint-URL erstellen

Ein Endpoint liegt bei einem Drittanbieterdienst (zum Beispiel Zapier oder Slack) oder auf einem Server, den du selbst betreibst. Er ist eigens dafür eingerichtet, die Benachrichtigungen des Webhooks zu empfangen.

Ideen für Integrationen:

  • Slack. Eine robuste Messaging-App, die du verbinden kannst, um Benachrichtigungen zu erhalten, sobald Formulardaten eingereicht werden.
  • Eigene Integration. Erstelle deine eigenen Webhooks, um sie in das Kontaktformular einzubinden. Speichere zum Beispiel Einsendungen in einer Datenbank oder verbinde eigene Apps oder Drittanbieterdienste.

Beispiel: Webhooks-/Endpoint-URL-Einrichtung bei Slack

  1. Öffne in der Slack-App das Haupt-Dropdown des Kontos und klicke dann auf Apps & Integrations.
  2. Die Slack-Website öffnet sich. Klicke oben rechts auf Bauen.
  3. Klicke auf Eine benutzerdefinierte Integration erstellen.
  4. Wähle Eingehende Webhooks.
  5. Wähle einen bestehenden Channel oder erstelle einen neuen Channel, in dem deine Nachrichten gepostet werden.
  6. Kopiere deine Webhooks-URL.
  7. Passe die Einstellungen und Optionen nach Wunsch an und klicke dann auf Einstellungen speichern.
  8. Öffne den Editor des Kontaktformulars und füge deine Webhooks-URL in das Feld Webhooks ein.
  9. Klicke auf Fertig.

Sieh dir deine Website in der Vorschau an und schicke das Kontaktformular ab, um die Integration zu testen.

Ab jetzt bekommst du bei jeder Einsendung deines Kontaktformulars eine Nachricht auf Slack.

Design-Editor: Das Formular gestalten

Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option zum Bearbeiten des Designs.

Layout

Im Tab Layout:

  • Klicke auf das Layout-Symbol, um ein Layout-Design für das Kontaktformular zu wählen.
  • Um die Ausrichtung des Formulars zu ändern, klicke auf Links oder Rechts.

Artikel

Im Tab Artikel:

  • Um Feldstil und Feldtext zu bearbeiten, klicke auf Felder.
  • Um Button-Stil und Button-Text zu bearbeiten, klicke auf Button. Um zum Thema-Stil zurückzukehren, klicke auf Auf dem Button "Zum Thema zurücksetzen“.

Frame

Im Tab Frame:

  • Um den Rahmenstil zu bearbeiten, klicke auf Rahmenformat. Du kannst den Hintergrund ändern, indem du eine Farbe oder ein Bild hinzufügst.
  • Um den Textstil des Titels zu ändern, klicke auf Formulartitel.
  • Um den Textstil der Einsendungsbenachrichtigung zu ändern, klicke auf Übermittlungsnachricht.

Informationen zu Design-Optionen, die nicht speziell für dieses Widget gelten (zum Beispiel Layout, Stil oder Abstand), findest du unter „Widget-Design".

Überblick über Formularantworten: Einsendungen von deiner Website

Es gibt mehrere Stellen, an denen du auf Antworten zugreifen kannst: das Projekt-Dashboard, den Editor und das Formular selbst.

Hinweis: Formular-Einsendungen, die über den Vorschau-Link oder die Vorschau auf der Website gesendet werden, gehen an den festgelegten Empfänger (oder an den Kontoinhaber, wenn kein Empfänger festgelegt wurde). Sie erscheinen jedoch nicht in den Antworten der Website und sind nicht im CSV-Export enthalten.

Projekt-Dashboard (verwalten, löschen und exportieren)

So gelangst du im Projekt-Dashboard zu den Formularantworten:

  1. Klicke in der Seitenleiste auf Mehr und dann auf Projekt-Dashboard. Wähle Formularantwort (in der Optionsleiste unter Webseiten-Überblick).
  2. Um die Antworten zu exportieren, klicke oben rechts im Bereich „Form Responses" auf Export to CSV.
  3. Um Antworten zu verwalten, klicke auf Antworten verwalten.
  4. Die Seite „Form Responses" öffnet sich und ermöglicht es dir, jede Antwort auf jedes Formular der Website zu entfernen. Im Suchfeld Suchantworten kannst du nach relevanten Antworten suchen. Achte darauf, nach dem genauen Namen, dem genauen Ausdruck oder den genauen Zeichen zu suchen.
  5. Klicke auf den jeweiligen Formular-Tab, um eine Tabelle zu öffnen, die Folgendes enthält:
    • das Datum der Einsendung der Formularantwort.
    • die Eingaben aus jedem der Formularfelder.
    • die Option, die Formularantwort zu löschen.

Im Editor (verwalten und löschen)

So gelangst du im Editor zu den Formularantworten:

  1. Klicke in der Seitenleiste auf Mehr und dann auf Einstellungen.
  2. Klicke auf Formularantworten verwalten.
  3. Der Bildschirm „Form Responses" öffnet sich und ermöglicht es dir, jede Antwort auf jedes Formular der Website zu entfernen. Im Suchfeld Suchantworten kannst du nach relevanten Antworten suchen. Achte darauf, nach dem genauen Namen, dem genauen Ausdruck oder den genauen Zeichen zu suchen.
  4. Klicke auf den jeweiligen Formular-Tab, um eine Tabelle zu öffnen, die Folgendes enthält:
    • das Datum der Einsendung der Formularantwort.
    • die Eingaben aus jedem der Formularfelder.
    • die Option, die Formularantwort zu löschen.

Über das Formular selbst (nur Export)

So exportierst du Antworten über das Formular:

  1. Gehe im Editor der Website zum gewünschten Formular.
  2. Klicke mit der rechten Maustaste auf das Formular.
  3. Wähle im Kontextmenü Antworten herunterladen.

Hinweis: Wenn die Option nicht verfügbar ist, kann das bedeuten, dass es auf der Live-Website noch keine Antworten gab.

Auf Kontaktformular-Einsendungen von Kunden antworten

Auf die Kontaktformular-Einsendung eines Kunden kannst du direkt aus deinem E-Mail-Postfach antworten: Klicke einfach in der E-Mail vom Webseiten-Baukasten auf Antwort an den Kunden. Die E-Mail-Adresse der absendenden Person steht dann automatisch im Feld „To". Beachte: Hat der Kunde mehrere E-Mail-Adressen angegeben, wird nur die erste verwendet.

Hinweis: Eine so verschickte Antwort kann je nach E-Mail-Adresse und Einstellungen der absendenden Person als Spam markiert werden. Sicherer ist es, ihre E-Mail-Adresse zu kopieren und stattdessen eine neue E-Mail zu schreiben.

Ein DSGVO-freundliches Kontaktformular einrichten

Um beim Absenden des Kontaktformulars die Einwilligung deiner Besucher einzuholen, füge deinem Kontaktformular ein neues Feld hinzu und wähle als Field Type entweder Opt-In oder Free Text.

Opt-in vs. Free Text

Ein Opt-in-Feld muss die absendende Person anhaken, sonst lässt sich das Formular nicht abschicken. Das Feld bringt außerdem einen Standardtext mit: „By checking, I agree to share my form responses.".

Das Free Text-Feld hingegen zeigt nur den gewünschten Hinweis an. Als Mehrzweckfeld enthält es keinen Standard- oder Vorschlagstext.

So fügst du ein Opt-in- oder Free Text-Feld hinzu:

  1. Öffne den Inhalts-Tab des Formulars. Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option für den Inhalts-Editor.
  2. Klicke auf Feld hinzufügen.
  3. Klicke in das Dropdown Feldtyp und wähle entweder Opt-in oder Free Text.
  4. Richte das Feld nach Wunsch ein.

Häufige Fragen und Fehlerbehebung

Hinweis: Ist kein Empfänger für Einsendungen hinterlegt, dient die primäre E-Mail-Adresse aus der Content Library als Empfänger. Gibt es keine solche Adresse, gehen die Einsendungen standardmäßig an den Kontoinhaber. Alle Antworten landen auf der Seite mit den Formularantworten.

Ich erhalte keine Formular-Einsendungen

Wenn du keine Formular-Einsendungen erhältst, die über das Kontaktformular-Widget gesendet werden, liegt das höchstwahrscheinlich daran, dass unsere Mails auf deinem E-Mail-Server als Spam gefiltert werden.

Wenn du keine E-Mails vom Webseiten-Baukasten erhältst, sieh in deinem Spam-Ordner nach. Falls die E-Mail dort auch nicht ist, setze die IP-Adressen 167.89.22.215, 149.72.216.48, 149.72.184.31, 149.72.166.161 und 149.72.162.205 in den Einstellungen deines E-Mail-Anbieters auf die Positivliste.

Weitere Tipps zur Fehlerbehebung:

  • Prüfe die Formularantworten, um sicherzustellen, dass das Kontaktformular funktioniert. Du kannst auf das Kontaktformular klicken und auf Formularantworten klicken, um sie herunterzuladen.
  • Prüfe, ob die E-Mail-Adresse gültig ist. Wenn du mehrere E-Mail-Adressen einträgst, trenne sie mit einem Komma (ohne Leerzeichen).
  • Sieh in deinem Spam-Ordner nach.
  • Prüfe deine E-Mail-Filter- und Sperrlisteneinstellungen, um sicherzustellen, dass die Mails nicht blockiert werden.
  • Füge no-reply@multiscreensite.com zu deiner E-Mail-Positivliste hinzu.
  • Erstelle eine neue Seite und füge dort dein Kontaktformular ein, um zu sehen, ob es funktioniert.
  • Schalte in den Website-Einstellungen alle eigenen Skripte deiner Website aus.

Hinweis: Wenn dein Kontaktformular nach dem Durchgehen der Checkliste zur Fehlerbehebung immer noch nicht funktioniert, wende dich an deinen E-Mail-Anbieter, um zu klären, warum die E-Mails der Kontaktformular-Einsendungen nicht ankommen.

Wenn es auf einer anderen Seite deiner mobilen Website funktioniert, aber nicht auf der vorgesehenen Seite, liegt das meist an einem eigenen Skript, das dein Kontaktformular stört. Setze entweder die Seite zurück oder prüfe das Head-HTML der Seite und der Website auf eigene Skripte, die dieses Problem verursachen könnten.

Wie richte ich ein, dass eine absendende Person nach dem Absenden eine automatische E-Mail erhält?

Es gibt eine standardmäßig aktivierte Einstellung, die eine automatische E-Mail zusammen mit einer Kopie der Einsendung sendet.

So verwaltest du diese Einstellung:

  1. Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option für den Inhalts-Editor.
  2. Wähle den Tab Versand.
  3. Klicke auf Aktionen nach Übermittlung.
  4. Scrolle nach unten zu E-Mail Einstellungen.

Mehr Informationen zu Aktionen nach dem Absenden findest du im Abschnitt „Aktionen nach dem Absenden" in diesem Artikel.

Verwandte Beiträge

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.