Möchten Sie ein AJAX-Kontaktformular in WordPress erstellen?
AJAX-Kontaktformulare ermöglichen es Benutzern, das Formular abzusenden, ohne eine Seite neu laden zu müssen. Auf diese Weise können Sie die Benutzerinteraktion erhöhen und gleichzeitig Ihren Benutzern eine bessere Erfahrung beim Senden von Formularen bieten.
Dies ist praktisch, wenn Sie eine E-Commerce-Website betreiben und Benutzerfeedback sammeln möchten, ohne die Aufmerksamkeit des Benutzers abzulenken.
Sie können dieselbe AJAX-Funktionalität auch für andere benutzerdefinierte Formulare auf Ihrer Website verwenden. Beispielsweise ermöglicht ein benutzerdefiniertes Benutzeranmeldungsformular Benutzern die Anmeldung ohne zusätzliches Laden der Seite.
In diesem Artikel zeigen wir Ihnen mit Schritt-für-Schritt-Anleitung, wie Sie ganz einfach ein WordPress AJAX-Kontaktformular erstellen.
Was ist Ajax und warum verwenden Sie es für Ihre Formulare?
Ajax, kurz für Asynchronous Javascript and XML, ist eine JavaScript-Programmiertechnik, die es Entwicklern ermöglicht, Daten zu übertragen, ohne eine Seite neu laden zu müssen.
Es wird am häufigsten in Webformularen verwendet, sodass Benutzer Formulardaten senden können, ohne eine Seite neu laden zu müssen. Dies macht die Formularübermittlung einfach und schnell, was die allgemeine Benutzererfahrung verbessert.
Webanwendungen wie Gmail und Facebook verwenden diese Technik ausgiebig, um die Benutzer zu beschäftigen, während alles nahtlos im Hintergrund funktioniert.
Sie können Ajax auch für Ihre WordPress-Formulare verwenden. Es erspart Benutzern unnötiges Neuladen der Seite und hält sie auf der Seite, die sie gerade anzeigen, beschäftigt.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie in 4 einfachen Schritten ein WordPress Ajax-Kontaktformular erstellen können.
1. Installieren Sie das WPForms-Plugin
Das erste, was Sie tun müssen, ist die Installation und Aktivierung des WPForms Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
WPForms ist das beste WordPress-Formular-Builder-Plugin auf dem Markt. Es ermöglicht Ihnen auch, einfach Ajax-basierte Formulare zu erstellen.
Nach der Aktivierung müssen Sie besuchen WPForms » Einstellungen Seite, um Ihren Lizenzschlüssel einzugeben.
Nach Eingabe des Lizenzschlüssels können Sie automatische Updates erhalten und Add-Ons installieren.
Sie sind jetzt bereit, schöne Ajax-Formulare in WordPress zu erstellen.
2. Erstellen Sie Ihr erstes Formular
Lassen Sie uns Ihr erstes Formular erstellen.
Einfach besuchen WPForms » Neu hinzufügen Seite im WordPress-Adminbereich. Sie werden aufgefordert, einen Titel für Ihr Formular anzugeben und eine Vorlage als Ausgangspunkt auszuwählen.
Für dieses Tutorial erstellen wir ein Kontaktformular. Sie können jedoch jede andere Art von Formular erstellen, die Sie benötigen.
WPForms lädt jetzt Ihr Formular mit bereits hinzugefügten Basisfeldern. Sie können einfach auf ein beliebiges Formularfeld zeigen und 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 wird unten in Ihrem Formular direkt über der Schaltfläche zum Senden angezeigt.
Sie können Formularfelder einfach per Drag & Drop im Formular nach oben oder unten verschieben.
Wenn Sie mit der Bearbeitung des Formulars fertig sind, können Sie mit dem nächsten Schritt fortfahren.
3. Aktivieren Sie die Funktion zum Senden von Ajax-Formularen
WPForms aktiviert standardmäßig die Übermittlung von Ajax-Formularen nicht. Sie müssen es für Ihr Formular manuell aktivieren.
Wechseln Sie einfach im Formular-Builder zur Registerkarte Einstellungen und aktivieren Sie das Kontrollkästchen neben der Option „AJAX-Formularübermittlung aktivieren“.
Wenn Sie das Kontrollkästchen aktivieren, wird die Ajax-Funktion für dieses Formular aktiviert.
Lassen Sie uns nun festlegen, was nach dem Absenden des Formulars passiert.
Wechseln Sie zunächst in den Einstellungen auf den Reiter ‚Bestätigung‘. Hier informieren Sie Ihre Benutzer, dass Sie ihre Formularübermittlung erhalten haben.
WPForms ermöglicht Ihnen, dies auf verschiedene Weise zu tun. Sie können beispielsweise Benutzer zu einer URL umleiten, ihnen eine bestimmte Seite anzeigen oder einfach eine Nachricht auf dem Bildschirm anzeigen.
Da wir die Ajax-Funktionalität für das Formular aktiviert haben, wird das Umleiten von Benutzern auf eine andere Seite den Zweck der Erstellung eines Ajax-Formulars zunichte machen.
Sie müssen die Nachrichtenoption auswählen und die Bestätigungsnachricht bearbeiten. Sie können die Formatierungssymbolleiste im Editor verwenden oder einen oder zwei Links hinzufügen, um den Benutzern mitzuteilen, wo sie als nächstes hingehen sollen.
Danach können Sie einstellen, wie Sie über eine Formularübermittlung benachrichtigt werden möchten.
Wechseln Sie in den Formulareinstellungen zur Registerkarte Benachrichtigungen und konfigurieren Sie die Benachrichtigungs-E-Mail-Einstellungen.
Wenn Sie fertig sind, können Sie Ihr Formular speichern und den Formulargenerator beenden.
4. Fügen Sie Ihr Ajax-fähiges Formular in WordPress hinzu
Mit WPForms können Sie ganz einfach Formulare zu Ihren WordPress-Beiträgen, Seiten und Seitenleisten-Widgets hinzufügen.
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 soeben erstellte Formular aus den Einstellungen des Blocks auswählen. WPForms lädt sofort eine Live-Vorschau des Formulars in den Inhaltseditor.
Sie können Ihre Inhalte jetzt speichern oder veröffentlichen und dann Ihre Website besuchen, um die Ajax-Funktionalität des Formulars zu testen.
Sie können Ihr Formular auch zu einem Seitenleisten-Widget in WordPress hinzufügen. Gehen Sie dazu zu Aussehen » Widgets Seite und fügen Sie das WPForms-Widget zu einer Seitenleiste hinzu.
Wählen Sie das zuvor erstellte Formular aus und klicken Sie auf die Schaltfläche Speichern, um die Widget-Einstellungen zu speichern. Sie können jetzt Ihre Website besuchen, um Ihr Ajax-basiertes Formular in Aktion zu sehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein WordPress Ajax-Kontaktformular für Ihre Website erstellen. Vielleicht möchten Sie auch unsere Anleitung zum Erstellen eines Kontaktformular-Popups in WordPress lesen.