Verwendung von Query-Strings zum Vorabfüllen von Formularfeldern aus einem anderen Formular

Möchten Sie die Formularerfahrung Ihrer Benutzer auf WordPress optimieren? Das automatische Vorabfüllen von Formularfeldern mit Informationen aus einem vorherigen Formular kann die Benutzererfahrung verbessern und die Datenintegrität sicherstellen. Diese Anleitung führt Sie durch den Prozess der Übergabe von Informationen zwischen Formularen mithilfe von vorab ausgefüllten Query-Strings.

Bevor wir uns mit den Schritten befassen, um dies zu erreichen, tauchen wir ein wenig in Query-Strings ein und warum sie großartig sind!

Was sind Query-Strings?

Betrachten Sie Query-Strings als praktische Boten zwischen verschiedenen Teilen Ihrer Website. Es handelt sich um Informationsschnipsel, die am Ende einer URL hinzugefügt werden und Webseiten dabei helfen, miteinander zu kommunizieren. Sie sehen sie normalerweise nach einem Fragezeichen in einer Webadresse, gefolgt von Schlüssel-Wert-Paaren, die durch Ampersands getrennt sind.

Wie funktionieren sie?

Stellen Sie sich vor, Sie füllen ein Formular auf einer Website aus. Wenn Sie auf Senden klicken, sendet das Formular Ihre Daten an den Server der Website. Aber was ist, wenn Sie diese Daten an ein anderes Formular oder eine andere Seite übergeben möchten, ohne dass Benutzer sie erneut ausfüllen müssen? Hier kommen Query-Strings ins Spiel.

Indem Sie Query-Strings zur Weiterleitungs-URL nach dem Absenden des Formulars hinzufügen, sagen Sie im Wesentlichen: Hey, hier sind einige Informationen aus dem ersten Formular. Verwenden Sie sie, um Felder im nächsten Formular vorab auszufüllen! Es ist, als würden Sie Brotkrumen für Ihre Website hinterlassen, denen sie folgen kann.

Warum sind sie vorteilhaft?

1. Spart Zeit: Benutzer lieben Komfort. Query-Strings ersparen ihnen die Mühe, bereits angegebene Informationen erneut einzugeben.
2. Genauigkeit: Haben Sie jemals einen Tippfehler beim Ausfüllen eines Formulars gemacht? Mit Query-Strings ziehen Sie Daten direkt aus dem ersten Formular und reduzieren so die Fehlerwahrscheinlichkeit.
3. Höhere Konversionen: Durch die Optimierung des Formularausfüllprozesses erleichtern Sie den Benutzern das Ausführen von Aktionen auf Ihrer Website, was zu höheren Konversionsraten führt.
4. Nahtlose Erfahrung: Es geht darum, dass Ihre Benutzer reibungslos navigieren. Das automatische Ausfüllen von Formularen schafft eine nahtlose Reise durch Ihre Website und verbessert die Benutzererfahrung.

Kurz gesagt, Query-Strings sind wie magische Fäden, die verschiedene Teile Ihrer Website verbinden. Sie übergeben Informationen zwischen Formularen und erleichtern sowohl Ihnen als auch Ihren Benutzern das Leben. Mit weniger Tipparbeit und mehr Automatisierung gewinnen alle!

Damit wollen wir direkt loslegen!

Verwendung der Query-Strings

Wir beginnen mit der Erstellung von zwei separaten Formularen. Wenn Sie Hilfe beim Erstellen von Formularen benötigen, sehen Sie bitte diese Dokumentation.

1) Erstellen des Homepage-Formulars

Erstellen Sie zunächst Ihr erstes Formular und fügen Sie alle benötigten Felder hinzu.

Klicken Sie vorerst auf Speichern, da wir dieses Formular später erneut aufrufen werden.

2) Erstellen eines zusätzlichen Formulars

In diesem Schritt erstellen wir ein weiteres Formular, das die vorab ausgefüllten Informationen empfängt. Fügen Sie alle notwendigen Felder hinzu und stellen Sie sicher, dass sie mit den Informationen übereinstimmen, die Sie vorab ausfüllen möchten.

Navigieren Sie als Nächstes zur Registerkarte Einstellungen » Allgemein und klicken Sie auf den Dropdown-Pfeil, um die Erweiterten Optionen aufzurufen. Hier können Sie den Schalter umlegen, um Vorausfüllen per URL aktivieren.

3) Konfiguration der Weiterleitung nach Formularabsendung

Nun ist es an der Zeit, alles zusammenzuführen. Bearbeiten wir das Formular, das wir im ersten Schritt erstellt haben, das Homepage-Formular. Gehen Sie im Formular-Builder zu Einstellungen » Bestätigungen.

Ändern Sie hier den Bestätigungstyp zu URL aufrufen (Weiterleitung) und fügen Sie im Feld Bestätigungs-URL diese URL ein.

http://example.com/quote/?wpf1036_1={field_id="1"}&wpf1036_2={field_id="2"}

Bei der obigen URL gibt es einige Dinge, die Sie ändern müssen. Zum Beispiel:

1. Ersetzen Sie example.com durch Ihre eigene Domain.
2. Ersetzen Sie das Wort quote durch Ihren Seitennamen.
3. Passen Sie wpf1036_1 und wpf1036_2 an die Formular-ID des empfangenden Formulars und die jeweiligen Feld-IDs an.
4. Aktualisieren Sie {field_id="1"} mit der Feld-ID des Homepage-Formulars für das Feld Name.

Wenn Sie Hilfe beim Auffinden Ihrer spezifischen Feld-ID-Nummern benötigen, sehen Sie sich dieses Tutorial an.

Nachdem Sie dies zu Ihrer Bestätigungs-URL hinzugefügt haben, klicken Sie im Formular auf Speichern.

Wenn Benutzer nun das Homepage-Formular sehen, können sie ihren Namen und ihre E-Mail-Adresse eingeben. Wenn sie auf die Schaltfläche Senden klicken, wird die Seite zu einem anderen Formular weitergeleitet, das die Felder Name und E-Mail-Adresse automatisch mit den Informationen aus dem Formular auf Ihrer Homepage vorausfüllt.

Und das ist alles, was Sie brauchen, um einen Query-String zum Vorausfüllen Ihrer Formularfelder zu verwenden. Möchten Sie sehen, mit welchen anderen Feldern Sie dies verwenden können? Sehen Sie sich unsere Dokumentation zu Vorausfüllen per URL-Einstellung in WPForms aktivieren an.

FAQ

F: Warum wird das nächste Formular nicht vorausgefüllt?

A: Wenn Sie feststellen, dass Ihre Felder nicht vorausgefüllt werden, überprüfen Sie bitte, ob Sie die Einstellung in Ihrem zweiten Formular aktiviert haben.

Öffnen Sie den Formular-Builder des zweiten Formulars und gehen Sie zur Registerkarte Einstellungen » Allgemein. Klicken Sie dann auf das Dropdown-Menü Erweitert am unteren Bildschirmrand und legen Sie den Schalter um auf Vorausfüllen per URL aktivieren.

F: Was mache ich, wenn ich Vor- und Nachname für mein Namensfeld verwende?

A: Wenn Sie nicht das Einfache Format für Ihren Namen verwenden, listen Sie Ihr Namensfeld einfach wie folgt in der URL auf.

http://my-example-site.com/quote/?wpf1036_1_first={field_id="1|first"}&wpf1036_1_last={field_id="1|last"}&wpf1036_2={field_id="2"}

Dasselbe gilt für das Adressfeld. Ihr Format für die Aufschlüsselung der Adresse würde wie folgt aussehen.

&wpf1036_3_address1={field_id="3|address1"}&wpf1036_3_address2={field_id="3|address2"}&wpf1036_3_city={field_id="3|city"}&wpf1036_3_state={field_id="3|state"}&wpf1036_3_postal={field_id="3|postal"}