Verwenden von Abfragestrings zum automatischen Ausfüllen eines Textfelds

Möchten Sie ein Textfeld für einen Benutzer automatisch ausfüllen, basierend auf dem Link, den er anklickt? Links können so eingerichtet werden, dass Informationen in ein Feld gesendet werden, damit der Benutzer einen Schritt beim Ausfüllen Ihres Formulars sparen kann.

Dieses Tutorial zeigt Ihnen, wie Sie Abfragestrings (Query Strings) verwenden, um ein Feld in einem Formular automatisch auszufüllen.

Was ist ein Abfragestring?

Ein Abfragestring ist ein Teil einer URL, der Informationen liefert oder abruft. Auf einigen Websites werden Abfragestrings beispielsweise verwendet, um nach Beiträgen oder Produkten zu suchen.

Wenn Sie jemals eine URL mit einem Fragezeichen in der Mitte bemerkt haben, haben Sie einen Abfragestring in Aktion gesehen. Eine URL mit einem Abfragestring sieht ungefähr so aus:

http://example.com/plugin?name=wpforms

In diesem Beispiel zeigen wir Ihnen, wie Sie einen Abfragestring verwenden, um ein bestimmtes Wort oder eine bestimmte Phrase in ein Formularfeld einzufügen.

Dazu erstellen wir einen speziellen Link, den Benutzer anklicken können, wenn sie mehr über „Events und Partys“ erfahren möchten. Die URL für diesen Link führt den Benutzer zu unserem Formular „Weitere Informationen anfordern“. Der von uns erstellte Abfragestring füllt unser Feld „Ich möchte mehr über Folgendes erfahren:“ automatisch mit „Events und Partys“ aus.

Erstellen eines neuen Formulars

Bevor Sie beginnen, müssen Sie sicherstellen, dass WPForms auf Ihrer WordPress-Site installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Dann können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.

Wenn Sie ein neues Formular erstellen, müssen Sie Ihrem Formular einen Titel geben und eine Vorlage auswählen. Wir verwenden hier die Vorlage Einfaches Kontaktformular.

Für dieses Beispiel erstellen wir einen Link, der ein Einzeiliges Textfeld in unserem Formular automatisch ausfüllt. Um dieses Feld zu Ihrem Formular hinzuzufügen, klicken Sie darauf oder ziehen Sie es per Drag & Drop in den Vorschau-Bereich.

Hinzufügen eines Smart Tag für Abfragestring-Variablen

Als Nächstes müssen wir den Standardwert für das einzeilige Textfeld (das wir in „Ich möchte mehr über Folgendes erfahren“ umbenannt haben) so konfigurieren, dass es bereit ist, Informationen aus einem Abfragestring zu empfangen.

Klicken Sie dazu auf das Feld, um den Bildschirm „Feldoptionen“ zu öffnen. Öffnen Sie von hier aus den Tab Erweitert, scrollen Sie zu dem Feld mit der Bezeichnung Standardwert und klicken Sie dann auf Smart Tags anzeigen.

Wählen Sie aus der Dropdown-Liste die Option Abfragestring-Variable.

Nachdem Sie diese Auswahl getroffen haben, werden Sie feststellen, dass {query_var key=""} zum Feld Standardwert hinzugefügt wurde. Zwischen diesen leeren Anführungszeichen müssen Sie einen Namen (Schlüssel genannt) hinzufügen, um dieses Feld darzustellen. Dieser Schlüssel wird später in unserem Abfragestring verwendet.

Wir geben unserem Feld einen Schlüssel namens „contact-reason“. Es ist wichtig zu beachten, dass der Name, den Sie für diesen Schlüssel verwenden, in der URL sichtbar ist, die wir später einrichten. Der Name sollte also logisch für den Zweck des Schlüssels sein. Stellen Sie außerdem sicher, dass Ihr Schlüssel keine Leerzeichen enthält – ersetzen Sie Leerzeichen stattdessen durch einen Bindestrich „-“ oder einen Unterstrich „_“.

Veröffentlichung Ihres Formulars

Nachdem Sie das Formular eingerichtet haben, können Sie zu Ihrem WordPress-Dashboard zurückkehren. Dann können Sie entweder eine neue Seite erstellen oder eine vorhandene Seite bearbeiten, um das Formular zu veröffentlichen, das Sie gerade erstellt haben.

Um Ihr Formular zu veröffentlichen, klicken Sie zuerst auf die Schaltfläche + (Plus), um einen neuen Block hinzuzufügen.

Um den WPForms-Block zu finden, können Sie nach „WPForms“ suchen oder die Kategorie Widgets öffnen. Klicken Sie dann auf den Block mit dem Namen WPForms.

Dadurch wird der WPForms-Block zum Bearbeitungsbildschirm hinzugefügt. Betten Sie dann Ihr Formular ein, indem Sie es aus dem Dropdown-Menü Formular auswählen auswählen.

Nachdem Ihr Formular auf der Seite eingebettet ist, können Sie es im Frontend Ihrer Website veröffentlichen und aufrufen.

Erstellen eines Links mit einem Abfragestring

Als Nächstes müssen Sie eine weitere neue Seite erstellen oder eine vorhandene Seite bearbeiten, auf der wir einen Link zu diesem Formular hinzufügen können.

In diesem Beispiel befindet sich unser Formular auf unserer Kontaktseite, daher würde ein Standardlink etwa so aussehen: https://example.com/contact.

Auf der neuen Seite fügen wir etwas Text hinzu und verknüpfen unseren Text „Veranstaltungen und Partys“ mit der Seite, auf der sich unser Formular befindet (https://example.com/contact).

Im Moment öffnet dieser Link einfach die Kontaktseite. Als Nächstes ändern wir diesen Link, sodass er einen Query-String enthält. Dieser geänderte Link öffnet nicht nur die Kontaktseite, sondern übergibt auch einen Query-String, der das Single Line Text-Feld in unserem Formular vorausfüllt:

https://example.com/contact?contact-reason=EventsandParties

Hier ist, wie wir diesen neuen Link aufgebaut haben, in der Reihenfolge seiner Bestandteile:

• Der normale Link (https://example.com/contact)
• Ein Fragezeichen
• Der Schlüssel, den Sie zuvor angegeben haben (in diesem Beispiel contact-reason)
• Ein Gleichheitszeichen
• Der Text, der vorausgefüllt werden soll

Durch Klicken auf diesen Link wird unser Single Line Text-Feld mit jedem Text nach dem Gleichheitszeichen vorausgefüllt. In diesem Fall wird der obige Link „EventsandParties“ in dieses Feld einfügen:

Um Leerzeichen in den Text einzufügen, der in diesem Feld angezeigt wird, fügen Sie einfach %20 ein, wo immer Sie ein Leerzeichen wünschen. Zum Beispiel fügt der Code https://example.com/contact?contact-reason=Events%20and%20Parties dem resultierenden Vorausfülltext, der „Events and Parties“ lautet, ein Leerzeichen hinzu:

Das ist alles! Wir hoffen, dieses Tutorial hat Ihnen geholfen, Links mit Abfragezeichenfolgen einzurichten, die ein Textfeld in einem Formular automatisch ausfüllen.

Möchten Sie als Nächstes Felder dynamisch mit Ihren Website-Inhalten füllen? Lesen Sie unbedingt unseren Leitfaden zu dynamischen Feldoptionen für alle Details.