Haben Sie jemals Leads verloren, weil Ihr Kontaktformular langsam und umständlich war? Das ist eine Geschichte, die wir nur zu oft hören. Wir haben auch aus erster Hand erfahren, wie frustrierend herkömmliche WordPress-Formulare sein können – sowohl für uns als auch für unsere Leser.
AJAX-Formulare haben dieses Problem gelöst und können dasselbe für Sie tun.
Diese modernen Formulare übermitteln Daten sofort, ohne die Seite zu aktualisieren. Sie schaffen ein reibungsloseres Erlebnis, das die Besucher engagiert hält.
Wir haben diese Formulare viele, viele Male auf den Websites unserer Kunden und Partner angewendet, und die Ergebnisse sprechen für sich.
In diesem Leitfaden teilen wir unseren bewährten 4-Schritte-Prozess zum Erstellen eines WordPress AJAX-Formulars. Wir verwenden ein anfängerfreundliches Plugin, das die technischen Aspekte vereinfacht, damit Sie leicht folgen können. 🙌
Was ist AJAX und warum sollte man es für Formulare verwenden?
AJAX, kurz für Asynchronous JavaScript and XML, ist eine JavaScript-Programmiertechnik, die es Entwicklern ermöglicht, Daten zu übertragen, ohne eine Seite neu zu laden.
Es wird am häufigsten in Webformularen verwendet und ermöglicht es Benutzern, Formulardaten zu übermitteln, ohne eine Seite neu zu laden. Dies macht die Formularübermittlung einfach und schnell, was die allgemeine Benutzererfahrung verbessert.
Außerdem verwenden Webanwendungen wie Gmail und Facebook diese Technik ausgiebig, um Benutzer zu binden und gleichzeitig alles nahtlos im Hintergrund funktionieren zu lassen.
Sie können AJAX für Formulare auf Ihrer WordPress-Website verwenden. Es erspart den Benutzern unnötige Seitenaktualisierungen und hält sie auf der Seite, die sie gerade betrachten, engagiert.
Dies ist sehr nützlich, wenn Sie einen Online-Shop betreiben und Benutzerfeedback sammeln möchten, ohne die Aufmerksamkeit der Benutzer abzulenken.
Sie können dieselbe AJAX-Funktionalität auch für andere benutzerdefinierte Formulare auf Ihrer Website verwenden. Zum Beispiel ermöglicht ein benutzerdefiniertes Anmeldeformular den Benutzern die Anmeldung ohne zusätzlichen Seitenaufruf.
Das gesagt, wir zeigen Ihnen, wie Sie ganz einfach ein WordPress AJAX-Kontaktformular in 4 einfachen Schritten erstellen.
- Schritt 1: Installieren Sie das WPForms-Plugin
- Schritt 2: Erstellen Sie Ihr erstes Formular
- Schritt 3: Aktivieren Sie die AJAX-Formularübermittlungsfunktion
- Schritt 4: Fügen Sie Ihr AJAX-fähiges Formular in WordPress hinzu
- Bonustipp: Formulareinträge als CSV oder Excel exportieren 📄
- Bonus-Ressourcen: Weitere WordPress-Formular-Anleitungen
Fangen wir an.
Schritt 1: Installieren Sie das WPForms-Plugin
Das erste, was Sie tun müssen, ist die Installation und Aktivierung eines Formular-Builders.
Für dieses Tutorial verwenden wir das WPForms-Plugin. Es ist der beste WordPress-Kontaktformular-Builder auf dem Markt und ermöglicht es Ihnen, auch problemlos Ajax-gestützte Formulare zu erstellen.
Bei WPBeginner verwenden wir WPForms, um unser Kontaktformular anzuzeigen, jährliche Leserumfragen durchzuführen und unter anderem Anfragen für Migrationsdienste zu verwalten.
Es war eine großartige Erfahrung, und Sie können unseren vollständigen WPForms-Testbericht für weitere Einblicke in dieses Plugin lesen!
Installieren und aktivieren wir also WPForms. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
📝 Hinweis: Um ein AJAX-Formular zu erstellen, benötigen Sie die Pro-Version des Plugins. Es gibt jedoch eine kostenlose WPForms-Version, die Sie ausprobieren können, wenn Sie den Drag-and-Drop-Builder und die grundlegenden Formularfunktionen erkunden möchten, bevor Sie ein Upgrade durchführen.
Nach der Aktivierung müssen Sie die Seite WPForms » Einstellungen besuchen, um Ihren Lizenzschlüssel einzugeben.
Nach Eingabe des Lizenzschlüssels können Sie automatische Updates erhalten und Add-ons installieren.
Sie sind nun bereit, schöne AJAX-Formulare in WordPress zu erstellen.
Schritt 2: Erstellen Sie Ihr erstes Formular
Lassen Sie uns nun Ihr erstes WordPress-Formular erstellen.
Besuchen Sie einfach die Seite WPForms » Neu hinzufügen im WordPress-Adminbereich.
Auf dem nächsten Bildschirm können Sie zuerst Ihrem neuen Formular einen Namen geben. Hier haben wir unser Formular beispielsweise 'Kontaktformular' genannt.
Danach wählen Sie aus, wie Sie Ihre Formulare erstellen möchten.
Mit WPForms können Sie Ihre Formulare von Grund auf neu erstellen, den KI-Formulargenerator verwenden oder aus über 2.000 vorgefertigten Vorlagen wählen.
Nehmen wir zum Beispiel an, Sie möchten WPForms AI verwenden. Dann müssen Sie ihm nur noch eine einfache Eingabeaufforderung geben, und es generiert das Formular für Sie im Vorschaufenster.
Für dieses Tutorial werden wir jedoch ein Kontaktformular erstellen. Fahren Sie mit der Maus über das Feld „Einfaches Kontaktformular“ und klicken Sie auf „Vorlage verwenden“.
Beachten Sie, dass Sie jede andere Art von Formular erstellen können, die Sie benötigen; der Prozess ist so ziemlich derselbe.
WPForms lädt nun Ihr Formular mit bereits hinzugefügten Basis-Feldern.
Von hier aus können Sie einfach auf ein beliebiges Formularfeld zeigen und darauf klicken, um es zu bearbeiten.
Sie können auch jedes neue Formularfeld aus der linken Spalte hinzufügen, indem Sie einfach darauf klicken.
Das neue Feld erscheint am Ende Ihres Formulars, direkt über der Schaltfläche Senden.
Sie können dann die Formularfelder per Drag & Drop verschieben, um ihre Reihenfolge zu ändern.
Sobald Sie mit der Anpassung des Formulars fertig sind, können Sie mit dem nächsten Schritt fortfahren.
Schritt 3: Aktivieren Sie die AJAX-Formularübermittlungsfunktion
WPForms ermöglicht die AJAX-Formularübermittlung nicht standardmäßig, daher müssen Sie sie für Ihr Formular manuell aktivieren.
Um dies zu tun, wechseln Sie einfach zum Tab „Einstellungen“ im Formular-Builder.
Gehen Sie im Tab „Allgemeine Einstellungen“ auf den Schalter neben der Option „AJAX-Formularübermittlung aktivieren“.
Nun richten wir ein, was nach dem Absenden des Formulars geschieht.
Zuerst können Sie im Einstellungsbereich zum Reiter „Bestätigung“ wechseln. Hier informieren Sie Ihre Benutzer darüber, dass ihre Formulareingabe empfangen wurde.
WPForms ermöglicht Ihnen dies auf verschiedene Arten. Sie können beispielsweise Benutzer zu einer URL weiterleiten, ihnen eine bestimmte Seite anzeigen oder einfach eine Nachricht auf dem Bildschirm ausgeben.
Da wir die AJAX-Funktionalität für das Formular aktiviert haben, würde die Weiterleitung von Benutzern zu einer anderen Seite den Zweck der Erstellung eines AJAX-Formulars zunichtemachen.
Sie müssen die Nachrichtenoption auswählen und die Bestätigungsnachricht bearbeiten. Nutzen Sie gerne die Formatierungsleiste im Editor oder fügen Sie ein oder zwei Links hinzu, um den Benutzern mitzuteilen, wohin sie als Nächstes gehen sollen.
Danach können Sie festlegen, wie Sie über eine Formularübermittlung benachrichtigt werden möchten.
Wechseln Sie zum Tab 'Benachrichtigungen' in den Formulareinstellungen und konfigurieren Sie die Einstellungen für Benachrichtigungs-E-Mails.
Sobald Sie fertig sind, können Sie Ihr Formular speichern und den Formular-Builder verlassen.
Schritt 4: Fügen Sie Ihr AJAX-fähiges Formular in WordPress hinzu
WPForms macht es super einfach, Formulare zu Ihrer WordPress-Website hinzuzufügen, sei es in einem Beitrag, einer Seite oder in Sidebar-Widgets.
Bearbeiten Sie einfach den Beitrag oder die Seite, auf der Sie das Formular hinzufügen möchten, und fügen Sie den WPForms-Block in Ihren Inhaltsbereich ein.
Danach müssen Sie das gerade erstellte Formular in den Einstellungen des Blocks auswählen.
WPForms lädt sofort eine Live-Vorschau des Formulars im Inhaltseditor.
Sie können nun Ihren Inhalt speichern oder veröffentlichen und dann Ihre WordPress-Website besuchen, um die AJAX-Funktionalität des Formulars zu testen.
Hier ist ein kurzer Blick auf das WordPress AJAX-Formularbeispiel von unserer Demoseite:
Sie können Ihr Formular auch zu einem Sidebar-Widget in WordPress hinzufügen.
Gehen Sie dazu zur Seite Darstellung » Widgets und fügen Sie den WPForms-Widget-Block zu einer Seitenleiste hinzu.
Wählen Sie das Formular aus, das Sie zuvor erstellt haben, und klicken Sie auf die Schaltfläche „Aktualisieren“, um die Widget-Einstellungen zu speichern. Sie können nun Ihre Website besuchen, um Ihr AJAX-gesteuertes Formular in Aktion zu sehen.
Bonustipp: Formulareinträge als CSV oder Excel exportieren 📄
Sobald Ihr AJAX-Formular einsatzbereit ist, möchten Sie möglicherweise alle Einreichungen aufzeichnen. Insbesondere wenn Sie Leads, Kundenanfragen oder Registrierungsinformationen sammeln.
Der einfachste Weg, dies zu tun, ist der Export als CSV- oder Excel-Datei.
Dies erleichtert die Organisation und Analyse von Antworten in Tabellenkalkulationsprogrammen wie Google Sheets oder Microsoft Excel. Es ist auch praktisch, um Berichte mit Ihrem Team zu teilen oder Formulardaten außerhalb von WordPress zu sichern.
Wenn Sie WPForms verwenden, ist der Export von Formulareinträgen einfach. Gehen Sie einfach zu WPForms » Einträge, wählen Sie Ihr Formular aus, wählen Sie die Exportoptionen und laden Sie Ihre Daten als CSV- oder Excel-Datei herunter.
Möchten Sie das einrichten? Folgen Sie unserer vollständigen Anleitung zum Exportieren von WordPress-Formulareinträgen in CSV und Excel.
Bonus-Ressourcen: Weitere WordPress-Formular-Anleitungen
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein WordPress AJAX-Kontaktformular für Ihre Website erstellen. Als Nächstes möchten Sie vielleicht auch unsere Artikel zu folgenden Themen lesen:
- So erstellen Sie ein Kontaktformular-Popup in WordPress
- So verwenden Sie Kontaktformulare, um Ihre E-Mail-Liste zu erweitern
- So erstellen Sie Kontaktformulare mit mehreren Empfängern
- So erstellen Sie ein sicheres Kontaktformular in WordPress
- So blockieren Sie Spam in Kontaktformularen in WordPress
- So verfolgen und reduzieren Sie Formularabbrüche
- Der ultimative Leitfaden zur Verwendung von WordPress-Formularen
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Haben Sie eine Frage oder einen Vorschlag? Hinterlassen Sie bitte einen Kommentar, um die Diskussion zu beginnen.