Personalisierte Nachricht außerhalb von WPForms anzeigen

Einleitung

Möchten Sie eine personalisierte Nachricht außerhalb von WPForms anzeigen? Sie können dies mit JavaScript erreichen, und wir helfen Ihnen dabei!

In diesem Tutorial führen wir Sie durch den Prozess des Hinzufügens einer benutzerdefinierten Nachricht zu Ihrer Seite. Diese Nachricht zeigt dynamisch Formularfeldwerte außerhalb von WPForms an, sodass Sie Benutzereingabedaten nahtlos in Ihre Seite integrieren und anzeigen können. Legen wir los!

Tauchen wir ein und lernen, wie man effektiv Werte zu seiner Seite hinzufügt.

Erstellen Ihrer Weiterleitungsseite

Der einleitende Abschnitt unserer Seite wird eine personalisierte Nachricht enthalten, die aus drei leeren HTML-Spans besteht. Ein HTML-Span ist ein Inline-Element ohne semantische Bedeutung, das zum Einbetten von Inline-Inhalten auf unserer Seite verwendet wird.

In den folgenden Schritten überträgt unser Formular sowohl den Vor- als auch den Nachnamen sowie die Interessenauswahl des Benutzers über eine Abfragestruktur (Query String), die wir später erstellen werden.

Eine Abfragestruktur (Query String) ist ein integraler Bestandteil einer URL, die Daten oder Parameter für die Kommunikation mit einem Webserver enthält und die Abfrage von Informationen erleichtert. Sie befindet sich nach dem Fragezeichen (?) in einer URL und besteht aus Schlüssel-Wert-Paaren, die durch kaufmännische Und-Zeichen (&) getrennt sind. Eine umfassende Anleitung zur Verwendung von Formularfeldwerten innerhalb einer Abfragestruktur finden Sie in dieser Dokumentation, die eine detaillierte Aufschlüsselung für jedes Formularfeld bietet.

Um mit der Erstellung dieser leeren Spans zu beginnen, fügen wir zunächst einen Benutzerdefiniertes HTML-Block auf unserer Seite ein. Dieser einleitende Absatz wird sich innerhalb dieses Blocks befinden, da er die Einbeziehung von reinem HTML für die Spans erfordert.

Um einen Benutzerdefiniertes HTML-Block zu Ihrer WordPress-Seite hinzuzufügen, klicken Sie einfach auf das Pluszeichen (+), suchen Sie nach Benutzerdefiniertes HTML und wählen Sie den Block aus, um ihn auf Ihrer Seite einzufügen.

Kopieren Sie als Nächstes dieses HTML und fügen Sie es in Ihren HTML-Block auf der Seite ein.

<p>Thanks <span id="firstName"></span> <span id="lastName"></span> 
for your interest in <span id="interest"></span>! 
Someone will be in touch with you soon!</p>

Erstellung des Formulars

Lassen Sie uns nun unser Formular erstellen und die notwendigen Felder hinzufügen. Wenn Sie während dieses Formularerstellungsprozesses Hilfe benötigen, schauen Sie sich unbedingt diesen praktischen Leitfaden mit Schritt-für-Schritt-Anleitungen an.

In diesem Tutorial halten wir es einfach, indem wir ein grundlegendes Kontaktformular erstellen. Sein Hauptziel ist es, unseren Benutzern zu ermöglichen, uns ihre Interessen mitzuteilen, damit wir ihnen jeden Monat einen persönlicheren Newsletter senden können. Um dies zu erreichen, werden wir ihren Namen, ihre E-Mail-Adresse und ihre Interessen mithilfe eines Dropdown-Feldes erfassen. Zusätzlich stellen wir einen Kommentarbereich für zusätzliche Nachrichten zur Verfügung, die sie übermitteln möchten.

Anpassen der Weiterleitungs-URL

Im nächsten Schritt passen wir die Weiterleitungs-URL an unsere Bedürfnisse an. Nachdem Sie Ihr Formular erstellt und die notwendigen Felder hinzugefügt haben, gehen Sie zu den Einstellungen des Formular-Builders und wählen Sie dann Bestätigungen.

Wählen Sie im Dropdown-Menü „Bestätigungstyp“ die Option „URL aufrufen (Weiterleitung)“. Geben Sie im Feld „Bestätigungs-URL für Weiterleitung“ die URL der Dankesseite ein, die Sie im ersten Schritt festgelegt haben. In diesem Beispiel lautet unsere URL https://myexamplesite.com/thanks.

Um unsere Seite mit dem aus dem Formular gesammelten Namen und den Interessen zu füllen, erweitern wir diese URL um einen Query-String. Dieser Query-String enthält die IDs der von uns eingeführten Spans und weist sie bestimmten Formularfeldern unseres Formulars zu. Folglich wird unsere vollständige URL wie folgt aussehen: https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Lassen Sie uns diesen Query-String zur Verdeutlichung aufschlüsseln. Da unser Formular sowohl Vor- als auch Nachnamen erfasst, müssen wir diese Werte trennen, um sicherzustellen, dass sie korrekt in der URL übermittelt werden. Die Feld-ID für unser Name-Feld ist 0, aber da wir in diesem Feld Vor- und Nachnamen erfassen, enthält unser Query-String diese mit einer Pipe (|) gefolgt von first oder last, je nachdem, welches wir aufrufen. Sie sehen also im String, dass wir {field_id="0|first"} aufrufen und es der Span-ID firstName zuweisen und {field_id="0|last"} der Span-ID lastName zugewiesen wird.

Die Auswahl im Dropdown-Menü Interest wird über {field_id="16"} übergeben und der Span-ID interest zugewiesen.

Hinzufügen des Snippets

Lassen Sie uns nun den Snippet in unser Setup integrieren. Wenn Sie sich nicht sicher sind, wie Sie Snippets zu Ihrer Website hinzufügen, können Sie diesen umfassenden Leitfaden für detaillierte Anweisungen konsultieren.

In diesem Tutorial haben wir das WPCode-Plugin verwendet, um unseren Snippet zu verwalten.

Erstellen Sie zunächst einen neuen benutzerdefinierten Snippet. Geben Sie ihm einen geeigneten Namen. Wählen Sie im Dropdown-Menü Code Type die Option JavaScript Snippet. Für das Dropdown-Menü Location können Sie Site Wide Footer wählen. Dadurch wird sichergestellt, dass unser JavaScript-Snippet nach dem Laden der Seite korrekt auf Ihrer Website platziert und ausgeführt wird.

/**
 * Display personalized message outside of the form using form submitted data.
 *
 * @link https://wpforms.com/developers/how-to-display-personalized-message-outside-wpforms/
 */

// Function to get URL query parameters
        function getQueryParameters() {
            var queryParams = {};
            var queryString = window.location.search.slice(1);
            var queryVars = queryString.split('&');

            for (var i = 0; i < queryVars.length; i++) {
                var pair = queryVars[i].split('=');
                var key = decodeURIComponent(pair[0]);
                var value = decodeURIComponent(pair[1]);
                queryParams[key] = value;
            }

            return queryParams;
        }

        // Get query parameters
        var params = getQueryParameters();

        // Populate spans with query parameter values
	    if (params.hasOwnProperty('firstName')) {
            document.getElementById('firstName').textContent = params['firstName'];
        }

        if (params.hasOwnProperty('lastName')) {
            document.getElementById('lastName').textContent = params['lastName'];
        }
        if (params.hasOwnProperty('interest')) {
            document.getElementById('interest').textContent = params['interest'];
        }
	

Wie Sie sehen können, zerlegen wir die URL sorgfältig, um die Werte der Abfragezeichenfolge zu extrahieren. Anschließend verwenden wir die textContent-Eigenschaft, um diese Parameter präzise den entsprechenden Span-IDs auf unserer Danke-Seite zuzuweisen.

Und da haben Sie es! Von nun an wird jeder Besucher, der unser Kontaktformular ausfüllt, auf der weitergeleiteten Danke-Seite mit einer personalisierten Nachricht begrüßt, die seinen Namen und seine Interessen enthält. So einfach ist das! 🎉

Möchten Sie ein weiteres Formular mit Abfragezeichenfolgen automatisch ausfüllen? Sehen Sie sich unser Tutorial an: Verwenden von Abfragezeichenfolgen zum Vorabfüllen von Formularfeldern aus einem anderen Formular.