Möchten Sie verhindern, dass Ihre Seite aktualisiert wird, wenn ein Besucher ein Formular absendet? Standardmäßig wird die gesamte Seite nach dem Klicken auf die Schaltfläche zum Absenden des Formulars neu geladen. Und dann werden die im Formular eingegebenen Daten an den Server übertragen und gespeichert.
In diesem Artikel zeigen wir Ihnen, wie Sie die Ajax-Übermittlung für Ihre WordPress-Formulare aktivieren und das Neuladen der Seite verhindern.
Warum Ajax-Formularübermittlung in WordPress aktivieren
Die Ajax-Formularübermittlung ist besonders hilfreich, wenn Sie ein Formular in einem Modal-Popup einbetten möchten. Ohne aktivierte AJAX-Formularübermittlung müsste die gesamte Seite neu geladen werden, was zum Schließen des Popup-Fensters führen würde. Auf diese Weise könnten Benutzer die wichtige Bestätigungsnachricht verpassen, die sie bei der Stange hält.
Mit aktivierter AJAX-Formularübermittlung könnten Ihre Benutzer die Bestätigungsnachricht nach dem Absenden des Formulars auf derselben Seite ohne Neuladen sehen.
Um die Ajax-Formularübermittlung auf Ihrer WordPress-Website zu aktivieren, empfehlen wir WPForms, das beste Formular-Plugin für WordPress.
Schritt 1: Neues Formular erstellen
Um mit der Erstellung Ihres Formulars zu beginnen, müssen Sie zuerst das WPForms-Plugin auf Ihrer WordPress-Website installieren.
Sie wissen nicht, wie? Kein Problem. Sie können sich unseren Leitfaden ansehen, wie man ein WordPress-Plugin installiert, um alles zu regeln.
Sobald das Plugin installiert und aktiviert ist, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu WPForms » Neu hinzufügen. Sie werden nun zu einer Seite weitergeleitet, auf der Sie eine Vorlage für Ihr Formular auswählen können.
WPForms bietet verschiedene Formularvorlagen zur Auswahl. Wählen wir für dieses Tutorial die Vorlage Datei-Upload-Formular. Sie könnten auch mit der Vorlage Einfaches Kontaktformular arbeiten.
Sie sehen nun den Formular-Builder auf Ihrem Bildschirm. Auf der linken Seite Ihres Bildschirms befinden sich die Registerkarten Felder hinzufügen und Feldoptionen. Sie können diese Registerkarten verwenden, um Ihr Kontaktformular zu konfigurieren.
Wenn Sie die Vorlage für den Datei-Upload verwenden, wird das Feld bereits zu Ihrem Formular hinzugefügt. Wenn Sie das Feld zu einer anderen Vorlage hinzufügen möchten, müssen Sie nur das Formularfeld Datei-Upload per Drag & Drop an die gewünschte Position im Formular-Builder ziehen.
Auf diese Weise macht es Ihnen WPForms leicht, Felder per Drag & Drop zu Ihrem Formular hinzuzufügen. Sie können auch die Position der Felder durch Ziehen und Ablegen ändern. Wenn Sie ein Feld entfernen möchten, ist das auch einfach. Bewegen Sie einfach den Mauszeiger über das unerwünschte Feld und klicken Sie auf das Löschen-Symbol, das oben rechts in der Ecke des Feldes erscheint.
Unter der Registerkarte Feldoptionen können Sie die Bezeichnung des Feldes ändern, das Format des Namensfeldes ändern, die Schriftgröße anpassen und Bezeichnungen und Unterbezeichnungen aktivieren oder deaktivieren. Sie haben auch die Möglichkeit, die Option bedingte Logik zu aktivieren.
Wenn Sie mit dem Formular-Builder fertig sind, klicken Sie auf die Schaltfläche Speichern, damit Ihre Änderungen erhalten bleiben.
Schritt 3: Ajax-Formularübermittlung aktivieren
Sobald Ihre Änderungen gespeichert sind, klicken Sie auf die Registerkarte Einstellungen auf der linken Seite Ihres Page Builders. Hier sehen Sie mehrere Optionen. Gehen Sie zur Option Allgemein. Darunter sehen Sie eine Reihe von Feldern. Hier können Sie den Namen Ihres Formulars ändern, eine Formularbeschreibung hinzufügen, den Button-Text ändern usw.
Wenn Sie weiter nach unten scrollen, sehen Sie ein paar Kontrollkästchen. Sie können das Kontrollkästchen mit der Bezeichnung Ajax-Formularübermittlung aktivieren auswählen. Schließen Sie den Vorgang ab, indem Sie auf die Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms klicken.
Gehen Sie nun zur Registerkarte Benachrichtigung unter der Registerkarte Allgemein. Diese Option benachrichtigt Sie jedes Mal, wenn jemand Ihr Formular übermittelt. Geben Sie also im 1. Feld die E-Mail-Adresse des Administrators oder der Person ein, die für den Empfang der E-Mails zuständig ist. Sie können auch den E-Mail-Betreff, den Namen des Absenders, die Adresse des Empfängers und eine eigene Nachricht eingeben.
Stellen Sie nach Abschluss sicher, dass Sie die Änderungen speichern. Sie können auch eine Bestätigungsnachricht festlegen, die die Besucher erhalten, nachdem sie auf die Schaltfläche zum Übermitteln geklickt haben.
Schritt 4: Veröffentlichen Ihres Formulars mit Ajax-Übermittlung
Der letzte Schritt ist die Veröffentlichung Ihres Formulars mit aktivierter Ajax-Übermittlung auf Ihrer Website. Gehen Sie dazu zu der Seite, auf der das Formular erscheinen soll.
Sie können damit beginnen, in Ihrem WordPress-Dashboard zu Seiten » Neu hinzufügen zu gehen. Fügen Sie nun einen Titel zu Ihrer Seite hinzu. Fügen Sie im Texteditor Ihrer Seite einen neuen Block hinzu und suchen Sie nach WPForms.
Wenn Sie den Block hinzufügen, sehen Sie das WPForms-Maskottchen mit einem Dropdown-Menü, um das gerade erstellte Formular auszuwählen.
Wählen Sie Ihr bevorzugtes Formular aus und eine Vorschau Ihres Formulars wird auf Ihrer Seite angezeigt.
Sie können das Formular auch im klassischen Editor über die Schaltfläche „Formular hinzufügen“ hinzufügen, wie hier:
Sie können dann auf die Schaltfläche Veröffentlichen klicken, um das Formular endgültig live zu schalten.
Das war einfach, nicht wahr?
Möglicherweise möchten Sie jetzt die Anzahl der Klicks auf die Schaltfläche Ihres Kontaktformulars verfolgen. Schauen Sie sich dazu unseren Leitfaden zum Verfolgen von Links und Button-Klicks an.
Kommentare Hinterlasse eine Antwort