Comment afficher un message personnalisé en dehors de WPForms

Introduction

Vous souhaitez afficher un message personnalisé en dehors de WPForms ? Vous pouvez y parvenir en utilisant JavaScript, et nous sommes là pour vous guider à travers le processus !

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

Plongeons dans l'histoire et apprenons comment ajouter de la valeur à votre page de manière efficace.

Création de la page de redirection

La section d'ouverture de notre page comprendra un message personnalisé composé de trois travées HTML vides. Une portée HTML est un élément HTML en ligne, non sémantique, utilisé pour intégrer du contenu en ligne dans notre page.

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

Une chaîne de requête est une partie intégrante d'un URL qui contient des données ou des paramètres utilisés pour communiquer avec un serveur web, facilitant ainsi la recherche d'informations. Elle se situe après le point d'interrogation ( ?) dans une URL et se compose 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 analyse détaillée pour chaque champ de formulaire.

Pour initier la création de ces travées vides, nous commencerons par incorporer un bloc HTML personnalisé dans notre page. Ce paragraphe d'introduction sera placé dans ce bloc puisqu'il nécessite l'inclusion de HTML pur pour les travées.

Pour ajouter un bloc HTML personnalisé à votre page WordPress, il vous suffit de cliquer sur le signe plus (+), de rechercher HTML personnalisé et de sélectionner le bloc pour l'insérer dans votre page.

Ensuite, copiez ce code 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 au cours du processus de création du formulaire, n'hésitez pas à consulter ce guide pratique pour obtenir 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 intérêts avec nous, ce qui nous permettra de leur envoyer une lettre d'information plus personnalisée chaque mois. Pour ce faire, nous recueillerons leur nom, leur adresse électronique et leurs centres d'intérêt à l'aide d'un champ de type Dropdown. En outre, nous prévoyons une section de commentaires pour tout message supplémentaire qu'ils souhaiteraient transmettre.

Personnalisation de l'URL de redirection

Dans l'étape suivante, nous adapterons l'URL de redirection à nos besoins. Après avoir créé votre formulaire et ajouté les champs nécessaires, allez dans les Paramètres du générateur de formulaire et sélectionnez Confirmations.

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

Pour alimenter notre page avec le nom et les centres d'intérêt recueillis dans le formulaire, nous allons étendre cette URL en y ajoutant une chaîne de requête. Cette chaîne de requête inclura les identifiants des portées que nous avons introduites et les affectera à des champs spécifiques de notre formulaire. Par conséquent, notre URL complète se présentera comme suit https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

Déconstruisons cette chaîne de requête pour plus de clarté. Étant donné que notre formulaire recueille à la fois 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'identifiant du champ de notre Nom est 0mais comme nous collectons le nom et le prénom dans ce champ, notre chaîne de requête les inclura à l'aide d'un pipeline (|) suivi de premier ou dernieren fonction de celui que nous appelons. Ainsi, vous pouvez voir dans la chaîne que nous appelons {field_id="0|first"} et l'affecte à l'identifiant span de firstName et le {field_id="0|last"} est attribuée au lastName de l'espace.

Le Intérêt est transmise à l'aide de la méthode {field_id="16"} et sera affecté à la interest de l'espace.

Ajout du snippet

Intégrons maintenant l'extrait à notre configuration. Si vous n'êtes pas sûr de savoir comment ajouter des snippets à votre site, vous pouvez consulter ce guide complet pour obtenir des instructions détaillées.

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

Pour commencer, créez un nouvel extrait personnalisé. Donnez-lui un nom approprié. Dans la liste déroulante Type de code, sélectionnez Extrait JavaScript. Dans la liste déroulante Emplacement, vous pouvez opter pour Site Wide Footer. Cela garantira que notre extrait JavaScript sera placé et exécuté de manière appropriée sur votre site une fois que la page aura fini de se charger.

/**
 * 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 le constater, nous disséquons l'URL, en la décomposant méticuleusement pour extraire les valeurs de la chaîne de requête. Ensuite, nous utilisons la fonction textContent afin d'attribuer précisément ces paramètres aux identifiants correspondants de notre Merci de votre attention page.

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

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