KI-Zusammenfassung
Möchten Sie verhindern, dass eine Seite neu geladen wird, wenn jemand eines Ihrer Online-Formulare absendet?
Das Verhindern, dass eine Seite nach dem Absenden eines Formulars neu geladen wird, sorgt für eine bessere Benutzererfahrung und kann Ihnen sogar helfen, mehr Leads zu generieren.
In diesem Artikel
WordPress AJAX Kontaktformular erstellen
Dieses Tutorial für WordPress AJAX Kontaktformulare funktioniert mit allen über 2.100 WordPress-Formularvorlagen, die mit WPForms enthalten sind.
Hinweis: AJAX ist in den neuesten Versionen von WPForms automatisch aktiviert. Dieses Tutorial erklärt, wie Sie es einschalten, wenn Sie ältere Versionen zum Erstellen Ihrer Formulare verwendet haben.
1. Neues Formular erstellen
Installieren und aktivieren Sie zunächst das WPForms-Plugin. Weitere Details finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.
Nachdem Sie das WPForms-Plugin installiert haben, gehen Sie zu WPForms » Neu hinzufügen, um ein neues Formular zu erstellen.
Wählen Sie eine Vorlage aus der Liste aus:
Wir verwenden für dieses Tutorial die Vorlage Einfaches Kontaktformular.
2. Formular anpassen
Jetzt ist es an der Zeit, Ihr Formular zu erstellen. Sie können die Formularfelder einfach anpassen, indem Sie sie von der linken Seite des Builders in den Vorschau-Bereich auf der rechten Seite ziehen.
Wir fügen unserem Kontaktformular ein Feld für den Datei-Upload hinzu, damit Benutzer relevante Dokumente mit ihrer Übermittlung einreichen können.
Passen Sie die Platzierung der Felder nach Ihren Wünschen an, indem Sie sie auf Ihrem Formular nach oben und unten ziehen.
Sie können auch auf ein beliebiges Feld im Vorschau-Bereich klicken, um zusätzliche Optionen zu öffnen. Dies ermöglicht es Ihnen, Feldbezeichnungen zu ändern, bedingte Logik hinzuzufügen und vieles mehr.
Wenn Sie fertig sind, klicken Sie auf die orangefarbene Schaltfläche Speichern in der oberen rechten Ecke.
Nachdem wir nun ein Formular mit einem Feld für den Datei-Upload erstellt haben, aktivieren wir es für AJAX.
3. AJAX-Formularübermittlungen aktivieren
Klicken Sie als Nächstes auf der linken Seite Ihrer Seite auf Einstellungen. Wählen Sie dann den Bereich Allgemein aus.
Erweitern Sie am unteren Rand des rechten Bedienfelds die Erweiterten Optionen und suchen Sie die Einstellung AJAX-Formularübermittlung aktivieren. Stellen Sie sicher, dass sie aktiviert ist.
Das war's! Ihr Formular ist jetzt für AJAX-Übermittlungen aktiviert.
Lassen Sie uns ein paar weitere wichtige Dinge für Ihr AJAX-Kontaktformular konfigurieren.
4. Formularbenachrichtigungen konfigurieren
Als Nächstes müssen Sie Ihre E-Mail-Benachrichtigungen für das Formular einrichten. Diese sind eine hervorragende Möglichkeit, um zu erfahren, wann jemand eines Ihrer AJAX-fähigen Formulare absendet.
Um zu beginnen, gehen Sie zu Einstellungen » Benachrichtigungen.
Sofern Sie die Benachrichtigungsfunktion nicht deaktivieren, erhalten Sie jedes Mal eine E-Mail-Benachrichtigung, wenn jemand Ihr AJAX-Formular übermittelt.
Hilfe beim Ausfüllen dieser Einstellungen finden Sie in unserem Tutorial, wie Sie Formularbenachrichtigungen in WordPress einrichten.
Dieses Beispiel hat einen grauen Hintergrund, aber Sie können die Farbe nach Belieben ändern. Diese personalisierten Anpassungen können Ihre E-Mail-Benachrichtigungen professioneller aussehen lassen und ihnen eine persönliche Note verleihen. Schauen Sie sich unseren Leitfaden zum Hinzufügen einer benutzerdefinierten Kopfzeile zu Ihrer E-Mail-Vorlage an.
5. Bestätigungen konfigurieren
Formularbestätigungen ermöglichen es Ihnen, sofort (und automatisch) Maßnahmen zu ergreifen, nachdem Ihr Benutzer Informationen an Ihr Formular übermittelt hat.
Es gibt 3 verschiedene Arten von Bestätigungen in WPForms:
- Nachricht — Dies ist der Standard-Bestätigungstyp, der angezeigt wird, nachdem jemand auf Senden geklickt hat, und er ist anpassbar. Schauen Sie sich unsere Tipps an, wie Sie Ihre Bestätigungsnachricht anpassen, um die Zufriedenheit Ihrer Website-Besucher zu steigern.
- Seite anzeigen — Leiten Sie Benutzer automatisch zu einer beliebigen Seite auf Ihrer Website weiter.
- Weiterleiten — Nützlich, wenn Sie den Benutzer zu einer anderen Website oder einer spezialisierten URL für komplexere Entwicklungen weiterleiten möchten.
Für zusätzliche Hilfe bei diesem Schritt lesen Sie unser Tutorial, wie Sie Formularbestätigungen einrichten.
Sobald Sie Ihre Benachrichtigungen und Bestätigungen eingerichtet haben, stellen Sie sicher, dass Sie Ihr Formular erneut speichern.
6. AJAX-Formular einbetten
Sobald Sie Ihr AJAX-fähiges Formular nach Ihren Wünschen konfiguriert haben, möchten Sie es zu Ihrer Website hinzufügen.
WPForms ermöglicht es Ihnen, Ihre Formulare an mehreren Stellen auf Ihrer Website hinzuzufügen, einschließlich Ihrer Seiten, Blogbeiträge und Seitenleisten-Widgets. Werfen wir einen Blick auf die gängigste Platzierungsoption: Einbetten in Seiten oder Beiträge.
Erstellen Sie zunächst eine neue Seite oder einen neuen Beitrag in WordPress oder öffnen Sie einen vorhandenen im Editor.
Fügen Sie danach einen neuen Block hinzu und wählen Sie das WPForms-Symbol aus. Wenn Sie es nicht sofort sehen, können Sie danach suchen.
Das praktische WPForms-Widget wird in Ihrem Block angezeigt. Klicken Sie auf das WPForms-Dropdown und wählen Sie aus, welches der von Ihnen erstellten Formulare Sie in Ihre Seite einfügen möchten. Wählen Sie Ihr AJAX-Formular aus.
Klicken Sie anschließend auf die blaue Schaltfläche oben rechts, auf der entweder Veröffentlichen oder Aktualisieren steht, damit Ihr Formular auf Ihrer Website erscheint.
Und da ist es. Sie wissen jetzt, wie Sie ein einfaches WordPress AJAX-Kontaktformular ohne Seitenaktualisierung erstellen, und Ihre Website-Besucher werden Sie dafür noch mehr lieben.
Häufig gestellte Fragen zu AJAX-Formularen
Was ist ein AJAX-Formular?
Ein AJAX-fähiges Formular ist ein schnelles und dynamisches Formular, das Backend-Prozesse übermitteln und ausführen kann, ohne dass die gesamte Seite neu geladen werden muss.
Standardmäßig muss die gesamte Seite neu geladen werden, wenn ein Benutzer auf Senden klickt. Dies liegt daran, dass bestimmte Prozesse ausgeführt werden müssen, einschließlich der Speicherung der Formulardaten, des Versendens von Benachrichtigungs-E-Mails und mehr.
Da WordPress und WPForms AJAX-Formulare unterstützen, haben Sie die Möglichkeit, AJAX-Formularübermittlungen zu aktivieren, um zu verhindern, dass Ihre Formulare nach der Übermittlung durch einen Benutzer aktualisiert werden.
Warum werden AJAX für Kontaktformulare verwendet?
AJAX-fähige Formulare sind plötzlich zu einem Muss für Websites jeder Größe geworden.
Hier sind die Top-Gründe, warum AJAX für Kontaktformulare immer beliebter wird:
- Sorgt für eine wesentlich bessere Benutzererfahrung.
- Blitzschnelle Ladezeiten und erhöhte WordPress-Website-Geschwindigkeit.
- Hält Modals und Popups, die Ihr Formular enthalten, geöffnet, damit Sie eine Folgeaktion oder Nachricht anzeigen können, um den Umsatz zu steigern.
- Bietet visuelle Hinweise und die Zusicherung, dass das Formular verarbeitet wird.
Erstellen Sie als Nächstes ein WordPress-Popup-Formular
Nachdem Sie nun Ihre Popups geöffnet halten können, nachdem jemand auf Senden geklickt hat, möchten Sie ein großartiges Plugin verwenden, um eine gezielte Nachricht anzuzeigen.
- Lesen Sie unbedingt unseren Beitrag über die besten WordPress-Popup-Plugins.
- Schauen Sie sich 2 verschiedene Möglichkeiten an, ein Popup-Formular in WordPress zu erstellen.
- Und lernen Sie schließlich, wie Sie mit WPForms ein Popup mit einem Gutscheincode erstellen.
Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-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.
Danke
Ich habe die Anweisungen befolgt, aber es funktioniert nicht.
Wenn ich ein Formular mit benutzerdefinierter Verarbeitung übermittle, sehe ich 2 Anfragen an /wp-admin/admin-ajax.php
Die erste (die tatsächlich die ist, die ich auslöse) schlägt mit Forbidden (bezüglich Nonce) fehl und ich möchte tatsächlich eine benutzerdefinierte Funktion auslösen, die einige Verarbeitungen der Formulardaten durchführt.
Die zweite ist erfolgreich, gibt aber die Bestätigung zurück, die ich überspringen möchte.
Wie kann ich das machen? Wie erreiche ich ein AJAX-Formular mit benutzerdefinierter Verarbeitung?
Vielen Dank.
Hallo Eli. Es sieht so aus, als ob Sie eine benutzerdefinierte Lösung benötigen, um das zu erreichen, was Sie suchen. Wir empfehlen, sich mit Seahawk in Verbindung zu setzen, der Ihnen dabei helfen kann.