So zeigen Sie einen Formulareintrag in der Vorschau an, bevor Sie ihn absenden

Veröffentlicht: 2022-01-27

Möchten Sie, dass Ihre Besucher eine Vorschau ihrer Formulareinträge sehen, bevor sie sie absenden?

Indem Benutzer eine Vorschau ihrer Einträge anzeigen können, verringert sich die Wahrscheinlichkeit von Fehlern und Ungenauigkeiten beim Ausfüllen von Formularen erheblich.

WPForms verfügt über ein Eingabevorschaufeld, das Sie ganz einfach zu Ihren Formularen hinzufügen können, sodass Ihre Benutzer während und nach der Übermittlung eine schnelle Zusammenfassung ihrer Eingaben sehen können.

In diesem Beitrag zeigen wir Ihnen, wie Sie das Feld Eintragsvorschau hinzufügen und auf verschiedene Weise in WPForms anpassen können.

Erstellen Sie jetzt ein Formular mit Eintragsvorschau

Warum sollten Sie eine Eintragsvorschau anzeigen?

Die Möglichkeit, Einträge in der Vorschau anzuzeigen, ist sehr nützlich, insbesondere bei längeren und komplexeren Formularen.

WPForms ist das beste WordPress Form Builder-Plugin. Erhalte es kostenlos!

Es ist normal, beim Ausfüllen eines Formulars Tippfehler und Fehler zu machen, aber in einer Vorschau vor dem Absenden können Sie die Informationen auf Richtigkeit überprüfen, bevor Sie auf die Schaltfläche „Senden“ klicken.

Wenn Sie also Fehler minimieren und Ihren Benutzern die Möglichkeit geben möchten, Fehler vor dem Absenden zu korrigieren, sollten Sie das von WPForms angebotene Eingabevorschau-Feld hinzufügen.

So zeigen Sie einen Formulareintrag in der Vorschau an, bevor Sie ihn absenden

Sehen Sie sich unser Schritt-für-Schritt-Tutorial an, um zu erfahren, wie Sie Ihren Formularen eine Vorschau der Einreichung hinzufügen können:

  1. Installieren Sie WPForms
  2. Fügen Sie ein neues Formular hinzu
  3. Formulareingabe-Vorschaufeld hinzufügen
  4. Hinweis & Stil der Vorschau anpassen
  5. Eingangsvorschau-Bestätigung hinzufügen

Lass uns anfangen.

1. Installieren Sie WPForms

Wählen Sie zunächst einen geeigneten WPForms-Plan und registrieren Sie Ihr Konto. Melden Sie sich dann in Ihrem WPForms-Kontobereich an und klicken Sie auf die Registerkarte Downloads . Dadurch wird eine Seite geöffnet, auf der Sie auf die Schaltfläche Download WPForms klicken können, um die ZIP-Datei herunterzuladen.

Laden Sie die Schaltfläche WPForms herunter

Stellen Sie sicher, dass Sie Ihren Lizenzschlüssel kopieren, während Sie sich auf dieser Seite befinden. Sie benötigen dies später, wenn Sie WPForms Pro auf Ihrer WordPress-Site aktivieren.

WPForms-Lizenzschlüssel

Nachdem die ZIP-Datei auf Ihren Computer heruntergeladen wurde, öffnen Sie Ihr WordPress-Admin-Dashboard und klicken Sie auf Plugins » Neu hinzufügen. Klicken Sie dann auf die Schaltfläche Plug- in hochladen.

Plugin hochladen

Klicken Sie nun auf die Schaltfläche Datei auswählen und wählen Sie die gerade heruntergeladene Plugin-Datei aus.

Klicken Sie auf Jetzt installieren , wenn die Datei hochgeladen ist.

Jetzt wpforms installieren

WPForms wird jetzt auf Ihrer WordPress-Site installiert. Dies sollte nur wenige Sekunden dauern. Wenn die Installation abgeschlossen ist, klicken Sie auf die Schaltfläche Plugin aktivieren.

Plugin WPForms aktivieren

Klicken Sie nun auf WPForms » Einstellungen. Dadurch wird standardmäßig die Registerkarte Allgemeine Einstellungen geöffnet. Scrollen Sie nach unten, um das Feld Lizenzschlüssel zu finden, und geben Sie hier Ihren Schlüssel ein (den Sie zuvor kopiert haben).

WPForms-Lizenzschlüssel

Klicken Sie dann auf die Schaltfläche Schlüssel überprüfen. Dadurch wird Ihre WPForms Pro-Installation auf Ihrer Website abgeschlossen.

2. Fügen Sie ein neues Formular hinzu

Öffnen Sie nun den WordPress-Adminbereich Ihrer Website und klicken Sie in der linken Seitenleiste auf WPForms » Neu hinzufügen . Sie können Ihrem Formular jetzt einen Namen geben, damit Sie es später leichter wiederfinden.

Neues Formular hinzufügen

Scrollen Sie nach unten, um eine Vorlage auszuwählen und mit der Erstellung Ihres Formulars zu beginnen. Wie alle WPForms-Felder wird das Eingabevorschaufeld von den meisten der über 300 verfügbaren Vorlagen unterstützt.

Vorlage auswählen

Wenn Sie eine Vorlage ausgewählt haben, fügen wir im nächsten Schritt das Feld Erfassungsvorschau hinzu.

3. Fügen Sie das Formulareingabe-Vorschaufeld hinzu

Im folgenden Beispiel verwenden wir ein benutzerdefiniertes Terminbuchungsformular, aber Sie können eine beliebige Formularvorlage Ihrer Wahl verwenden.

Um Ihrem Formular eine Vorschaufunktion hinzuzufügen, ziehen Sie einfach das Feld Eintragsvorschau aus dem linken Bereich des Builders in den rechten Bereich, wo sich Ihre eigentlichen Formularfelder befinden.

Einfache Vorschau des Kontaktformulars

Wenn Sie das Feld Eintragsvorschau zu Ihrem Formular hinzufügen, wird automatisch eine neue Seite hinzugefügt, auf der die Vorschau angezeigt wird.

Das Feld Eintragsvorschau mit Seitenumbruch im Vorschaubereich des Form Builders

So sieht die Vorschau aus, wenn ein Benutzer ein Formular ausfüllt:

Vorschau des einfachen Formulars

Sie können das Feld Erfassungsvorschau auch mehrfach in Ihrem Formular platzieren. Wenn Sie beispielsweise ein mehrseitiges Formular haben, können Sie nach jeder Seite ein Eingabevorschaufeld platzieren. Dies bedeutet, dass Ihre Benutzer die Informationen, die sie auf den vorherigen Seiten ausgefüllt haben, in der Vorschau anzeigen können, während sie mit dem Ausfüllen des Rests Ihres Formulars fortfahren.

Vorschau mehrerer Formulareingabefelder

Das Hinzufügen mehrerer Eingabevorschaufelder in Ihren langen Formularen ist eine großartige Möglichkeit, um sicherzustellen, dass Ihre Benutzer eine Vorschau ihrer Einträge anzeigen und jederzeit zurückgehen können, um bei Bedarf Änderungen vorzunehmen.

4. Passen Sie den Vorschauhinweis und -stil an

Mit WPForms können Sie die Vorschaubenachrichtigung anpassen. Klicken Sie einfach auf das Feld Eingabevorschau in Ihrer Formularerstellungsansicht, um die Feldeinstellungen zu öffnen.

Sie können die Umschaltfläche Vorschaubenachrichtigung anzeigen verwenden, um die Nachricht über der Eintragsvorschau anzuzeigen oder vollständig auszublenden.

Hinweis zur Aktivierung des Feldes Erfassungsvorschau

Außerdem haben Sie die Freiheit, die Vorschaubenachrichtigung nach Ihren Wünschen zu bearbeiten oder die Standardnachricht so zu belassen, wie sie ist.

Als Nächstes möchten Sie vielleicht den Stil der Eintragsvorschau ändern. Klicken Sie auf die Registerkarte Erweitert in den Feldoptionen für die Eingabevorschau, um aus 4 verschiedenen Vorschaustilen auszuwählen:

  • Basic
  • Kompakt
  • Tisch
  • Tisch, kompakt

Auswählen eines Stils für die Eingangsvorschau

Der Standardstil ist Basic, der eine zeilenweise Vorschau des Formulareintrags anzeigt.

Vorschau des einfachen Formulars

Wenn Sie Ihrer Vorschau ein strafferes Aussehen verleihen möchten, können Sie die Option „ Kompakter Stil“ verwenden.

Kompakte Form

Damit ist die Einrichtung des Eingabevorschaufelds in Ihren Formularen abgeschlossen. Aber es gibt noch eine andere Art von Eintragsvorschau, die Sie hinzufügen können, wie wir im nächsten Schritt zeigen werden.

5. Eingangsvorschau-Bestätigung hinzufügen

Abgesehen von Eintragsvorschauen, die angezeigt werden, wenn Sie ein Formular ausfüllen, können Sie mit WPForms auch Vorschauen anzeigen, nachdem ein Benutzer ein Formular gesendet hat.

Im Gegensatz zum Feld Eintragsvorschau haben Ihre Benutzer nicht die Möglichkeit, ihre Einträge zu ändern, wenn eine Vorschaubestätigung angezeigt wird. Stattdessen zeigt es Ihren Benutzern nur eine Kopie ihrer Einreichung, die nicht mehr geändert werden kann.

Um Bestätigungen für die Eingangsvorschau einzurichten, gehen Sie zu Einstellungen » Bestätigungen im WPForms-Formularersteller. Hier können Sie die Schaltfläche Eintragsvorschau nach der Bestätigungsmeldung anzeigen umschalten.

Bestätigung der Eingangsvorschau aktivieren

Wenn Sie diese Option aktiviert haben, wird ein Dropdown-Menü angezeigt, in dem Sie einen Vorschaustil auswählen können, wie oben für die Eingabevorschaufelder gezeigt.

Auswahl des Bestätigungsstils für die Eingangsvorschau

Sie können weiterhin die Eintragsvorschau (die beim Ausfüllen eines Formulars angezeigt wird) zusammen mit der Vorschaubestätigung (die erst nach dem Absenden der Einträge angezeigt wird) verwenden. Oder Sie können nur die eine oder andere dieser Optionen verwenden. Es hängt alles von Ihren Vorlieben ab und davon, was Sie mit Ihren Formularen erreichen möchten.

Bestätigung der Vorschau

Und das ist es! Sie können Ihren Benutzern jetzt erlauben, einen Formulareintrag vor dem Absenden in der Vorschau anzuzeigen.

Als nächstes erzwingen Sie Zugriffsbeschränkungen für WordPress-Formulare

Möchten Sie Ihre WordPress-Formulare nur auf eingeloggte Benutzer beschränken? Mit WPForms können Sie Benutzerberechtigungsstufen nach ihrem Anmeldestatus auswählen. Weitere Informationen finden Sie in unserem Artikel zum Beschränken von WordPress-Formularen auf eingeloggte Benutzer.

Vielleicht möchten Sie auch unseren Leitfaden zu den besten WordPress-Plugins für die Benachrichtigungsleiste lesen, um Ihre Verkäufe und Sonderangebote auf Ihrer Website zu bewerben.

Sind Sie bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Erstellen Sie jetzt ein Formular mit Eintragsvorschau

Wenn Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.