Einführung
Sind Sie daran interessiert, eine personalisierte Nachricht außerhalb von WPForms anzuzeigen? Sie können dies erreichen, indem Sie JavaScript nutzen, und wir sind hier, um Sie durch den Prozess zu führen!
In diesem Tutorial führen wir Sie durch den Prozess des Hinzufügens einer benutzerdefinierten Nachricht zu Ihrer Seite. Diese Nachricht zeigt dynamisch die Werte von Formularfeldern außerhalb von WPForms an, so dass Sie die vom Benutzer eingegebenen Daten nahtlos in Ihre Seite integrieren und präsentieren können. Fangen wir an!
Lassen Sie uns eintauchen und lernen, wie Sie Ihrer Seite effektiv Werte hinzufügen können.
Erstellen Ihrer Umleitungsseite
Der Eröffnungsabschnitt unserer Seite wird eine personalisierte Nachricht enthalten, die aus drei leeren HTML-Feldern besteht. Ein HTML-Feld ist ein nicht-semantisches HTML-Element, das zum Einbetten von Inline-Inhalten auf unserer Seite verwendet wird.
In den folgenden Schritten wird unser Formular sowohl den Vor- und Nachnamen als auch die Interessenauswahl des Benutzers über einen Abfrage-String übermitteln, den wir später konstruieren werden.
Ein Query-String ist ein integraler Bestandteil einer URL, der Daten oder Parameter enthält, die für die Kommunikation mit einem Webserver verwendet werden und das Abrufen von Informationen erleichtern. Er befindet sich nach dem Fragezeichen (?) in einer URL und besteht aus Schlüssel-Wert-Paaren, die durch Ampersands (&) getrennt sind. Eine umfassende Anleitung zur Verwendung von Formularfeldwerten innerhalb eines Abfrage-Strings finden Sie in dieser Dokumentation, die eine detaillierte Aufschlüsselung für jedes Formularfeld enthält.
Um mit der Erstellung dieser leeren Bereiche zu beginnen, fügen wir zunächst einen benutzerdefinierten HTML-Block in unsere Seite ein. Dieser einleitende Absatz wird in diesem Block untergebracht, da er die Einbeziehung von reinem HTML für die Bereiche erfordert.
Um einen benutzerdefinierten HTML-Block zu Ihrer WordPress-Seite hinzuzufügen, klicken Sie einfach auf das Pluszeichen (+), suchen Sie nach "Custom HTML" und wählen Sie den Block aus, um ihn in Ihre Seite einzufügen.
Kopieren Sie nun diesen HTML-Code und fügen Sie ihn 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>
Erstellen des Formulars
Lassen Sie uns nun unser Formular erstellen und die erforderlichen Felder hinzufügen. Wenn Sie bei der Erstellung des Formulars Hilfe benötigen, finden Sie in diesem praktischen Leitfaden eine schrittweise Anleitung.
In diesem Tutorial halten wir es einfach und erstellen ein einfaches Kontaktformular. Sein Hauptziel ist es, unseren Nutzern die Möglichkeit zu geben, uns ihre Interessen mitzuteilen, damit wir ihnen jeden Monat einen individuelleren Newsletter schicken können. Um dies zu erreichen, erfassen wir ihren Namen, ihre E-Mail-Adresse und ihre Interessen mithilfe eines Dropdown-Feldes. Außerdem stellen wir einen Kommentarbereich für zusätzliche Nachrichten zur Verfügung, die sie übermitteln möchten.
Anpassen der Umleitungs-URL
In unserem nächsten Schritt werden wir die Weiterleitungs-URL an unsere Bedürfnisse anpassen. Nachdem Sie Ihr Formular erstellt und die erforderlichen Felder hinzugefügt haben, gehen Sie zu den Einstellungen des Formularerstellers und wählen Sie dann Bestätigungen.
Wählen Sie im Dropdown-Menü Bestätigungstyp die Option "Zur URL (Umleitung)". Geben Sie in das Feld URL der Bestätigungsumleitung die URL der Dankeseite ein, die Sie im ersten Schritt erstellt haben. In dieser Abbildung lautet unsere URL https://myexamplesite.com/thanks.
Um unsere Seite mit dem Namen und den Interessen aus dem Formular zu füllen, erweitern wir diese URL, indem wir einen Query-String anhängen. Dieser Query-String enthält die IDs der von uns eingeführten Spans und ordnet sie bestimmten Formularfeldern aus unserem Formular zu. Folglich wird unsere umfassende 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 diese Abfragezeichenfolge der Klarheit halber dekonstruieren. Da unser Formular sowohl Vor- als auch Nachnamen erfasst, müssen wir diese Werte trennen, um sicherzustellen, dass sie in der URL korrekt übermittelt werden. Die Feld-ID für unser Name Feld ist 0Da wir jedoch den Vor- und Nachnamen in diesem Feld erfassen, wird unsere Abfragezeichenfolge diese mit einer Pipeline (|) gefolgt von erste oder zuletzt, je nachdem, welche wir aufrufen. Sie können also in der Zeichenkette sehen, dass wir Folgendes aufrufen {field_id="0|first"} und die Zuweisung zur Spannen-ID von firstName und die {field_id="0|last"} ist dem lastName spannen.
Die Zinsen Die Dropdown-Auswahl wird mit der Methode {field_id="16"} und wird dem interest spannen.
Sie müssen die URL aktualisieren, damit sie mit Ihrer eigenen Website übereinstimmt, aber Sie müssen auch die Feld-IDs aktualisieren, damit sie mit Ihrem eigenen Formular übereinstimmen. Wenn Sie Hilfe benötigen, um Ihre Feld-IDs zu finden, lesen Sie bitte dieses Tutorial.
Hinzufügen des Snippets
Lassen Sie uns nun das Snippet in unsere Einrichtung integrieren. Wenn Sie sich nicht sicher sind, wie Sie Snippets zu Ihrer Website hinzufügen können, finden Sie in diesem umfassenden Leitfaden detaillierte Anweisungen.
In diesem Tutorial haben wir das WPCode-Plugin verwendet, um unser Snippet zu bearbeiten.
Beginnen Sie mit der Erstellung eines neuen benutzerdefinierten Snippets. Geben Sie ihm einen passenden Namen. Wählen Sie in der Dropdown-Liste Code-Typ 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 an der richtigen Stelle auf Ihrer Website platziert und ausgeführt wird, nachdem die Seite fertig geladen ist.
Pro-Tipp: Wenn Sie die lizenzierte Version des Plugins haben, die es Ihnen erlaubt, ein Snippet nur auf einer bestimmten Seite hinzuzufügen, empfehlen wir Ihnen, dies zu tun. Dadurch wird sichergestellt, dass Ihr benutzerdefiniertes Snippet nicht auf all Ihren Seiten läuft, sondern nur auf Ihrer Dankeseite. Um mehr über diese Funktion zu erfahren, lesen Sie bitte die Dokumentation des Plugins über seitenbezogene Snippets.
/**
* 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, sezieren wir die URL und zerlegen sie sorgfältig, um die Werte der Abfragezeichenfolge zu extrahieren. Anschließend verwenden wir die textContent Eigenschaft, um diese Parameter genau den entsprechenden Spannen-IDs auf unserer Website zuzuordnen. Dankeschön Seite.
Und da haben Sie es! Von nun an wird jeder Besucher, der unser Kontaktformular ausfüllt, mit einer personalisierten Nachricht begrüßt, die seinen Namen und seine Interessen auf der weitergeleiteten Dankeseite enthält. So einfach ist das! 🎉
Möchten Sie ein anderes Formular automatisch mit Abfragezeichenfolgen ausfüllen? Werfen Sie einen Blick auf unser Tutorial über die Verwendung von Query Strings zum Vorbefüllen von Formularfeldern aus einem anderen Formular.