wie man ein Divi-Kontaktformular erstellt

Wie man ein Divi-Kontaktformular erstellt: 2 verschiedene Methoden

Suchst du nach einer einfachen und unkomplizierten Möglichkeit, ein Divi-Kontaktformular für deine WordPress-Website zu erstellen?

Es wird dich freuen zu hören, dass du mit einer WPForms-Integration und dem Divi Contact Form Module ganz einfach ein Kontaktformular erstellen kannst.

In diesem Leitfaden führen wir dich durch die Schritte für beide Methoden, damit du die für dich am besten geeignete Option wählen kannst.

Wie man ein Divi-Kontaktformular erstellt

Du kannst ein Divi-Kontaktformular mit WPForms oder dem Divi-Kontaktformularmodul erstellen. Befolge die folgenden Schritte für beide Methoden:

Kontaktformulare mit Divi Builder erstellen

Mit dem Divi Contact Form Module kannst du ganz einfach Eingabefelder wie E-Mail, Text, Kontrollkästchen, Optionsfelder und Dropdowns erstellen.

Schritt 1: Installiere das Divi Theme auf WordPress

Als Erstes musst du dich für ein Divi-Konto anmelden. Da Divi ein Premium-Theme ist, musst du ein Abonnement abschließen, das jährlich $89 kostet.

die divi-Landingpage

Danach navigierst du von deinem Elegant Themes-Konto zum Mitgliederbereich und klickst auf die Schaltfläche Das Divi-Theme herunterladen .

das divi-Theme herunterladen

Sobald du die Divi Theme-Zip-Datei hast, gehst du zu deinem WordPress-Dashboard. Navigiere dort zu Darstellung " Themes und klicke auf die Schaltfläche Neu hinzufügen.

neues Theme hinzufügen wordpress

Jetzt musst du nur noch auf die Schaltfläche Neues Theme hinzufügen klicken, deine Divi.zip-Datei hochladen und dann auf die Schaltfläche Theme installieren klicken.

Divi-Theme installieren

Sobald das Divi-Theme auf deiner Website installiert ist, klickst du auf die Schaltfläche Aktivieren und schon kannst du den Divi Builder nutzen.

Schritt 2: Füge eine Seite hinzu und lade den Divi Builder

Erstelle eine neue Seite oder einen neuen Beitrag und warte, bis sich der WordPress Post Editor öffnet. Um den Divi Builder zu laden, klicke auf die lila Schaltfläche Divi Builder verwenden.

Divi Builder verwenden

Dadurch wird die Seite mit dem Divi-Builder neu geladen und es werden drei Optionen angezeigt: Erstelle eine Seite von Grund auf, wähle ein vorgefertigtes Layout oder klone eine bestehende Seite.

Da wir dich durch die Schritte zur Erstellung einer Kontaktseite in Divi von Grund auf führen, klickst du auf die Schaltfläche " Erstellen".

divi von Grund auf neu bauen

Wahnsinn! Um dein Kontaktformular zu erstellen, musst du jetzt nur noch das Divi Contact Form Module laden. Los geht's.

Schritt 3: Füge das Divi-Kontaktformular-Modul hinzu

Klicke im Divi Builder auf die Schaltfläche + (Plus) und wähle aus der Liste der Optionen eine neue Zeilenvorlage, die deinen Bedürfnissen entspricht.

divi builder Zeile hinzufügen

Sobald du eine Zeile hinzufügst, öffnet sich eine Bibliothek mit Modulen. Auf der Registerkarte "Neues Modul" scrollst du nach unten und klickst auf das Modul " Kontaktformular".

divi kontaktformular modul

Sobald du das Kontaktformular-Modul hinzugefügt hast, siehst du drei Formularfelder: Name, E-Mail und Nachricht. Dein Kontaktformular ist jetzt fertig!

Schritt 4: Konfiguriere dein Divi-Kontaktformular

Um zu beginnen, klicke auf das Kontaktformular im Divi Builder, um die Anpassungsoptionen zu öffnen. Du kannst auf die Schaltfläche Neues Feld hinzufügen klicken, um weitere Formularfelder hinzuzufügen.

divi kontaktformular einstellungen

Wenn du ein bisschen nach unten scrollst, findest du im Menü Text weitere Optionen, um den Titel, die Bestätigungsnachricht oder den Text der Schaltfläche "Senden" zu bearbeiten.

divi kontaktformular text einstellungen

Hier findest du auch nützliche Tools wie Hintergrundeinstellungen, Spamschutz, Umleitungslinks und mehr. Du kannst sie nach Belieben ändern.

Ein Divi-Kontaktformular mit WPForms erstellen

WPForms ist der beste Drag-and-Drop-Formular-Builder für WordPress, mit dem du Kontaktformulare, Berechnungsformulare, Bestellformulare und vieles mehr erstellen kannst!

Schritt 1: Installiere das WPForms Plugin

Als bestes Formularerstellungs-Plugin für WordPress integriert sich WPForms erfolgreich in Divi und macht die Formularerstellung zum Kinderspiel.

Schon die Lite-Version des Plugins bietet eine Menge Funktionen, die sich im Vergleich zum Divi Contact Form Module als nützlich erweisen können.

Wenn du jedoch ein Upgrade auf Pro durchführst, kannst du zusätzliche Funktionen wie erweiterte Formularfelder, Eintragsverwaltung, Datei-Uploads und vieles mehr nutzen!

die wpforms Homepage

Sobald du dich entschieden hast, welche Lizenzstufe deinen Bedürfnissen entspricht, installierst du das WPForms-Plugin. Wie du das machst, erfährst du in dieser Anleitung zur Installation eines WordPress-Plugins.

Schritt 2: Erstelle dein Kontakt-Formular

Jetzt kannst du ein neues Formular erstellen. Gehe in deinem WordPress-Dashboard zu WPForms und klicke auf die Option Neu hinzufügen.

WPForms fügen neue

Danach gibst du deinem Formular einen Namen und wählst eine Vorlage. Für diese Anleitung wählen wir das Einfache Kontaktformular, um die Erstellung des Formulars zu beschleunigen.

einfache Kontaktformularvorlage verwenden

So wird dein Formular im Formularersteller aussehen. Du kannst nach Belieben Felder hinzufügen, ändern oder neu anordnen.

divi kontaktformular wpforms

Das war's schon! Du hast erfolgreich ein Kontaktformular mit WPForms erstellt. Jetzt können wir deine Benachrichtigungen und Bestätigungen anpassen.

Schritt 3: Anpassungen von Benachrichtigungen und Bestätigungen

Die Einrichtung von Benachrichtigungen stellt sicher, dass du immer über neue Formulareinträge informiert wirst. Du findest sie im Formularersteller. Gehe zu Einstellungen und dann zu Benachrichtigungen.

Formular Benachrichtigungseinstellungen wpforms

Von hier aus kannst du Änderungen an den Standardeinstellungen für Benachrichtigungen vornehmen, z. B. an der Betreffzeile, oder die E-Mails ändern, die an die Empfänger gesendet werden.

Kontakt-Formular-Benachrichtigungen

Wähle jetzt im Menü Einstellungen die Option Bestätigungen aus der Liste der Optionen aus, um Antworten einzurichten, wenn ein Formular erfolgreich abgeschickt wurde.

WPForms Bestätigungsseite

Als Nächstes wählst du aus, welche Art von Bestätigung für deine Website am besten geeignet ist, sei es eine Nachricht, eine Seitenanzeige oder eine Weiterleitung.

Kontaktformular Bestätigung

Damit dein Formular und seine Einstellungen auf dem neuesten Stand sind, vergiss nicht, deine Änderungen zu speichern. Das Formular ist jetzt bereit, über Divi veröffentlicht zu werden.

Formular speichern wpforms

Schritt 4: Veröffentliche dein Divi-Kontaktformular

Um dieses Kontaktformular hinzuzufügen, gehst du zum Divi Builder und wählst einen Zeilenstil aus, wie wir es für das Divi-Kontaktformularmodul getan haben.

Einzeiliges Divi einfügen

Divi verfügt über eine Integration für WPForms. Um das Formular hinzuzufügen, suche im Suchfeld nach WPForms und wähle das angezeigte Modul aus.

wpforms-Modul in divi auswählen

Nachdem das WPForms-Modul in Divi hinzugefügt wurde, werden zusätzliche Einstellungen angezeigt. Hier kannst du zum Beispiel:

  • Wähle das Formular aus, das du hinzufügen möchtest.
  • Aktiviere Einstellungen, die den Titel des Formulars anzeigen.
  • Aktiviere Einstellungen, die die Formularbeschreibung anzeigen.

Sobald du bereit bist, wählst du dein Formular aus dem Dropdown-Menü unter Formular aus.

divi Formular auswählen

Dein ausgewähltes Formular wird nun automatisch zur Divi-Seite hinzugefügt. Klicke auf die grüne Schaltfläche mit dem Häkchen, um deine Einstellungen zu speichern.

Divi-Formular speichern

Gut gemacht! Dein Divi-Kontaktformular mit WPForms ist jetzt fertig! Wenn du es weiter anpassen möchtest, schau dir diese zusätzlichen Designeinstellungen an.

FAQs zum Erstellen eines Divi-Kontaktformulars

Die Verwendung des Divi-Themas und seiner vielen Funktionen, wie z.B. Kontaktformulare, ist ein beliebtes Thema unter unseren Lesern. Hier findest du Antworten auf einige Fragen dazu.

Gibt es in Divi ein Kontaktformular?

Ja, Divi kommt mit einem Kontaktformular-Modul. Mit diesem Tool kannst du ganz einfach ein Kontaktformular in deine Seiten einfügen, ohne dass du zusätzliche Plugins benötigst. Allerdings sind die Funktionen im Vergleich zu einem speziellen Formular-Builder wie WPForms möglicherweise begrenzt.

Wie kann ich ein Divi-Kontaktformular bearbeiten?

Um ein Divi-Kontaktformular zu bearbeiten, gehe zu der Seite, auf der sich das Formular in deinem Divi Builder befindet. Klicke auf das Modul mit der Aufschrift "Kontaktformular". Hier kannst du Felder ändern, Stile anpassen und die Benachrichtigungs- und Bestätigungseinstellungen des Formulars direkt anpassen.

Verfügt WordPress über ein integriertes Kontaktformular?

WordPress selbst verfügt nicht über eine integrierte Kontaktformularfunktion. WordPress-Benutzer können jedoch mit Hilfe von Plugins ganz einfach Kontaktformulare zu ihren Websites hinzufügen. Wenn du Divi auf WordPress installierst, bietet es ein integriertes Kontaktformularmodul, sodass du keine zusätzlichen Plugins benötigst.

Wie erstelle ich ein Pop-up-Kontaktformular in Divi?

Um ein Pop-up-Kontaktformular in Divi zu erstellen, brauchst du den Divi Builder und ein bisschen Kreativität. Gestalte dein Kontaktformular zunächst in einem Standardbereich. Verwende dann die Sichtbarkeitsoptionen des Divi Builders, um diesen Bereich auf der Seite auszublenden.

Schließlich kannst du den Abschnitt als Pop-up anzeigen lassen, indem du ihn mit einer Schaltfläche oder einem Link auf deiner Seite verknüpfst. Diese Methode erfordert möglicherweise benutzerdefiniertes CSS oder ein Divi-Pop-up-Plugin, um reibungslos zu funktionieren. Eine einfachere Methode wäre jedoch die Verwendung von OptinMonster!

Als Nächstes erfährst du, wie du einen Preisrechner in WordPress erstellst.

Du suchst nach einer einfachen Lösung, wie du einen Preiskalkulator für deine Website erstellen kannst, um Artikel online zu verkaufen? In dieser Anleitung erfährst du Schritt für Schritt, wie du ein einfaches Bestellformular mit einem automatischen Preiskalkulator für deine Website einrichtest.

Wenn du dich fragst, wie du Nutzer/innen dazu bringen kannst, ein Formular auszufüllen, in dem sie ihre E-Mail-Adresse angeben müssen, um eine Datei herunterladen zu können, dann ist auch das möglich. Sieh dir diesen Leitfaden an: Wie du eine E-Mail-Adresse für den Download einer Datei verlangst.

Repariere deine WordPress-E-Mails jetzt

Bist du bereit, deine E-Mails zu verbessern? Starten Sie noch heute mit dem besten WordPress SMTP-Plugin. Wenn du keine Zeit hast, deine E-Mails zu reparieren, kannst du gegen Aufpreis eine umfassende White Glove Setup-Unterstützung erhalten und es gibt eine 14-tägige Geld-zurück-Garantie für alle kostenpflichtigen Angebote.

Wenn dir dieser Artikel geholfen hat, dann folge uns bitte auf Facebook und Twitter für weitere WordPress-Tipps und -Anleitungen.

Offenlegung: Unsere Inhalte sind leserunterstützt. Das heißt, wenn du auf einige unserer Links klickst, erhalten wir möglicherweise eine Provision. Hier erfährst du, wie WPForms finanziert wird, warum das wichtig ist und wie du uns unterstützen kannst.

Hamza Shahid

Hamza ist ein Writer für WP Mail SMTP, der sich auch auf Themen rund um digitales Marketing, Cybersicherheit, WordPress-Plugins und ERP-Systeme spezialisiert hat.Mehr erfahren

Teste unser kostenloses WP Mail SMTP Plugin

Verwende deinen bevorzugten SMTP-Anbieter, um deine WordPress-E-Mails zuverlässig zu versenden.

Bitte aktiviere JavaScript in deinem Browser, um dieses Formular auszufüllen.