So erstellen Sie ein Divi-Kontaktformular in WordPress

Veröffentlicht: 2022-01-20
how to create a divi contact form

Suchen Sie nach einer einfachen Möglichkeit, ein Divi-Kontaktformular für Ihre WordPress-Site zu erstellen?

Divi ist eines der beliebtesten WordPress-Themes auf dem Markt. Es wird mit einem benutzerfreundlichen Builder geliefert, mit dem Sie Ihre Website vom Frontend aus anpassen können. Sie können Seitenmodule wie den Call-to-Action-Button, das Kontaktformular und mehr hinzufügen.

Mit dem Modul Divi Kontaktformular können Sie ein Kontaktformular ohne Dienste von Drittanbietern erstellen und einfügen. Dies ist großartig, wenn Sie auf einfache Weise ein einfaches Kontaktformular auf Ihrer Website hinzufügen möchten.

Sie benötigen jedoch ein leistungsstarkes Formularerstellungs-Plugin wie WPForms für erweiterte Funktionen wie Benutzerübermittlungen, E-Mail-Marketing und mehr.

Aus diesem Grund enthält Divi Builder auch ein WPForms-Modul, mit dem Sie ganz einfach professionelle Kontaktformulare mit wenigen Klicks hinzufügen können.

In diesem Beitrag zeigen wir Ihnen diese beiden Methoden zum Erstellen eines Divi-Kontaktformulars in WordPress:

  • Erstellen Sie ein Kontaktformular mit Divi Builder
  • Erstellen Sie einen Divi-Kontakt mit WPForms

Erstellen eines Kontaktformulars mit Divi Builder

Wenn Sie Divi noch nicht haben, müssen Sie sich zunächst für ein Divi-Konto anmelden . Anschließend können Sie auf das Dashboard zugreifen und Ihre Designdatei herunterladen.

Divi

Nachdem Sie das Divi-Design auf Ihrem WordPress-Dashboard installiert und aktiviert haben, öffnen Sie eine beliebige Seite oder einen Post, auf der Sie Ihr Divi-Kontaktformular hinzufügen möchten.

Im Post-Editor sehen Sie die Schaltfläche Divi Builder verwenden . Klicken Sie auf die Schaltfläche, um den Builder im Frontend Ihrer Website zu starten.

divi builder post editor

Auf dem nächsten Bildschirm sehen Sie die Optionen zum Erstellen einer Seite von Grund auf, zum Auswählen eines vorgefertigten Layouts oder zum Klonen einer vorhandenen Seite.

Für dieses Tutorial beginnen wir mit der neuen Seite und fügen das Kontaktformular hinzu.

build from scratch divi

Dann sehen Sie den Divi-Builder, in dem Sie eine Zeilenvorlage auswählen können, die Ihren Anforderungen entspricht.

add row divi builder

Nachdem Sie die Zeile hinzugefügt haben, können Sie das Bedienfeld „ Modul einfügen“ sehen, in dem Sie verschiedene Arten von Inhaltsmodulen hinzufügen können.

Wenn Sie nach unten scrollen, finden Sie das Kontaktformular -Modul. Klicken Sie einfach darauf, um das Divi-Kontaktformular auf Ihrer Website einzufügen.

divi contact form module

Standardmäßig besteht das Kontaktformular aus drei Formularfeldern: Name, E-Mail und Nachricht. Sie können auf die Schaltfläche Neues Feld hinzufügen klicken, um weitere Formularfelder nach Ihren Bedürfnissen hinzuzufügen.

divi contact form editor

Darüber hinaus finden Sie in den Texteinstellungen Optionen zum Bearbeiten des Titels, zum Senden einer erfolgreichen Nachricht und zum Senden von Schaltflächentext.

divi form name and settings

Mit Divi können Sie auch E-Mail-Nachrichten senden, damit Sie über neue Formularübermittlungen benachrichtigt werden.

Darüber hinaus finden Sie weitere nützliche Optionen wie Weiterleitungslinks, Spamschutz, Hintergrundeinstellungen und mehr.

divi contact form settings

Mit dem Divi-Kontaktformularmodul können Sie Ihrer WordPress-Site ganz einfach ein einfaches Kontaktformular hinzufügen. Es gibt viele Anpassungsoptionen, damit Sie den Stil Ihrer Marke anpassen können.

Wenn Sie Ihrem Divi-Kontaktformular erweiterte Funktionen hinzufügen möchten, müssen Sie ein gutes Formularerstellungs-Plugin verwenden.

Und genau das werden wir in der nächsten Methode tun. Wir zeigen Ihnen, wie Sie mit dem leistungsstärksten WordPress-Formularersteller WPForms einen Divi-Kontakt erstellen.

Erstellen Sie ein Divi-Kontaktformular mit WPForms

WPForms

WPForms ist das beste Drag-and-Drop-Formularerstellungs-Plugin für WordPress. Mit nur wenigen Klicks können Sie jede Art von Formularen wie Kontaktformulare, Registrierungsformulare, Download-Formulare und mehr erstellen.

WPForms wird mit über 100 vorgefertigten Formularvorlagen geliefert, sodass Sie kein Kontaktformular von Grund auf neu erstellen müssen. Sie können beliebige Formularfelder hinzufügen oder entfernen und sie nach Belieben anpassen. Und dafür braucht man nicht einmal Programmierkenntnisse.

Alle Kontaktformulare, die Sie mit WPForms erstellen, reagieren zu 100 %, sodass sie auf jeder Bildschirmgröße schön angezeigt werden. Es gibt sogar eine integrierte Spam-Schutzoption, mit der Sie Spam- und betrügerische Formularübermittlungen auf Ihrer Website verhindern können.

Mit über 5 Millionen aktiven Installationen wird WPForms von allen Arten von Unternehmen auf der ganzen Welt geliebt. Wenn Sie ein Divi-Benutzer sind und Ihrer Website erstaunliche Kontaktformulare hinzufügen möchten, können Sie auch mit WPForms fortfahren.

Hier sind einige der Gründe, warum Sie Ihr Divi-Kontaktformular mit WPForms erstellen sollten:

  • Einfach zu bedienen und einzurichten
  • Erweiterte Formularbenachrichtigungen und -bestätigungen
  • Funktion zum Hochladen von Dateien und zum Einreichen von Inhalten
  • Integriertes Verwaltungssystem für die Formularübermittlung
  • E-Mail-Marketing-Integration, um Ihre E-Mail-Liste zu erweitern
  • Option zum Verlassen des Formulars, um unvollständige Formulareinträge zu erfassen
  • Formularfelder für E-Commerce und Zahlungsoptionen

Und die gute Nachricht ist, dass es im Divi Builder ein WPForms-Modul gibt. So können Sie das Kontaktformular, das Sie mit WPForms erstellen, ganz einfach auf Ihrer Website hinzufügen.

Außerdem können Sie WPForms auf jeder WordPress-Site mit oder ohne Divi verwenden. Wenn Sie sich jemals entscheiden, nicht mehr für Divi zu bezahlen, bleiben die Formulare, die Sie mit WPForms erstellen, auf Ihrer Website intakt.

Lassen Sie uns vor diesem Hintergrund lernen, wie Sie mit WPForms + Divi ein Kontaktformular erstellen.

Schritt 1: Installieren und aktivieren Sie das WPFroms-Plugin

Zunächst müssen Sie sich für ein WPForms-Konto anmelden.

WPForms bietet flexible Preispläne, die auf die Anforderungen aller Arten von Unternehmen zugeschnitten sind. Sie können einen Plan auswählen, der für Ihr Unternehmen geeignet ist. Und es gibt eine kostenlose Lite-Version.

Nachdem Sie sich angemeldet haben, können Sie auf Ihr WPForms-Dashboard zugreifen. Sie finden die Plugin-Datei zusammen mit Ihrem Lizenzschlüssel auf der Registerkarte Downloads .

WPForms license key

Sie müssen diese Plugin-Datei auf Ihrer WordPress-Site installieren. Weitere Informationen hierzu finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Navigieren Sie nach der Installation und Aktivierung von WPForms auf Ihrer Website zur Registerkarte WPForms » Einstellungen in Ihrem Admin-Dashboard.

Hier müssen Sie den Lizenzschlüssel eingeben und auf die Schaltfläche Verify Key klicken.

verify wpforms license

Anschließend sehen Sie die Meldung „Überprüfung erfolgreich“. Jetzt können Sie mit der Erstellung Ihres Kontaktformulars mit WPForms beginnen.

Schritt 2: Erstellen Sie ein Kontaktformular

Um ein neues Formular zu erstellen, gehen Sie in Ihrem WordPress-Dashboard zur Registerkarte „Neu hinzufügen“. Dadurch wird die Vorlagenbibliothek gestartet, in der Sie nach einer geeigneten Kontaktformularvorlage für Ihre Website suchen können.

Für dieses Tutorial beginnen wir mit der Vorlage für ein einfaches Kontaktformular . Diese Vorlage enthält alle grundlegenden Formularfelder, die für ein Kontaktformular erforderlich sind, wie Name, E-Mail und Nachricht. Sie können auch eine Vorschau jeder anderen Vorlage anzeigen, um zu sehen, welche besser für Sie geeignet ist.

Geben Sie einen Namen für Ihr Kontaktformular ein und klicken Sie in der Formularvorlage Ihrer Wahl auf die Schaltfläche Vorlage verwenden .

create divi contact form in wpforms

Auf dem nächsten Bildschirm sehen Sie den Drag-and-Drop-Formularersteller von WPForm. Alle Formularfelder befinden sich auf der linken Seite und die Formularvorschau befindet sich auf der rechten Seite der Seite.

Sie finden eine große Auswahl an nützlichen Formularfeldern wie Zahlen, Dropdown, Multiple-Choice, Datei-Upload, Bewertung, Rich-Text und vieles mehr.

wpforms form fields

Um ein Formularfeld einzufügen, müssen Sie es nur von der linken Seite ziehen und auf der Formularvorschau platzieren.

wpforms drag and drop

Wenn Sie eines dieser Formularfelder anpassen möchten, können Sie darauf klicken und die Feldoptionen werden angezeigt. Je nach Formularfeld gibt es Optionen zum Ändern der Formularbezeichnung, der Beschreibung, der erforderlichen und anderer zusätzlicher Optionen.

add file upload to divi contact form

Nachdem Sie alle erforderlichen Felder zu Ihrem Divi-Kontaktformular hinzugefügt haben, klicken Sie oben im Formularersteller auf die Schaltfläche Speichern .

Als Nächstes müssen Sie Formulareinstellungen, Benachrichtigungen und Bestätigungen einrichten.

Schritt 3: Formulareinstellungen konfigurieren

Um die Formulareinstellungen zu ändern, öffnen Sie die Registerkarte Einstellungen » Allgemein im linken Menübereich des Formularerstellers. Hier können Sie den Formularnamen, die Formularbeschreibung, den Text der Schaltfläche „Senden“ und mehr ändern.

Es besteht auch die Möglichkeit, den Anti-Spam-Schutz auf Ihrer Website zu aktivieren. Dadurch wird Google reCAPTCHA für Ihr Kontaktformular eingerichtet.

general settings wpforms

Wechseln Sie zur Registerkarte Einstellungen » Benachrichtigungen , um E-Mail-Benachrichtigungen für Ihr Divi-Kontaktformular einzurichten. Sie werden sehen, dass eine Standardbenachrichtigung an die E-Mail-Adresse des Administrators gesendet wird.

Sie können mehrere E-Mail-Adressen hinzufügen oder auf die Schaltfläche Neue Benachrichtigung hinzufügen klicken, um mehr als eine Formularbenachrichtigung zu senden.

Damit können Sie sich und Ihre Teammitglieder über neue Formularübermittlungen benachrichtigen, Kunden ihre Übermittlungsdetails senden und vieles mehr.

form notificaitons wpforms

Wenn Sie weitere Informationen dazu wünschen, können Sie unseren Leitfaden zum Einrichten der richtigen Formularbenachrichtigungen und -bestätigungen lesen.

Ebenso können Sie mit WPForms entscheiden, was passiert, nachdem ein Benutzer seine Kontaktinformationen auf Ihrer Website übermittelt hat. Gehen Sie zur Registerkarte Einstellungen » Bestätigungen und Sie sehen die Option zur Auswahl der Bestätigungsaktion.

wpforms-confirmations

So können Sie eine benutzerdefinierte „Danke“-Nachricht im Frontend anzeigen, nachdem der Benutzer auf die Schaltfläche „Senden“ geklickt hat. Oder wählen Sie die Umleitungsoptionen aus, um Benutzer auf eine andere Seite Ihrer Website oder eine externe URL zu leiten.

Wenn Sie mit den Formulareinstellungen fertig sind, stellen Sie sicher, dass Sie auf die Schaltfläche Speichern klicken.

Nachdem Ihr Kontaktformular fertig ist, können Sie es mit Divi Builder auf Ihrer Website einfügen.

Schritt 4: Fügen Sie das WPForms-Modul in Divi hinzu

Um dieses Kontaktformular auf einer beliebigen Seite oder einem beliebigen Beitrag hinzuzufügen, öffnen Sie den Divi Builder und wählen Sie ein Zeilenlayout, wie wir es für das Divi-Kontaktformularmodul getan haben.

Der einzige Unterschied besteht darin, dass Sie nach dem WPForms -Modul suchen müssen.

divi wpforms contact form

Nachdem Sie den WPForms-Block eingefügt haben, sehen Sie die Einstellungen, um das gerade erstellte Kontaktformular auszuwählen. Es gibt Optionen, um auch den Titel und die Beschreibung Ihres Kontaktformulars anzuzeigen.

choose wpforms contact form

Mit dem Divi Builder können Sie sogar das Design und die Gestaltung Ihres Kontaktformulars ändern. Wenn Sie mit dem Aussehen Ihres Divi-Kontaktformulars zufrieden sind, klicken Sie auf das rechte Häkchen.

Schritt 5: Veröffentlichen Sie Ihr Divi-Kontaktformular

Der letzte Schritt ist die Veröffentlichung Ihres Kontaktformulars. Klicken Sie dazu auf die 3-Punkte-Schaltfläche unten im Divi Builder.

publish divi contact form

Dann sehen Sie die verschiedenen Optionen wie Zoom, responsive Vorschau und mehr. Auf der rechten Seite befinden sich zwei Schaltflächen: Entwurf speichern und Veröffentlichen.

Klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Seite und Ihr Kontaktformular auf Ihrer WordPress-Site zu veröffentlichen.

publish your divi contact form

Sie haben erfolgreich ein Kontaktformular mit Divi und WPForms erstellt. Während Divi ein Kontaktformularmodul anbietet, fehlen ihm einige Funktionen wie Datei-Upload, Eintragsverwaltung und E-Mail-Listen-Integration.

Mit WPForms können Sie diese Probleme einfach lösen. Es ist vollgepackt mit Features und Funktionalitäten, die Ihnen helfen, alle Arten von Kontaktformularen zu erstellen, von einfach bis professionell.

Mit WPForms können Sie je nach Ihren Anforderungen auch WordPress-Formulare für jeden Zweck erstellen. Sie können Bestellformulare, Registrierungsformulare für Veranstaltungen, Anmeldeformulare und vieles mehr erstellen.

Und das war es für heute! Wir hoffen, dass Ihnen dieses Tutorial dabei geholfen hat, mit Leichtigkeit ein Divi-Kontaktformular in WordPress zu erstellen.

Wenn Sie weitere Hilfe zu WordPress-Formularen benötigen, können Sie sich diese Ressourcen ansehen:

  • So erstellen Sie ein Event-Registrierungsformular in WordPress
  • Die 8 besten E-Mail-Erfassungstools und Formularersteller für WordPress
  • So reduzieren Sie Formularabbrüche ganz einfach

Diese Beiträge helfen Ihnen, Benutzer in Ihren WordPress-Formularen zu registrieren und Ihre E-Mail-Listen zu erweitern. Letzteres wird Ihnen helfen, die Abbruchraten auf Ihrem Formular zu reduzieren und Ihre Conversions zu verbessern.