Möchten Sie verhindern, dass Ihre Seite aktualisiert wird, wenn ein Besucher ein Formular sendet? Standardmäßig wird die gesamte Seite neu geladen, indem Sie im Formular auf die Schaltfläche "Senden" klicken. Dann werden die im Formular eingegebenen Daten übertragen und auf dem Server gespeichert.
In diesem Artikel zeigen wir Ihnen, wie Sie die Ajax-Übermittlung in Ihren WordPress-Formularen aktivieren und verhindern, dass die Seite neu geladen wird.
Warum Ajax-Formularübermittlung in WordPress aktivieren?
Das Senden des Ajax-Formulars ist besonders nützlich, wenn Sie ein Formular in ein modales Popup einbetten möchten. Ohne aktivierte AJAX-Formularübermittlung müsste die gesamte Seite aktualisiert werden, was zum Schließen des Popups führen würde. Auf diese Weise können Benutzer die wichtige Bestätigungsnachricht verpassen, die sie beschäftigt.
Wenn die AJAX-Formularübermittlung aktiviert ist, können Ihre Benutzer die Bestätigungsmeldung sehen, wenn sie das Formular auf derselben Seite senden, ohne es erneut laden zu müssen.
Um das Senden von Ajax-Formularen auf Ihrer WordPress-Site zu ermöglichen, empfehlen wir WPForms, das beste Formular-Plugin für WordPress.
Schritt 1: Erstellen Sie ein neues Formular
Um mit der Erstellung Ihres Formulars zu beginnen, müssen Sie zuerst das WPForms-Plugin auf Ihrer WordPress-Website installieren.
Nicht sicher wie? Kein Problem. In unserer Anleitung erfahren Sie, wie Sie ein WordPress-Plugin installieren, um das Problem zu beheben.
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 7 verschiedene Formularvorlagen zur Auswahl. Lassen Sie uns die auswählen Einfaches Kontaktformular Option für dieses Tutorial und fügen Sie dem Formular ein Feld zum Hochladen von Dateien hinzu.
Sie sehen nun den Form Builder auf Ihrem Bildschirm. Auf der linken Seite Ihres Bildschirms haben Sie die Felder hinzufügen und der Feldoptionen Zunge. Auf diesen Registerkarten können Sie Ihr Kontaktformular konfigurieren.
Mit WPForms können Sie Ihrem Formular ganz einfach per Drag & Drop Felder hinzufügen. Sie können die Position der Felder auch durch Ziehen und Ablegen ändern. Wenn Sie ein Feld löschen möchten, ist das auch einfach. Bewegen Sie den Mauszeiger einfach über das unerwünschte Feld und klicken Sie auf Löschen Symbol, das in der oberen rechten Ecke des Feldes angezeigt wird.
Unter dem Feldoptionen Auf der Registerkarte können Sie die Feldbezeichnung ändern, das Format des Namensfelds ändern, die Schriftgröße ändern und Beschriftungen und Untertags aktivieren oder deaktivieren. Sie haben auch die Möglichkeit, das zu aktivieren bedingte Logik Option.
Wenn Sie mit dem Formularersteller Ihr Formular erstellt haben, klicken Sie auf speichern Schaltfläche, damit Ihre Änderungen erhalten bleiben.
Nachdem wir ein einfaches Kontaktformular erstellt haben, fügen wir die Funktion zum Hochladen von Dateien hinzu.
Um eine Datei-Upload-Funktion hinzuzufügen, müssen Sie nur auf das Feld Datei-Upload im linken Bereich klicken. Alternativ können Sie das Formularfeld Datei hochladen ziehen und an Ihrer bevorzugten Position im Formular-Generator ablegen.
Schritt 3: Aktivieren Sie die Ajax-Formularübermittlung
Sobald die Änderungen gespeichert sind, klicken Sie auf Konfigurationen Registerkarte auf der linken Seite des Seitengenerators. Hier sehen Sie mehrere Optionen. Gehe zum Allgemeines Option. Darunter sehen Sie eine Reihe von Feldern. Hier können Sie den Namen Ihres Formulars ändern, eine Beschreibung des Formulars hinzufügen, den Schaltflächentext ändern usw.
Wenn Sie auf dem Bildschirm nach unten scrollen, werden einige Kontrollkästchen angezeigt. Sie können das Kontrollkästchen aktivieren, das besagt Aktivieren Sie die Übermittlung des Ajax-Formulars. Schließen Sie den Vorgang ab, indem Sie auf klicken Speichern Schaltfläche in der oberen rechten Ecke Ihres Bildschirms.
Jetzt geh zu Benachrichtigung Registerkarte unter dem Allgemeines Zunge. Diese Option benachrichtigt Sie jedes Mal, wenn jemand Ihr Formular sendet. Geben Sie also im ersten Feld die E-Mail-Adresse des Administrators oder desjenigen ein, der für den Empfang der E-Mails verantwortlich ist. Sie können auch den Betreff der E-Mail, den Namen des Absenders, die Adresse des Empfängers und Ihre eigene Nachricht eingeben.
Speichern Sie anschließend Ihre Änderungen. Sie können auch eine Bestätigungsnachricht konfigurieren, die Besucher nach dem Klicken auf die Schaltfläche Senden erhalten.
Schritt 4: Veröffentlichen Sie Ihr Formular mit Ajax-Übermittlung
Der letzte Schritt besteht darin, Ihr Ajax-fähiges Übermittlungsformular auf Ihrer Website zu veröffentlichen. Gehen Sie dazu zu der Seite, auf der das Formular angezeigt werden soll.
Sie können beginnen, indem Sie zu gehen Seiten »Neu hinzufügen in Ihrem WordPress-Dashboard. Fügen Sie nun Ihrer Seite einen Titel hinzu. Klicken Sie im Texteditor Ihrer Seite auf Formular hinzufügen Option. Auf Ihrem Bildschirm wird ein neues Fenster angezeigt.
Klicken Sie auf den Dropdown-Pfeil und wählen Sie das gerade erstellte Formular aus. Klicken Sie nun auf die Formular hinzufügen Taste. Sie werden sehen, dass der Einbettungscode im Texteditor Ihrer Seite angezeigt wird. Sie können überprüfen, wie das Formular aussieht, indem Sie auf klicken Voraus Schaltfläche auf der rechten Seite Ihres Bildschirms.
Dann können Sie auf klicken Zu posten Schaltfläche, um das Formular endgültig zu aktivieren.
Das war einfach, nicht wahr?
Möglicherweise möchten Sie jetzt die Anzahl der Klicks verfolgen, die Ihr Kontaktformular erhält. Lesen Sie dazu unseren Leitfaden zum Verfolgen von Links und Schaltflächenklicks.
