Kontaktformular hinzufügen

Übersicht

Mit dem Element „Kontaktformular“ lässt sich ein komplettes Webformular zu Ihrer Website hinzufügen. Kontaktformulare können zahlreiche unterschiedliche Eingabemöglichkeiten für Besucher enthalten, darunter Text, Dropdownmenüs, Optionsfelder, Kontrollkästchen, Datum, Uhrzeit, E-Mail-Adresse und Telefonnummern. Sie können dieses Formular für Newsletterabonnements und Kundenfragen ebenso verwenden wie zur Erfassung von Feedback der Besucher Ihrer Website.

Anleitung

1. Fügen Sie Ihrem Website-Builder das Element „‚Kontaktformular“ hinzu. Mehr zum Hinzufügen von Elementen zu Ihrer Website erfahren Sie unter Elemente hinzufügen. Nach der Platzierung des Elements wird der Inhaltseditor geöffnet.

2. Entscheiden Sie, welche Informationen Sie von Ihren Besuchern erfassen möchten, und bearbeiten Sie dann das vorhandene Feld, indem Sie auf den Feldnamen klicken.

3. Fügen Sie über den Button „Feld hinzufügen“ neue Felder hinzu.

addacontactform_1_en-US.png

4. Klicken Sie auf die Registerkarte „Übermittlung“. Legen Sie im Bereich für die Empfänger die E-Mail-Adresse und den Betreff für den Empfang von Formularantworten fest. addacontactform_2_en-US.png5. Legen Sie im Bereich „Aktionen nach Übermittlung“ die Bestätigungs- und die Fehlermeldung fest, die Besuchern beim Absenden eines Formulars angezeigt werden. Mit dem Rich-Text-Editor können Sie im Textfeld die Textfarbe ändern, Text hervorheben (fett, kursiv und unterstrichen) und Aufzählungszeichen hinzufügen.

addacontactform_3_en-US.png6. Geben Sie im Bereich „Tracking“ den Tracking-Code für das Formular ein. Wenn Sie über AdWords- oder anderen Conversion-Code verfügen, können Sie diesen Code hier einfügen. addacontactform_4_en-US.png

Ihr DSGVO-konformes Kontaktformular einrichten

Um die Zustimmung Ihrer Besucher bei der Übermittlung des Kontaktformulars einzuholen, fügen Sie einfach ein neues Feld zu Ihrem Kontaktformular hinzu, indem Sie den obigen Anweisungen folgen, und wählen Sie entweder die Option „Opt-in“ oder „Freitext“ aus.

Opt-in-Feld hinzufügen

Wenn Sie das Opt-in-Feld hinzufügen, wird ein Kontrollkästchen hinzugefügt, das die Zustimmung Ihrer Besucher zur Weitergabe von Formularantworten bestätigt. Dieses Feld musst aktiviert werden, um die Formularantwort zu senden.

Der Standardtext lautet „Ich stimme der Übermittlung und Verarbeitung meiner Nachricht zu“, aber Sie können diesen Text durch einen benutzerdefinierten ersetzen, wenn Sie möchten.

Freitextfeld hinzufügen

Sie können sich dafür entscheiden, eine andere Benachrichtigung mithilfe von Freitext hinzufügen. In diesem Fall erscheint das Feld einfach als Benachrichtigung unter den Feldern Ihres Kontaktformulars.

Bitte beachten Sie: Im Freitextfeld gibt es keinen standardmäßigen Platzhaltertext mit DSGVO- oder Datenschutz-Bezug, da es sich um ein Mehrzweckfeld handelt. Sie müssen also Ihren eigenen Text dort platzieren.

Formularantworten löschen

Um über ein Kontaktformular erhaltene Antworten zu löschen, können Sie das Feld „Formularantworten verwalten“ im Tab „Inhalt“ Ihres Editor-Menüs auf der linken Seite öffnen.

Die Seite mit den Formularantworten, die sich daraufhin öffnet, ermöglicht es Ihnen, jede Antwort auf ein Formular auf dieser Website zu entfernen. Im Suchfeld „Besucherinformationen suchen“ können Sie nach relevanten Antworten suchen. Achten Sie darauf, dass Sie nach dem genauen Namen, dem fraglichen Ausdruck oder den betreffenden Zeichen suchen.

Wenn Sie auf den entsprechenden Formular-Tab klicken, wird eine Tabelle geöffnet, die Folgendes enthält:

  • Das Datum, an dem die Formularantwort gesendet wurde
  • Die Eingabe aus jedem der Formularfelder
  • Die Option, die Formularantwort zu löschen

Integrationen

Sie erhöhen die Reichweite Ihres Kontaktformulars, indem Sie es in Google Tabellen, MailChimp, Constant Contact oder eine Drittanbieter-Anwendung mithilfe von Webhooks integrieren.

Integration in Google Tabellen

Sie können die in ein Kontaktformular eingegebenen Daten direkt einer Google Tabelle hinzufügen. Sämtliche Kontaktfelder im Formular werden einschließlich des Zeitstempels der Formularübermittlung in die Tabelle aufgenommen.

Schritte

Klicken Sie in den allgemeinen Einstellungen des Kontaktformulars auf die Registerkarte Integration.
addacontactform_5_en-US.png

Erweitern Sie die Option „Google Tabellen“ und klicken Sie auf „MIT GOOGLE ANMELDEN“.

addacontactform_6_en-US.png

Klicken Sie auf „Zulassen“, um die Berechtigung zum Herstellen einer Verbindung mit Ihrem Google-Konto zu erteilen. Wenn Ihr Computer mit mehreren Google-Konten verknüpft ist, wählen Sie das Konto aus, mit dem Sie das Formular verknüpfen möchten.

Wählen Sie aus, ob Sie die Daten einer vorhandenen oder einer neuen Tabelle hinzufügen möchten.

Wählen Sie die Tabelle aus, der Sie die Formulardaten hinzufügen möchten. Sie können die Tabelle aus einer Liste auswählen oder in der Suchleiste nach einer bestimmten Tabelle suchen.

Zusätzliche Anmerkungen

  • Wenn Ihre Website mehrere Formulare enthält, können Sie jedes Formular mit einer anderen Tabelle verknüpfen, einschließlich Tabellen in verschiedenen Google-Konten.
  • Sie können auch mehrere Formulare mit derselben Tabelle verknüpfen. Stellen Sie in diesem Fall sicher, dass die Felder und deren Reihenfolge im Formular identisch sind und den übermittelten Daten entsprechen.
  • Wenn Sie die Formulardaten an eine Google Tabelle senden, können Sie diese auch weiterhin als CSV-Datei herunterladen oder per E-Mail versenden.

Integration in MailChimp

MailChimp ist ein nützliches Tool zur Verbreitung von E-Mail-Kampagnen, Newslettern usw. Mithilfe der neuen Formularintegration können Websiteinhaber Kontaktlisten mit potenziellen Kunden (Websitebesuchern) verwalten, indem die über das Formular eingegebenen E-Mail-Adressen erfasst und automatisch an MailChimp gesendet werden.

Sie benötigen ein MailChimp-Konto. Sobald Sie über ein MailChimp-Konto verfügen, können Sie darin eine E-Mail-Liste erstellen, in der die Kontaktdetails gesammelt werden.

Schritte

Klicken Sie in den allgemeinen Einstellungen des Kontaktformulars auf die Registerkarte „Integration“.

addacontactform_10_en-US.png

Erweitern Sie die Option „MailChimp“ und klicken Sie auf „Mit MailChimp verknüpfen“.

addacontactform_11_en-US.png

Melden Sie sich mit Ihren MailChimp-Anmeldeinformationen an.

Wählen Sie im Dropdownmenü die MailChimp-Kontaktliste aus.

addacontactform_18_en-US.png

Konfigurieren Sie die Formularfelder. Neben der E-Mail-Adresse kann das Kontaktformular automatisch die Felder für den Vor- und Nachnamen an MailChimp senden. Richten Sie dazu die Felder für E-Mail, Vor- und Nachnamen im Formular ein.

addacontactform_14_en-US.png

Integration in Constant Contact

Die Integration ähnelt der von MailChimp, wobei Websiteinhaber E-Mail-Listen in ihrem Constant Contact-Konto erstellen.

Sie benötigen ein Constant Contact-Konto. Sobald Sie über ein Constant Contact-Konto verfügen, können Sie darin eine E-Mail-Liste erstellen, in der die Kontaktdetails gesammelt werden.

Schritte

Klicken Sie in den allgemeinen Einstellungen des Kontaktformulars auf die Registerkarte „Integration“.

addacontactform_15_en-US.png

Erweitern Sie die Option „Constant Contact“ und klicken Sie auf „Mit Constant Contact verknüpfen“.

addacontactform_16_en-US.png

Melden Sie sich mit Ihren Constant Contact-Anmeldeinformationen an.

Wählen Sie im Dropdownmenü die Constant Contact-Liste aus.

addacontactform_18_en-US.png

Konfigurieren Sie die Formularfelder. Neben der E-Mail-Adresse kann das Kontaktformular automatisch den Vor- und Nachnamen sowie die Telefonnummer an Constant Contact senden. Richten Sie dazu die Felder für E-Mail, Vor- und Nachnamen im Kontaktformular ein. Die E-Mail-Adresse und die Textnachricht werden automatisch hinzugefügt.

addacontactform_19_en-US.png

Integration in Webhooks

Zahlreiche Online- und Cloud-Dienste ermöglichen die Integration über einen Pfad namens WebhooksWebhooks senden Benachrichtigungen an eine bestimmte Webadresse, die als Endpunkt-URL bezeichnet wird. Sie können das Kontaktformular so verknüpfen, dass beim Einsenden des Kontaktformulars ein Ereignis gesendet wird.

Um das Kontaktformular mithilfe von Webhooks mit einem anderen Dienst zu verbinden, erstellen Sie einfach eine benutzerdefinierte Endpunkt-URL mit dem gewünschten Dienst, die Sie dann in das Feld für die Webhooks-Integration im Kontaktformular einfügen. Sobald Sie eine Webhook-URL hinzugefügt haben, sendet Duda eine POST-Anforderung mit den Daten im JSON-Format an den Endpunkt, wenn das Kontaktformular auf der Website eingesendet wird. Nachfolgend ist ein Beispiel für die gesendeten JSON-Daten aufgeführt:

{"Submission Date":"06/02/2016 10:23:54","Form Title":"Kontakt","Name":"Tim Schmitt","Email":"test@beispiel.com","Phone":"0123/456789","Message":"Webhook Form Submission!"}

Hinweis: „Submission Date“ und „Form Title“ werden immer angegeben. Die übrigen Felder (field_name : value) basieren auf den im Formular konfigurierten Feldern.

Eine Endpunkt-URL erstellen

Endpunkte werden in Drittanbieter-Diensten (z. B. Zapier oder Slack) oder auf einem anderen, von Ihnen kontrollierten Server eingerichtet. Diese Endpunkte werden speziell dafür eingerichtet, um Benachrichtigungen des Webhook zu empfangen.

addacontactform_20_en-US.png

Möglichkeiten der Integration

Zapier – Die Verknüpfung des Kontaktformulars mit Zapier bietet unbegrenzte Möglichkeiten. Sie können Verbindungen zu fast allen modernen Cloud-Diensten herstellen, darunter CRMs wie Salesforce, Sugar CRM, Zoho und mehr.

Slack – Bei einer Verknüpfung mit dieser robusten Messaging-APP erhalten Sie Benachrichtigungen, sobald die Formulardaten gesendet werden.

Benutzerdefinierte Integration – Erstellen Sie Ihre eigenen Webhooks für die Integration mit dem Kontaktformular von Duda. Sie könne Einsendungen beispielsweise in einer Datenbank speichern oder diese mit benutzerdefinierten Apps oder Drittanbieter -Diensten verbinden.

Beispiel für die Einrichtung von Webhooks/Endpunkt-URL bei Slack

Öffnen Sie in der Slack-App das allgemeine Dropdownmenü Ihres Kontos und klicken Sie auf „Apps & Integrations“.

Die Slack-Website wird geöffnet. Klicken Sie oben rechts auf den Button „Build“.

Klicken Sie auf „Make a Custom Integration“.

Wählen Sie „Incoming Webhooks“ aus.

Wählen Sie einen vorhandenen Kanal aus oder erstellen Sie einen neuen Kanal, an den Ihre Nachrichten weitergeleitet werden.

Kopieren Sie Ihre Webhooks-URL.

Passen Sie die Einstellungen und Optionen nach Belieben an und klicken Sie auf „Save Settings“.

Kehren Sie zum Kontaktformular zurück und fügen Sie die Webhooks-URL in das Feld Webhooks ein. Klicken Sie auf „Fertig“, um die Einrichtung abzuschließen.

addacontactform_28_en-US.png

Zeigen Sie eine Vorschau für Ihre Website an und übermitteln Sie das Kontaktformular, um die Integration zu testen.

addacontactform_29_en-US.png

Wenn die Nachricht in Ihrem ausgewählten Kanal angezeigt wird, war die Einrichtung erfolgreich. Sie empfangen nun jedes Mal eine Nachricht auf Slack, wenn Ihr Kontaktformular übermittelt wird.

Dateianhang

Dateien können als Anlagen zu einem Kontaktformular hochgeladen werden. Hierfür können Sie ein entsprechendes Feld im Kontaktformular erstellen. Links zu den hochgeladenen Dateien sind in der Download-Datei der Formulareinsendungen sowie in allen Formularintegrationen wie Webhooks und Google Tabellen verfügbar.

Schritte

Fügen Sie einem beliebigen Kontaktformular ein neues Feld hinzu.

addacontactform_31_en-US.png

Wählen Sie im Dropdownmenü „Dateianhang“ aus. Sie können den Namen dieses Felds ändern, indem Sie den Platzhaltertext bearbeiten.

addacontactform_32_en-US.png

Es wird ein Link für den Dateiupload zum Formular hinzugefügt.

addacontactform_33_en-US.png

Design

Öffnen Sie den Designeditor, indem Sie in der oberen linken Ecke auf die Registerkarte „Design“ klicken. Wahlweise können Sie den Editor auch per Rechtsklick auf das Element und die Auswahl von „Design bearbeiten“ öffnen. Anschließend lassen sich das Button-Layout, Elemente, Rahmen und Abstände ändern.

addacontactform_34_en-US.png

Layout

Klicken Sie auf die Registerkarte „Layout“ und anschließend auf das Layoutsymbol, um ein anderes Layoutdesign für das Kontaktformular auszuwählen. Klicken Sie auf „Links“ bzw. „Rechts“, um die Formularfelder wie gewünscht auszurichten.

addacontactform_35_en-US.png

Element

Klicken Sie auf die Registerkarte „Element“, wenn Sie Feldstil und Feldtext bzw. Button-Stil und Button-Text ändern möchten. Sie können das Design von Feldern und Buttons ändern (z. B. Hintergrundfarbe und den Rahmenstil) sowie Änderungen am Feld- bzw. Button-Text vornehmen (z. B. Größe, Schriftart, Ausrichtung usw.). Mithilfe des Buttons „Globales Design wiederherstellen“ können Sie die Werte auf die Voreinstellungen zurücksetzen.

addacontactform_36_en-US.png

Rahmen

Klicken Sie auf die Registerkarte „Rahmen“, wenn Sie den Rahmenstil bearbeiten möchten. Sie können den Hintergrund festlegen, indem Sie eine Farbe einstellen oder ein Bild hinzufügen, die Textdarstellung der Sendebenachrichtigung ändern, einen Rahmen hinzufügen und die Schriftart des Formulartitels anpassen.

addacontactform_37_en-US.png

Abstand

Klicken Sie auf die Registerkarte „Abstand“, wenn Sie die inneren und äußeren Abstand des Kontaktformulars festlegen möchten. Mehr über Abstand erfahren Sie hier.

addacontactform_38_en-US.png

Anmerkungen

Kontaktformulare sind hervorragend geeignet, um wertvolle Informationen von Besuchern und Kunden einzuholen. Stellen Sie sicher, dass Sie Ihre E-Mail-Adresse im Schritt „Empfänger“ eingeben, damit Sie eine Kopie der abgesendeten Informationen erhalten.

Ressourcen

  • Mehr über das Bearbeiten von Widgets erfahren Sie unter Widgets bearbeiten.
  • Mehr zur Bearbeitung des Designs und Stils von Elementen erfahren Sie unter Element-Design.