Toutes les collections
Pour aller plus loin dans la configuration
Configurer les champs (à cacher, remplir automatiquement...)
Remplir un champ caché d'un formulaire avec une valeur dynamique contenue dans l'url
Remplir un champ caché d'un formulaire avec une valeur dynamique contenue dans l'url

Cet article présente les différentes options pour alimenter dynamiquement un champ caché de votre formulaire

Andjie Pasquier avatar
Écrit par Andjie Pasquier
Mis à jour il y a plus d’une semaine

Prérequis :

  • Pour créer votre modèle de formulaire, c’est par ici !

  • Pour cacher simplement un champ avec une valeur "fixe" dans un formulaire et suivre les étapes de récupération des infos, consultez cet article.

  • Avoir quelques notions en javascript  ;-)

⚠️ Cet article ne décrit pas une fonctionnalité de Plezi mais un "contournement" pour les plus débrouillards d'entre vous. Le code ci-dessous est un exemple qui ne prend pas en compte les spécificités de chacun.
>> C'est donc à votre équipe de Dev de faire la config. La nôtre est une experte de notre produit, pas de son lien avec votre site internet 🤓

❗️Attention, avec les champs cachés sont une configuration de votre Plezi qui vous est propre. Avec les mises à jour de Plezi, la configuration de vos champs cachés peut être impacté. Veillez bien à vérifier le bon fonctionnement de votre configuration après les mises à jour.

1. Si vous voulez modifier la valeur d'un champ d'un formulaire sur votre site internet

> non intégré dans une landing page Plezi (sinon cf partie suivante) :


La façon la plus simple de passer une valeur dynamique dans un champ caché est d'appeler le script de Plezi en javascript plutôt que directement dans le HTML. Il faut donc remplacer la balise <script> tout en conservant la balise <form> :

<form id="foss-5c4aee3dlm28b054712ae0f1"></form>

>> l'id du form est un exemple, remplacez le par le vôtre

Le contenu de la balise <script> sera appelé en javascript comme ci-dessous :

var valeur_du_champ = "valeur dynamique" // Obtenir la valeur dynamique
var h=document.createElement('script');
h.setAttribute('src','URL_DU_SCRIPT_PLEZI'+'&nom_technique_du_champ_plezi='+valeur_du_champ);
document.head.appendChild(h);

En fournissant le ou les paramètres et leurs valeurs correspondantes, le constructeur de formulaire Plezi va pouvoir lui même renseigner les valeurs dans les champs correspondants.

S'il vous venait à l'idée d'éditer la valeur du ou des champs cachés en javascript abstenez vous ! En effet il faudrait executer le script responsable de cette opération au moment ou le formulaire Plezi est totalement chargé. Or il n'est actuellement pas possible d'obtenir cette information.


2. Si vous voulez modifier la valeur d'un champ d'un formulaire intégré dans une landing page Plezi

Il vous faut pour cela :

  1. Trouver l'id de votre champ caché. Dans la capture ci-dessous l'id est jsonform-1-elt-partenaire  

  2. Insérer votre script de récupération et d'édition du champ caché dans le champ code JavaScript  de la landing page

Exemple de récupération de valeur communément utilisée

Récupérer un paramètre de l'URL (utm_campaign dans l'exemple)

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
var valeur_du_champ = getUrlParameter('utm_campaign');

Exemple de modification d'un champ caché dans une landing page Plezi

// Modification de la valeur du champ caché

var setHiddenValueSelectField = function setHiddenValueSelectField(fieldId, value) {
  document.getElementById(fieldId).value = value;
};

// Appel aux fonctions avec pour exemple :
//  - un champ caché ayant pour id jsonform-1-elt-partenaire
//  - un paramètre appelé 'partner'

var checkExist = setInterval(function() {
   if (document.getElementById('jsonform-1-elt-partenaire') != null) {      
      clearInterval(checkExist);
      setHiddenValueSelectField('jsonform-1-elt-partenaire', getUrlParameter('partner'));
   }
}, 100);


A noter

Si votre  doit être égale à la valeur de la clé d'identification (nom technique).

La clé d'identification se retrouve dans la page "Configuration > Qualification des contacts".

Si votre champ est de type "Liste déroulante" ou "Choix multiple" alors la valeur de votre paramètre se retrouve dans "Configuration > Qualification des contacts - Listes de valeur"

Avez-vous trouvé la réponse à votre question ?