Comment afficher un message personnalisé en dehors de WPForms

Introduction

Souhaitez-vous afficher un message personnalisé en dehors de WPForms ? Vous pouvez y parvenir en utilisant JavaScript, et nous sommes là pour vous guider tout au long du processus !

Dans ce tutoriel, nous vous guiderons dans le processus d'ajout d'un message personnalisé à votre page. Ce message affichera dynamiquement les valeurs des champs du formulaire en dehors de WPForms, vous permettant d'intégrer et d'afficher de manière transparente les données saisies par l'utilisateur sur votre page. Commençons !

Plongeons et apprenons comment ajouter efficacement des valeurs à votre page.

Création de votre page de redirection

La section d'ouverture de notre page présentera un message personnalisé comprenant trois balises span HTML vides. Une balise span HTML est un élément HTML inline, non sémantique, utilisé pour intégrer du contenu inline dans notre page.

Dans les étapes suivantes, notre formulaire transmettra le prénom et le nom, ainsi que la sélection d'intérêt de l'utilisateur, via une chaîne de requête que nous construirons plus tard.

Une chaîne de requête fait partie intégrante d'une URL et contient des données ou des paramètres utilisés pour la communication avec un serveur web, facilitant la récupération d'informations. Elle est située après le point d'interrogation (?) dans une URL et est composée de paires clé-valeur séparées par des esperluettes (&). Pour un guide complet sur l'utilisation des valeurs des champs de formulaire dans une chaîne de requête, vous pouvez vous référer à cette documentation, qui fournit une description détaillée pour chaque champ de formulaire.

Pour commencer la création de ces balises span vides, nous commencerons par intégrer un bloc HTML personnalisé sur notre page. Ce paragraphe d'introduction résidera dans ce bloc car il nécessite l'inclusion de HTML pur pour les balises span.

Pour ajouter un bloc HTML personnalisé à votre page WordPress, cliquez simplement sur le signe plus (+), recherchez HTML personnalisé et sélectionnez le bloc pour l'insérer sur votre page.

Ensuite, copiez ce HTML et ajoutez-le à votre bloc HTML sur la page.

<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>

Création du formulaire

Maintenant, créons notre formulaire et ajoutons les champs nécessaires. Si vous avez besoin d'aide pendant ce processus de création de formulaire, n'hésitez pas à consulter ce guide pratique pour des instructions étape par étape.

Dans ce tutoriel, nous allons rester simples en créant un formulaire de contact basique. Son objectif principal est de permettre à nos utilisateurs de partager leurs centres d'intérêt avec nous, nous permettant ainsi de leur envoyer une newsletter plus personnalisée chaque mois. Pour ce faire, nous recueillerons leur nom, leur adresse e-mail et leurs centres d'intérêt à l'aide d'un champ Liste déroulante. De plus, nous fournissons une section de commentaires pour tout message supplémentaire qu'ils souhaiteraient transmettre.

Personnalisation de l'URL de redirection

Dans notre prochaine étape, nous adapterons l'URL de redirection à nos besoins. Après avoir créé votre formulaire et ajouté les champs nécessaires, accédez aux paramètres du constructeur de formulaire, puis sélectionnez Confirmations.

Dans le menu déroulant Type de confirmation, choisissez « Aller à l'URL (Redirection) ». Dans le champ URL de redirection de confirmation, entrez l'URL de la page de remerciement que vous avez établie à l'étape initiale. Pour cette illustration, notre URL est https://myexamplesite.com/thanks.

Pour remplir notre page avec le nom et les centres d'intérêt collectés à partir du formulaire, nous allons étendre cette URL en ajoutant une chaîne de requête. Cette chaîne de requête inclura les ID des spans que nous avons introduits et les assignera à des champs spécifiques de notre formulaire. Par conséquent, notre URL complète apparaîtra comme https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Déchiffrons cette chaîne de requête pour plus de clarté. Étant donné que notre formulaire recueille le prénom et le nom de famille, nous devons séparer ces valeurs pour nous assurer qu'elles sont correctement transmises dans l'URL. L'ID du champ pour notre champ Nom est 0, mais comme nous collectons le prénom et le nom de famille dans ce champ, notre chaîne de requête inclura ceux-ci en utilisant un pipeline (|) suivi de first ou last, selon celui que nous appelons. Vous pouvez donc voir dans la chaîne que nous appelons {field_id="0|first"} et que nous l'attribuons à l'ID de span firstName et que {field_id="0|last"} est attribué au span lastName.

La sélection du menu déroulant Intérêt est transmise en utilisant {field_id="16"} et sera attribuée au span interest.

Ajout du snippet

Maintenant, intégrons le snippet dans notre configuration. Si vous n'êtes pas sûr du processus d'ajout de snippets à votre site, vous pouvez consulter ce guide complet pour des instructions détaillées.

Dans ce tutoriel, nous avons utilisé le plugin WPCode pour gérer notre snippet.

Pour commencer, créez un nouveau snippet personnalisé. Donnez-lui un nom approprié. Dans le menu déroulant Type de code, sélectionnez Snippet JavaScript. Pour le menu déroulant Emplacement, vous pouvez choisir Pied de page de tout le site. Cela garantira que notre snippet JavaScript est correctement placé et exécuté sur votre site après le chargement de la page.

/**
 * 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'];
        }
	

Comme vous pouvez l'observer, nous disséquons l'URL, en la décomposant méticuleusement pour en extraire les valeurs de la chaîne de requête. Par la suite, nous utilisons la propriété textContent pour allouer précisément ces paramètres aux ID de span correspondants sur notre page de Remerciements.

Et voilà ! À partir de maintenant, chaque fois qu'un visiteur remplit notre formulaire de contact, il sera accueilli par un message personnalisé présentant son nom et ses centres d'intérêt sur la page de Remerciements redirigée. C'est aussi simple que ça ! 🎉

Souhaitez-vous pré-remplir un autre formulaire avec des chaînes de requête ? Consultez notre tutoriel sur Comment utiliser les chaînes de requête pour pré-remplir les champs de formulaire à partir d'un autre formulaire.