So erstellen Sie ein WordPress AJAX-Formular (in 4 einfachen Schritten)

Haben Sie schon einmal Leads verloren, weil Ihr Kontaktformular langsam war oder die gesamte Seite neu geladen werden musste? Das hören wir nur allzu oft.

Wir haben auch aus erster Hand erfahren, wie frustrierend herkömmliche WordPress-Formulare sein können – sowohl für Website-Betreiber als auch für deren Besucher. AJAX-Formulare lösen dieses Problem und können auch für Ihre Website dasselbe 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 bereits viele Male auf Kunden- und Partnerwebsites implementiert, und die Ergebnisse sprechen für sich.

In diesem Leitfaden stellen wir Ihnen einen einfachen 4-Schritte-Prozess zum Erstellen eines WordPress AJAX-Formulars vor. Wir verwenden ein anfängerfreundliches Plugin, das die technischen Arbeiten 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 Programmiertechnik, die es Webseiten ermöglicht, Daten zu senden und zu empfangen, ohne neu geladen zu werden.

Es wird häufig in Webformularen verwendet und ermöglicht es Benutzern, Formulardaten zu übermitteln, ohne die Seite neu laden zu müssen. Dies macht die Formularübermittlung einfach und schnell, was die allgemeine Benutzererfahrung verbessert.

Webanwendungen wie Gmail und Facebook nutzen diese Technik ebenfalls ausgiebig, um Benutzer zu binden, während Hintergrundaufgaben nahtlos ausgeführt werden.

Sie können AJAX für Formulare auf Ihrer WordPress-Website verwenden, um unnötige Seitenneuladungen zu vermeiden und Benutzer auf der Seite zu halten, die sie gerade besuchen.

Dies ist besonders hilfreich, wenn Sie einen Online-Shop betreiben und Benutzerfeedback sammeln möchten, ohne das Einkaufserlebnis zu unterbrechen.

Sie können dieselbe AJAX-Funktionalität auch für andere benutzerdefinierte Formulare auf Ihrer Website verwenden. Zum Beispiel kann ein benutzerdefiniertes Anmeldeformular es Benutzern ermöglichen, sich ohne zusätzlichen Seitenaufruf anzumelden.

In diesem Sinne zeigen wir Ihnen, wie Sie in 4 einfachen Schritten ein WordPress AJAX-Kontaktformular erstellen.

Fangen wir an.

Schritt 1: Installieren Sie das WPForms-Plugin

Der erste Schritt ist die Installation und Aktivierung eines Formular-Builder-Plugins.

Für dieses Tutorial verwenden wir das WPForms-Plugin. Es ist der beste WordPress-Kontaktformular-Builder auf dem Markt und ermöglicht es Ihnen, einfach Ajax-gestützte Formulare zu erstellen.

Bei WPBeginner verwenden wir WPForms unter anderem, um unser Kontaktformular anzuzeigen, jährliche Leserumfragen durchzuführen und Anfragen für Migrationsdienste zu verwalten.

Es war eine großartige Erfahrung, und Sie können unsere vollständige WPForms-Bewertung für weitere Einblicke einsehen.

Um zu beginnen, möchten Sie vielleicht ein WPForms-Konto erstellen. Klicken Sie auf der WPForms-Website auf die Schaltfläche „Jetzt WPForms erhalten“, wählen Sie einen Plan aus und schließen Sie den Bestellvorgang ab.

Wenn das erledigt ist, sollten Sie Ihr eigenes WPForms-Konto-Dashboard haben, von dem aus Sie Ihre WPForms Pro-Zip-Datei herunterladen und Ihren Lizenzschlüssel kopieren können.

Als Nächstes installieren und aktivieren wir das WPForms-Plugin.

In Ihrem WordPress-Adminbereich können Sie zu Plugins » Neues Plugin hinzufügen navigieren.

Dann können Sie die Suchleiste verwenden, um das Plugin schnell zu finden.

Wenn Sie es sehen, klicken Sie auf „Jetzt installieren“ und dann noch einmal auf „Aktivieren“.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zur Seite WPForms » Einstellungen, um Ihren Lizenzschlüssel einzugeben.

Nach der Überprüfung können Sie automatische Updates erhalten und Add-ons installieren. Sie sind nun bereit, mit der Erstellung von AJAX-Formularen in WordPress zu beginnen.

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, zum Beispiel „Kontaktformular“.

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.

Wenn Sie beispielsweise WPForms AI verwenden möchten, müssen Sie nur eine einfache Eingabeaufforderung eingeben, und es wird das Formular für Sie im Vorschaufenster generiert.

Für dieses Tutorial werden wir jedoch ein Kontaktformular erstellen, indem wir eine vorgefertigte Vorlage verwenden.

Fahren wir mit der Maus über das Feld „Simple Contact Form“ und klicken auf „Use Template“. Beachten Sie, dass Sie jede andere Art von Formular erstellen können, die Sie benötigen; der Prozess ist derselbe.

WPForms lädt nun Ihr Formular mit bereits hinzugefügten grundlegenden Feldern.

Von hier aus können Sie einfach auf ein beliebiges Formularfeld klicken, um es zu bearbeiten.

Sie können auch neue Formularfelder aus der linken Spalte hinzufügen, indem Sie 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

Abhängig von Ihren Einstellungen ist die AJAX-Formularübermittlung möglicherweise nicht standardmäßig aktiviert, lassen Sie uns das jetzt überprüfen.

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 passiert, nachdem jemand das Formular abgeschickt hat.

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.

Sie können Benutzer zwar auf eine neue Seite weiterleiten, dies erfordert jedoch einen Seitenaufruf. Um den größten Nutzen aus AJAX zu ziehen, empfehlen wir einfach, eine „Nachricht“ anzuzeigen, damit der Benutzer auf derselben Seite bleibt.

Sie müssen die Nachrichtenoption auswählen und die Bestätigungsnachricht bearbeiten. Sie können die Formatierungs-Symbolleiste verwenden oder Links hinzufügen, um Benutzer zu leiten, was als Nächstes zu tun ist.

Richten Sie als Nächstes ein, wie Sie über neue Formularübermittlungen benachrichtigt werden möchten.

Wechseln Sie zum Tab 'Benachrichtigungen' in den Formulareinstellungen und konfigurieren Sie die Einstellungen für Benachrichtigungs-E-Mails.

Wenn 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 einfach, Formulare zu Ihrer WordPress-Website hinzuzufügen, sei es in einem Beitrag, einer Seite oder einem Sidebar-Widget.

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 aus dem Dropdown-Menü im WPForms-Block auswählen.

WPForms lädt sofort eine Live-Vorschau des Formulars im Inhaltseditor.

Sie können Ihre Inhalte nun 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 zuvor erstellte Formular aus und klicken Sie auf die Schaltfläche „Aktualisieren“, um die Widget-Einstellungen zu speichern. Sie können nun Ihre Website besuchen, um Ihr AJAX-gestütztes 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 Ihrer Einträge 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 unkompliziert: Gehen Sie zu WPForms » Einträge, wählen Sie Ihr Formular aus, wählen Sie Ihre Exportoptionen und laden Sie die 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.

FAQ: WordPress AJAX-Formulare

Bevor wir zum Ende kommen, hier sind einige häufig gestellte Fragen, die aufkommen, wenn Leute anfangen, AJAX-Formulare in WordPress zu verwenden.

Wie verwende ich AJAX für die Formularübermittlung?

Der einfachste Weg ist die Verwendung eines Formular-Plugins, das AJAX bereits unterstützt, wie z. B. WPForms. Sie aktivieren einfach die AJAX-Option in den Formulareinstellungen, und das Plugin kümmert sich um alles für Sie.

Wenn Sie ein benutzerdefiniertes Formular erstellen, müssten Sie JavaScript und die AJAX-Hooks von WordPress verwenden. Aber für die meisten Websites ist ein Plugin viel einfacher und zuverlässiger.

Wo finde ich die AJAX-Einstellung in WPForms?

In WPForms befindet sich die AJAX-Option in den Formulareinstellungen. Nachdem Sie Ihr Formular im Builder geöffnet haben, gehen Sie zu Einstellungen » Allgemein und suchen Sie nach dem Kontrollkästchen AJAX-Formularübermittlung aktivieren. Sobald es aktiviert ist, wird das Formular übermittelt, ohne die Seite neu zu laden.

Was sind die Nachteile von AJAX?

AJAX ist auf JavaScript angewiesen, daher kann es zu Konflikten mit aggressiven Caching-Plugins kommen, die Skripte minimieren oder verzögern. Wenn Ihr Formular „dreht“, aber nicht sendet, versuchen Sie, Ihren Cache zu löschen oder die Einstellungen Ihres Optimierungs-Plugins zu überprüfen.

Es kann auch Probleme mit Page Buildern oder älteren Themes verursachen, wenn es nicht richtig eingerichtet ist. Deshalb ist es wichtig, Ihre Formulare nach der Aktivierung von AJAX zu testen.

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.