So erstellen Sie ein Divi-Kontaktformular mit WPForms

Das integrierte Kontaktformular-Modul von Divi erledigt die Aufgabe für einfache Nachrichten. Aber wenn Sie versucht haben, Datei-Uploads hinzuzufügen, Zahlungen einzuziehen oder sogar nur Einreichungen in Ihrem WordPress-Dashboard zu speichern, sind Sie wahrscheinlich auf seine Grenzen gestoßen.

Divi 5 brachte echte Verbesserungen für das Formularmodul, einschließlich bedingter Logik und besserer Styling-Optionen. Dennoch fehlen dem integrierten Formular immer noch Schlüsselfunktionen, die die meisten Geschäftswebsites benötigen. Es gibt keine Speicherung von Einträgen, keine Zahlungsabwicklung und selbst Spam-Schutzfunktionen sind begrenzt.

WPForms ist ein dedizierter WordPress-Formularersteller, der all diese Lücken schließt und über ein natives Modul direkt in Divi integriert wird. Sie erhalten einen echten Drag-and-Drop-Builder mit KI-Formularerstellungsfunktionen, über 2.100 Vorlagen, und jedes von Ihnen erstellte Formular wird über ein einfaches Dropdown direkt in den visuellen Divi-Builder eingefügt.

Erstellen Sie ein Divi-Kontaktformular mit WPForms! :)

So erstellen Sie ein Divi-Kontaktformular mit WPForms

Im Folgenden werde ich die wichtigsten Unterschiede zwischen dem Formularmodul von Divi und WPForms erläutern und dann die vollständige Einrichtung durchgehen, von der Installation des Plugins bis zur Veröffentlichung Ihres Formulars auf einer Divi-Seite.

Ich werde Ihnen auch zeigen, wie Sie das Erscheinungsbild des Formulars mit den Design-Steuerelementen von Divi anpassen und einige erweiterte Formulararten untersuchen, die Sie erstellen können, sobald alles verbunden ist.

Warum WPForms anstelle des integrierten Kontaktformulars von Divi verwenden?

Das Kontaktformularmodul von Divi erledigt die Grundlagen gut genug. Sie erhalten Textfelder, E-Mail-Felder, Dropdowns und bedingte Logik, wenn Sie Divi 5 verwenden. Aber sobald Sie etwas anderes benötigen, als einen Namen, eine E-Mail-Adresse und eine Nachricht zu sammeln, beginnen die Einschränkungen sich zu stapeln.

Es gibt keine Möglichkeit, Dateien hochzuladen, keine integrierte Zahlungsabwicklung und Formularübermittlungen gehen direkt per E-Mail, ohne die Möglichkeit, sie innerhalb von WordPress anzuzeigen oder zu verwalten. Hier ist ein schneller Seitenvergleich, um zu zeigen, wo sich die beiden Optionen unterscheiden.

Wenn ein einfaches „Name, E-Mail, Nachricht“-Kontaktformular alles ist, was Sie brauchen, erledigt das Modul von Divi das allein. Aber für alles Komplexere deckt WPForms all diese Lücken in einem einzigen Plugin ab, anstatt dass Sie drei oder vier zusätzliche Plugins benötigen.

Schritt 1: Installieren Sie das WPForms-Plugin

WPForms ist ein Drag-and-Drop-Formularersteller, der speziell für WordPress entwickelt wurde. Es enthält über 2.100 Formularvorlagen für alles, von Kontaktformularen und Zahlungsformularen bis hin zu Umfragen, Registrierungsformularen und Rechnerformularen.

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

Für ein einfaches Kontaktformular ist WPForms Lite (kostenlos) ein guter Anfang. Wenn Sie Datei-Uploads, bedingte Logik oder die Speicherung von Einträgen benötigen, greifen Sie zum Pro-Plan.

Kaufen Sie zunächst die Pro-Lizenz. Installieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie dieser Anleitung, wie Sie ein Plugin zu WordPress hinzufügen.

Jetzt auf WPForms Pro upgraden! :)

Schritt 2: Erstellen Sie Ihr Divi-Kontaktformular

Wenn WPForms aktiv ist, gehen Sie zu WPForms » Neu hinzufügen, um Ihr erstes Formular zu erstellen. Hier haben Sie zwei Möglichkeiten, um zu beginnen. Der traditionelle Weg ist die Vorlagenbibliothek, die Hunderte von vorgefertigten Formularen enthält, die nach Kategorien organisiert sind.

Suchen Sie nach „Einfaches Kontaktformular“ und klicken Sie auf Vorlage verwenden, um einen sauberen Ausgangspunkt mit den Feldern Name, E-Mail und Kommentar/Nachricht zu erhalten.

Die schnellere Option ist der KI-Formulargenerator, mit dem Sie beschreiben können, was Ihr Formular tun soll, z. B. „Ich benötige ein Kontaktformular mit Name, E-Mail, Telefon, einer Dropdown-Liste für die Abteilung und einem Nachrichtenfeld“, und WPForms erstellt es für Sie.

Die KI eignet sich auch zum Ausfüllen von Feldoptionen. Wenn Sie eine Dropdown-Liste für „Wie sind Sie auf uns aufmerksam geworden?“ hinzufügen und keine Lust haben, alle Optionen einzugeben, generiert KI-Auswahlmöglichkeiten eine relevante Liste, die Sie bearbeiten können.

Sobald Sie Ihre Felder platziert haben, können Sie mit dem Drag-and-Drop-Builder alles visuell neu anordnen, umbenennen und konfigurieren. Sie können Felder als erforderlich festlegen, Platzhaltertext hinzufügen, Feldgrößen anpassen und bedingte Logik verwenden, um Felder basierend auf der Auswahl des Besuchers ein- oder auszublenden.

Wenn Ihre Felder fertig sind, klicken Sie auf die Registerkarte Einstellungen, um Ihre Formularbenachrichtigungen zu konfigurieren. Dies steuert, welche E-Mail-Adresse Einreichungen erhält und wie die Benachrichtigungs-E-Mail aussieht.

Nehmen Sie sich eine Minute Zeit, um diese Einstellungen zu überprüfen, bevor Sie live gehen, da die Standardeinstellung Benachrichtigungen an Ihre WordPress-Admin-E-Mail sendet, was möglicherweise nicht die richtige Inbox ist.

Eine Sache, die Sie bei der Zustellung von WordPress-E-Mails beachten sollten. WordPress verwendet standardmäßig die integrierte Mail-Funktion von PHP, und viele Hosting-Anbieter blockieren oder drosseln diese.

Wenn Sie Formulareinreichungen hatten, die nie in Ihrem Posteingang ankamen, ist dies mit ziemlicher Sicherheit die Ursache. Das WP Mail SMTP-Plugin behebt dies, indem es Ihre E-Mails über einen authentifizierten SMTP-Server leitet.

Ich empfehle, es einzurichten, bevor Ihr Formular live geht, da die Fehlersuche bei fehlenden E-Mails im Nachhinein frustrierend ist. Klicken Sie oben rechts auf Speichern, wenn alles gut aussieht.

Schritt 3: Öffnen Sie den Divi Builder

Sobald Sie Ihre neue Kontaktseite (oder welche Seite auch immer Sie für Ihr Kontaktformular verwenden möchten) erstellt haben, klicken Sie auf die Schaltfläche Mit dem Divi-Builder bearbeiten, um den Divi WordPress-Seitenersteller zu starten.

Wenn es sich um eine vorhandene Seite handelt, sieht sie möglicherweise etwas anders aus. Wenn ja, klicken Sie einfach auf Divi-Builder verwenden, um ihn zu starten. Beides führt Sie zum selben 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, klicken Sie auf Mit dem Erstellen beginnen, um eine leere Leinwand zu öffnen. Divi fordert Sie auf, ein Zeilenlayout für Ihre erste Sektion auszuwählen. Ich würde hier die einspaltige Zeile wählen.

Er gibt dem Kontaktformular volle Breite und lenkt die Aufmerksamkeit des Besuchers auf das Ausfüllen, anstatt das Layout mit anderen Inhalten zu teilen, die um Aufmerksamkeit konkurrieren.

Als Nächstes sehen Sie eine leere Seite. Dies ist Ihr Raum zum Erstellen! Und hier entscheiden Sie, wie Ihre Divi-Seite aussehen soll und wo Ihr WPForms-Kontaktformular platziert werden soll.

Sie sehen ein Popup, das fragt, welche Art von Layout (mit Zeilen) Sie zu Ihrer Divi-Seite hinzufügen möchten. Wählen wir für diesen Beitrag die erste Option.

Dadurch wird das Kontaktformular zum einzigen 'Objekt', das in diese Zeile eingefügt wird, sodass es viel Aufmerksamkeit erhält und die Leute es ausfüllen. Wählen Sie für Ihre Zeilen die erste Option (die einzelne Zeile).

Nun werden Sie aufgefordert, ein Modul einzufügen. Holen wir uns als Nächstes Ihr großartiges WPForms-Formular dort hinein.

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

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

Wählen Sie unter dem Tab Inhalt Ihr Kontaktformular aus dem Dropdown-Menü Formular. Dies listet jedes Formular auf, das Sie in WPForms erstellt haben.

Sie können auch den Formular-Titel und die Beschreibung ein- oder ausblenden, obwohl die meisten Leute diese für ein saubereres Erscheinungsbild auf der Seite ausschalten.

Das Formular wird sofort auf der Seite gerendert, sodass Sie genau sehen können, wie es in Ihr Layout passt, bevor Sie es veröffentlichen. Wenn alles richtig aussieht, klicken Sie auf das grüne Häkchen, um das Modul zu speichern.

Gute Arbeit, Ihr Kontaktformular ist eingebettet und bereit. Nun können Sie es auf die gleiche Weise veröffentlichen, wie Sie jede Seite in Divi veröffentlichen. Klicken Sie auf die 3 Punkte am unteren Rand des Page Builders, um zusätzliche Divi-Einstellungen anzuzeigen.

Wählen Sie als Nächstes die Schaltfläche Veröffentlichen, um es live zu sehen. Ihr Divi-Kontaktformular ist live. Einreichungen fließen sowohl in Ihre Benachrichtigungs-E-Mail als auch in das WPForms » Einträge-Dashboard.

Hier können Sie jede Einreichung innerhalb von WordPress anzeigen, durchsuchen, markieren, exportieren und verwalten. Allein das ist ein großes Upgrade gegenüber dem integrierten Formular von Divi, das Einträge per E-Mail sendet und sie dann verschwinden lässt.

Mehr als nur ein Kontaktformular

Das WPForms Divi-Modul funktioniert für jeden Formular-Typ, den Sie erstellen, nicht nur für Kontaktformulare. Sobald das Plugin installiert und das Modul in Divi verfügbar ist, sind hier einige der beliebteren Formular-Typen, die Divi-Benutzer tendenziell einrichten.

Zahlungs- und Bestellformulare

Sie können Zahlungen mit Stripe, PayPal Commerce oder Square direkt von jedem Formular aus akzeptieren. Ich habe gesehen, wie Freiberufler dies zur Sammlung von Projektanzahlungen und kleine Unternehmen für einfache Bestellformulare mit Mengenauswahl und Gutscheincodes verwendet haben. Wenn Sie eine Divi-Website für ein Dienstleistungsunternehmen betreiben, ist dies eines der praktischsten Upgrades, die Sie vornehmen können.

Formulare zum Hochladen von Dateien

WPForms enthält ein Drag-and-Drop-Feld für Datei-Upload-Formulare, das mehrere Dateitypen, Live-Kameraaufnahme, konfigurierbare Größenbeschränkungen und automatische Cloud-Speicher-Synchronisierung mit Google Drive oder Dropbox unterstützt.

Divis integrierte Formularfunktion bietet keinerlei Dateiupload-Möglichkeit, was einer der häufigsten Gründe ist, warum Divi-Benutzer überhaupt nach einem separaten Formular-Plugin suchen.

Mehrschrittige Lead-Formulare

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

Ich habe einen vollständigen Leitfaden zusammengestellt, wie Sie mit Seitenumbrüchen, Fortschrittsanzeigen und bedingter Seitenlogik ein mehrschrittiges Formular erstellen können, wenn Sie sich mit der Einrichtung befassen möchten.

Umfrage- und Feedbackformulare

WPForms Pro beinhaltet NPS-Bewertungen, Likert-Skalen-Felder und interaktive Umfrageberichte, die Ihnen visuelle Aufschlüsselungen jeder Antwort liefern.

Wenn Sie Kundenfeedback sammeln, Zufriedenheitsumfragen durchführen oder Marktforschung auf einer Divi-gestützten Website betreiben, ersetzt dies vollständig die Notwendigkeit eines separaten Umfragetools.

FAQs zu Divi-Kontaktformularen

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

Funktioniert WPForms mit Divi 5?

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

Ist WPForms für Divi kostenlos?

WPForms Lite ist komplett kostenlos und beinhaltet den Drag-and-Drop-Builder, den KI-Formulargenerator, KI-Auswahlmöglichkeiten, grundlegende Stripe-Zahlungen und die vollständige Divi-Modulintegration.

Sie können ein funktionierendes Kontaktformular erstellen und einbetten, ohne etwas auszugeben. Für erweiterte Funktionen wie Dateiuploads, bedingte Logik, Eintragverwaltung und mehrseitige Formulare beginnen kostenpflichtige Pläne bei 49,50 $/Jahr.

Warum sendet mein Divi-Kontaktformular keine E-Mails?

WordPress verlässt sich standardmäßig auf die integrierte Mail-Funktion von PHP, und viele Hosting-Anbieter blockieren sie, drosseln sie oder leiten sie über Server, die letztendlich Spamfilter auf der Empfängerseite auslösen.

Die Installation eines SMTP-Plugins wie WP Mail SMTP behebt dies, indem Ihre Formular-E-Mails über einen authentifizierten Mailserver gesendet werden. Das löst das Problem sowohl für Divis integriertes Formular als auch für WPForms.

Als Nächstes: Machen Sie Ihre Divi-Formulare noch besser

Nachdem Ihr Divi-Kontaktformular live ist, möchten Sie vielleicht feinabstimmen, wie es auf Ihrer Website aussieht. Schauen Sie sich unseren Leitfaden zur Gestaltung von Kontaktformularen in WordPress an, um Tipps zu erhalten, wie Sie das Design Ihres Formulars an die Farben, Schriftarten und Abstände Ihres Divi-Themes anpassen können.

Wenn Sie möchten, dass Ihr Kontaktformular als Overlay erscheint, anstatt auf einer separaten Seite zu stehen, erfahren Sie hier, wie Sie ein Kontaktformular-Popup in WordPress erstellen. Es hält Ihre Seiten übersichtlich und macht das Formular von jeder Seite Ihrer Website aus über einen Button oder Link-Trigger zugänglich.

Erstellen Sie jetzt Ihr Divi-Kontaktformular

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

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