Wie man ein Divi-Kontaktformular mit WPForms erstellt

Das in Divi integrierte Kontaktformular-Modul erfüllt seinen Zweck für einfache Nachrichten. Wenn Sie jedoch versucht haben, Datei-Uploads hinzuzufügen, Zahlungen zu erfassen oder auch nur die übermittelten Daten in Ihrem WordPress-Dashboard zu speichern, sind Sie wahrscheinlich an seine Grenzen gestoßen.

Divi 5 hat das Formularmodul deutlich verbessert, unter anderem durch bedingte Logik und bessere Gestaltungsmöglichkeiten. Dennoch fehlen dem integrierten Formular nach wie vor wichtige Funktionen, die die meisten Unternehmenswebsites benötigen. Es gibt keine Speicherung von Eingaben, keine Zahlungsabwicklung und selbst die Funktionen zum Spam-Schutz sind begrenzt.

WPForms ist ein spezieller WordPress-Formular-Builder, der all diese Lücken schließt und sich über ein natives Modul direkt in Divi integrieren lässt. Sie erhalten einen echten Drag-and-Drop-Builder mit Funktionen zur Formularerstellung per KI sowie über 2.100 Vorlagen, und jedes von Ihnen erstellte Formular lässt sich über ein einfaches Dropdown-Menü direkt in den visuellen Divi-Builder einfügen.

Erstelle ein Divi-Kontaktformular mit WPForms! 🙂

Wie man ein Divi-Kontaktformular mit WPForms erstellt

Im Folgenden werde ich die wichtigsten Unterschiede zwischen dem Formularmodul von Divi und WPForms erläutern und anschließend die gesamte Einrichtung Schritt für Schritt durchgehen – von der Installation des Plugins bis zur Veröffentlichung Ihres Formulars auf einer Divi-Seite.

Außerdem zeige ich Ihnen, wie Sie das Erscheinungsbild des Formulars mithilfe der Design-Steuerelemente von Divi anpassen können, und stelle Ihnen einige fortgeschrittene Formulartypen vor, die Sie erstellen können, sobald alles miteinander verknüpft ist.

Warum WPForms statt des in Divi integrierten Kontaktformulars verwenden?

Das Kontaktformular-Modul von Divi erfüllt die grundlegenden Anforderungen durchaus. Es bietet Textfelder, E-Mail-Felder, Dropdown-Menüs und bedingte Logik, sofern Sie Divi 5 verwenden. Sobald Sie jedoch mehr benötigen als nur die Erfassung von Name, E-Mail-Adresse und Nachricht, treten zunehmend Einschränkungen auf.

Es gibt keine Möglichkeit, Datei-Uploads zu akzeptieren, keine integrierte Zahlungsabwicklung, und Formularübermittlungen werden direkt per E-Mail versendet, ohne dass man sie innerhalb von WordPress anzeigen oder verwalten kann. Hier ist ein kurzer Vergleich, der die Unterschiede zwischen den beiden Optionen verdeutlicht.

Wenn Sie lediglich ein einfaches Kontaktformular mit den Feldern „Name, E-Mail, Nachricht“ benötigen, reicht das Modul von Divi dafür völlig aus. Bei komplexeren Anforderungen deckt WPForms jedoch alle diese Lücken mit einem einzigen Plugin ab, sodass Sie nicht drei oder vier zusätzliche Plugins installieren müssen.

Schritt 1: Installieren Sie das WPForms Plugin

WPForms ist ein Drag-and-Drop-Formular-Generator, der speziell für WordPress entwickelt wurde. Er umfasst mehr als 2.100 Formularvorlagen, die alles abdecken – von Kontakt- und Zahlungsformularen bis hin zu Umfragen, Anmeldeformularen und Rechnerformularen.

Was mir an WPForms für Divi-Seiten am besten gefällt, ist die native Modulintegration. Ich habe Formulare sowohl auf Divi- als auch auf Elementor-Seiten eingerichtet, und das Divi-Modul bietet wirklich die reibungslosere Benutzererfahrung.

Für ein einfaches Kontaktformular ist WPForms Lite (kostenlos) der ideale Einstieg. Wenn Sie Datei-Uploads, bedingte Logik oder die Speicherung von Eingaben benötigen, entscheiden Sie sich für den Pro-Tarif.

Um loszulegen, kaufen Sie die Pro-Lizenz. Dann installieren Sie WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie diesen Anweisungen, wie Sie ein Plugin zu WordPress hinzufügen.

Jetzt auf WPForms Pro upgraden 🙂

Schritt 2: Erstellen Sie Ihr Divi-Kontaktformular

Wenn WPForms aktiviert ist, gehen Sie zu „WPForms“ » „Neu hinzufügen“, um Ihr erstes Formular zu erstellen. Hier stehen Ihnen zwei Möglichkeiten zur Verfügung. Der klassische Weg führt über die Vorlagenbibliothek, die Hunderte von vorgefertigten Formularen enthält, die nach Kategorien geordnet sind.

Suchen Sie nach „Einfaches Kontaktformular“ und klicken Sie auf „Vorlage verwenden“, um eine übersichtliche Vorlage zu erhalten, in der die Felder „Name“, „E-Mail“ und „Kommentar/Nachricht“ bereits vorhanden sind.

Die schnellere Variante ist der KI-Formular-Generator, bei dem Sie einfach beschreiben können, was Ihr Formular leisten soll, zum Beispiel: „Ich brauche ein Kontaktformular mit Feldern für Name, E-Mail, Telefonnummer, einer Dropdown-Liste für die Abteilung und einem Nachrichtenfeld“ – und WPForms erstellt es für Sie.

Die KI hilft auch beim Ausfüllen von Feldauswahlmöglichkeiten. Wenn Sie ein Dropdown-Menü für „Wie haben Sie von uns erfahren?“ hinzufügen und keine Lust haben, alle Optionen einzutippen, erstellt AI Choices eine passende Liste, die Sie bearbeiten können.

Sobald Sie Ihre Felder eingerichtet haben, können Sie diese mit dem Drag-and-Drop-Builder visuell neu anordnen, umbenennen und konfigurieren. Sie können Felder als Pflichtfelder festlegen, Platzhaltertext hinzufügen, die Feldgröße anpassen und mithilfe von bedingter Logik Felder je nach Auswahl des Besuchers ein- oder ausblenden.

Wenn Ihre Felder fertig sind, klicken Sie auf die Registerkarte „Einstellungen“, um die Benachrichtigungen für Ihr Formular zu konfigurieren. Hier legen Sie fest, an welche E-Mail-Adresse die übermittelten Daten gesendet werden und wie die Benachrichtigungs-E-Mail aussehen soll.

Nimm dir kurz die Zeit, diese Einstellungen vor der Veröffentlichung zu überprüfen, da standardmäßig Benachrichtigungen an deine WordPress-Admin-E-Mail-Adresse gesendet werden, was möglicherweise nicht der richtige Posteingang ist.

Ein Punkt, den man bei der E-Mail-Versendung mit WordPress beachten sollte: WordPress nutzt standardmäßig die in PHP integrierte Mail-Funktion, die von vielen Hosting-Anbietern blockiert oder gedrosselt wird.

Falls Sie Formularübermittlungen hatten, die nie in Ihrem Posteingang angekommen sind, ist das mit ziemlicher Sicherheit der Grund dafür. Das WP Mail SMTP-Plugin behebt dieses Problem, indem es Ihre E-Mails über einen authentifizierten SMTP-Server weiterleitet.

Ich würde empfehlen, dies einzurichten, bevor Ihr Formular online geht, denn es ist frustrierend, nachträglich nach Fehlern bei fehlenden E-Mails zu suchen. Klicken Sie oben rechts auf „Speichern“, wenn alles in Ordnung ist.

Schritt 3: Öffnen Sie den Divi Builder

Sobald Sie Ihre neue Kontaktseite (oder die Seite, auf der Sie Ihr Kontaktformular einrichten möchten) erstellt haben, klicken Sie auf die Schaltfläche Mit dem Divi Builder bearbeiten, um den Divi WordPress Page Creator zu starten.

Wenn es sich um eine bereits vorhandene Seite handelt, sieht sie möglicherweise etwas anders aus. In diesem Fall klickst du einfach auf „Divi Builder verwenden“, um ihn zu starten. Beide Optionen führen dich zum gleichen visuellen Editor.

Sobald der Builder geöffnet ist, werden Sie nach dem Layout Ihrer Seite gefragt.

Schritt 4: Wählen Sie Ihr Divi-Kontaktformular-Seitenlayout

Sobald der Builder geladen ist, klick auf „Start Building“, um eine leere Arbeitsfläche zu öffnen. Divi fordert dich auf, ein Zeilenlayout für deinen ersten Abschnitt auszuwählen. Ich würde mich hier für die einspaltige Zeile entscheiden.

Dadurch nimmt das Kontaktformular die gesamte Breite ein und lenkt die Aufmerksamkeit des Besuchers ganz auf das Ausfüllen des Formulars, anstatt das Layout durch andere Inhalte zu unterbrechen, die ebenfalls um Aufmerksamkeit buhlen.

Als nächstes wird eine leere Seite angezeigt. Dies ist Ihr Platz zum Erstellen! Und, es ist, wie Sie entscheiden, wie Sie Ihre Divi Seite aussehen soll und wo Sie Ihre WPForms Kontaktformular sein soll.

Es erscheint ein Popup-Fenster, in dem Sie gefragt werden, welche Art von Layout (mit Zeilen) Sie Ihrer Divi-Seite hinzufügen möchten. Für diesen Beitrag wählen wir die erste Option.

Dadurch wird das Kontaktformular zum einzigen „Element“ in dieser Zeile, sodass es besonders ins Auge fällt und die Nutzer es gerne ausfüllen. Wählen Sie für Ihre Zeilen einfach die erste Option (die einzelne Zeile) aus.

Jetzt werden Sie aufgefordert, ein Modul einzufügen. Lassen Sie uns Ihre awesome WPForms Form in dort als nächstes.

Schritt 5: Fügen Sie das WPForms-Divi-Modul ein

Dieser Schritt ist besonders einfach, da WPForms über eine eigene Divi-Integration und ein Kontaktformular-Modul verfügt! Um es hinzuzufügen, suchen Sie im Suchfeld nach „WPForms“ und wählen Sie dann das angezeigte Modul aus.

Wählen Sie auf der Registerkarte „Inhalt“ Ihr Kontaktformular aus dem Dropdown-Menü „Formular“ aus. Dort werden alle Formulare aufgelistet, die Sie in WPForms erstellt haben.

Sie können den Titel und die Beschreibung des Formulars auch ein- oder ausschalten, wobei die meisten Nutzer diese Funktionen deaktivieren, um die Seite übersichtlicher zu gestalten.

Das Formular wird sofort auf der Seite angezeigt, sodass Sie vor der Veröffentlichung genau sehen können, wie es in Ihr Layout passt. Wenn alles korrekt aussieht, klicken Sie auf das grüne Häkchen, um das Modul zu speichern.

Gut gemacht, dein Kontaktformular ist nun eingebettet und einsatzbereit. Jetzt kannst du es genauso veröffentlichen wie jede andere Seite in Divi. Klicke auf die drei Punkte unten im Page Builder, um weitere Divi-Einstellungen anzuzeigen.

Klicken Sie anschließend auf die Schaltfläche „Veröffentlichen“, um das Formular live anzuzeigen. Ihr Divi-Kontaktformular ist nun online. Die eingegangenen Daten werden sowohl an Ihre Benachrichtigungs-E-Mail als auch in das WPForms-Dashboard unter „Einträge“ weitergeleitet.

Hier kannst du alle Einsendungen direkt in WordPress anzeigen, durchsuchen, mit einem Stern markieren, exportieren und verwalten. Das allein ist schon eine erhebliche Verbesserung gegenüber dem integrierten Formular von Divi, bei dem die Einsendungen per E-Mail versendet werden und dann verloren gehen.

Mehr als nur ein Kontaktformular

Das WPForms-Divi-Modul funktioniert für alle Arten von Formularen, die Sie erstellen, nicht nur für Kontaktformulare. Sobald das Plugin installiert ist und das Modul in Divi verfügbar ist, finden Sie hier einige der beliebtesten Formulartypen, die Divi-Nutzer häufig einrichten.

Zahlungs- und Bestellformulare

Sie können Zahlungen über Stripe, PayPal Commerce oder Square direkt über jedes beliebige Formular entgegennehmen. Ich habe gesehen, dass Freiberufler diese Funktion für die Einziehung von Projektanzahlungen nutzen und kleine Unternehmen sie für einfache Bestellformulare mit Mengenauswahl und Gutscheincodes einsetzen. Wenn Sie eine Divi-Website für ein Dienstleistungsunternehmen betreiben, ist dies eine der praktischsten Erweiterungen, die Sie vornehmen können.

Formulare zum Hochladen von Dateien

WPForms enthält ein Formularfeld zum Hochladen von Dateien per Drag-and-Drop, das verschiedene Dateiformate, die Aufnahme per Live-Kamera, konfigurierbare Größenbeschränkungen sowie die automatische Synchronisierung mit Cloud-Speichern wie Google Drive oder Dropbox unterstützt.

Das in Divi integrierte Formular bietet keinerlei Möglichkeit zum Hochladen von Dateien, was einer der häufigsten Gründe dafür ist, dass Divi-Nutzer sich überhaupt erst nach einem separaten Formular-Plugin umsehen.

Mehrstufige Kontaktformulare

Lange Formulare mit einem Dutzend Feldern auf einer Seite werden oft abgebrochen. Bei mehrstufigen Formularen können Sie diese Felder auf mehrere Seiten aufteilen und einen Fortschrittsbalken einblenden, sodass Besucher jeweils nur einen überschaubaren Abschnitt sehen.

Ich habe eine umfassende Anleitung zusammengestellt, wie man ein mehrstufiges Formular mit Seitenumbrüchen, Fortschrittsanzeigen und bedingter Seitenlogik erstellt, falls Sie sich näher mit der Einrichtung befassen möchten.

Umfrage- und Feedback-Formulare

WPForms Pro umfasst NPS-Bewertungen, Felder mit Likert-Skala und interaktive Umfrageberichte, die Ihnen eine visuelle Aufschlüsselung jeder Antwort bieten.

Wenn Sie auf einer mit Divi erstellten Website Kundenfeedback sammeln, Zufriedenheitsumfragen durchführen oder Marktforschung betreiben, macht dies ein separates Umfrage-Tool völlig überflüssig.

Häufig gestellte Fragen zu Divi-Kontaktformularen

WPForms und Divi sind eine beliebte Kombination für die Erstellung von WordPress-Formularen. Hier finden Sie Antworten auf die häufigsten Fragen zur gemeinsamen Nutzung dieser beiden Tools.

Funktioniert WPForms mit Divi 5?

Ja. WPForms verfügt über ein natives Divi-Modul, das sowohl mit Divi 4 als auch mit Divi 5 kompatibel ist. Sie suchen in der Divi-Modulbibliothek nach WPForms, wählen Ihr Formular aus einem Dropdown-Menü aus, und es wird direkt in den visuellen Builder eingebettet. Für die Kompatibilität mit Divi 5 sind keine zusätzlichen Schritte erforderlich.

Ist WPForms für Divi kostenlos?

WPForms Lite ist völlig kostenlos und umfasst den Drag-and-Drop-Builder, den KI-Formulargenerator, KI-Auswahlmöglichkeiten, grundlegende Stripe-Zahlungsfunktionen sowie die vollständige Integration in Divi-Module.

Sie können ein funktionsfähiges Kontaktformular erstellen und einbinden, ohne dafür etwas bezahlen zu müssen. Für erweiterte Funktionen wie Datei-Uploads, bedingte Logik, Eingabeverwaltung und mehrseitige Formulare beginnen die kostenpflichtigen Tarife bei 49,50 $ pro Jahr.

Warum versendet mein Divi-Kontaktformular keine E-Mails?

WordPress nutzt standardmäßig die in PHP integrierte Mail-Funktion, und viele Hosting-Anbieter blockieren diese entweder, drosseln sie oder leiten sie über Server weiter, die letztendlich die Spamfilter auf der Empfängerseite auslösen.

Die Installation eines SMTP-Plugins wie WP Mail SMTP behebt dieses Problem, indem die E-Mails aus Ihren Formularen über einen authentifizierten Mailserver versendet werden. Damit ist das Problem sowohl für das in Divi integrierte Formular als auch für WPForms gelöst.

Als Nächstes: Erweitern Sie Ihre Divi-Formulare

Nachdem Ihr Divi-Kontaktformular nun online ist, möchten Sie vielleicht dessen Darstellung auf Ihrer Website noch etwas optimieren. In unserer Anleitung zur Gestaltung von Kontaktformularen in WordPress finden Sie Tipps, wie Sie das Design Ihres Formulars an die Farben, Schriftarten und Abstände Ihres Divi-Themes anpassen können.

Wenn Sie Ihr Kontaktformular lieber als Overlay anzeigen lassen möchten, anstatt es auf einer eigenen Seite zu platzieren, erfahren Sie hier, wie Sie in WordPress ein Kontaktformular-Popup erstellen. So bleiben Ihre Seiten übersichtlich, und das Formular ist über einen Button oder einen Link von jeder Seite Ihrer Website aus erreichbar.

Erstellen Sie jetzt Ihr Divi-Kontaktformular

Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.