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 „Absenden“. 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“ 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 Konversionscode verfügen, können Sie diesen Code hier einfügen. addacontactform_4_en-US.png

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.

addacontactform_7_en-US.png

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

addacontactform_13_en-US.png

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.

addacontactform_9_en-US.png

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 VERBINDEN“.

addacontactform_11_en-US.png

Melden Sie sich mit Ihren MailChimp-Anmeldeinformationen an.

addacontactform_12_en-US.png

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 VERBINDEN“.

addacontactform_16_en-US.png

Melden Sie sich mit Ihren Constant Contact-Anmeldeinformationen an.

addacontactform_17_en-US.png

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

addacontactform_21_en-US.png

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

addacontactform_22_en-US.png

Klicken Sie auf „Make a Custom Integration“.

addacontactform_23_en-US.png

Wählen Sie „Incoming Webhooks“ aus.

addacontactform_24_en-US.png

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

addacontactform_25_en-US.png

Kopieren Sie Ihre Webhooks-URL.

addacontactform_26_en-US.png

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

addacontactform_27_en-US.png

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.

addacontactform_30_en-US.png

Dateianlagen

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ü „Dateianlage“ 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 „Allgemeines 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

Abstände 

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

addacontactform_38_en-US.png

Dateianlagen

Dateien können als Anlagen zu einem Kontaktformular hochgeladen werden. Hierfür können Sie ein entsprechendes Formularfeld erstellen. Besucher erhalten einen Link, mit dessen Hilfe sie Dateien über das Kontaktformular hochladen können.

So fügen Sie dem Formular diese Option hinzu:

  1. Fügen Sie ein neues Feld zu einem Kontaktformular hinzu.
  2. Wählen Sie aus dem Dropdownmenü „Dateianlage“ aus. Sie können diesen Bereich umbenennen, indem Sie den Platzhaltertext ändern.
  3. Es wird ein Link für den Dateiupload zum Formular hinzugefügt.

Anmerkungen

Kontaktformulare sind hervorragend geeignet, um Informationen von Besuchern und Kunden einzuholen. Stellen Sie sicher, dass Sie Ihre E-Mail-Adresse in den Empfängereinstellungen eingeben, damit Sie die 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.