Passer au contenu principal
Toutes les collectionsPour aller plus loin dans la configuration
Remplir un champ caché d'un formulaire avec une valeur fixe sur une Landing page
Remplir un champ caché d'un formulaire avec une valeur fixe sur une Landing page

Cet article présente les différentes options pour alimenter un champ caché de votre formulaire avec une valeur fixe

Florent avatar
Écrit par Florent
Mis à jour il y a plus de 2 ans

Un champ caché vous permet d'alimenter Plezi d'informations complémentaires en fonction du site ou du contexte sur lequel est insérée la landing page.

Si vous souhaitez créer un champ caché avec une valeur dynamique contenue dans l'url, c'est par ici

Dans un premier temps déterminer le type de champ que vous souhaitez caché dans le formulaire de votre landing page :

⚠️ 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 du nom technique de vos champs et de vos valeurs sur Plezi qui vous sont propres.

Pour les retrouver, vous devez vous rendre sur ces pages :


>> Nous vous recommandons la plus grande vigilance sur la reproduction des caractères spéciaux inclus dans le code et le cas échéant de demander conseil à un développeur pour cette intégration.

Prérecquis : Le champ doit être créé sur Plezi, être intégré dans le modèle de formulaire utilisé sur la landing page et la case visible décochée (pour cacher le champ).

N'oubliez pas de le sauvegarder et d'enregistrer les modifications.

1 - Remplir une valeur via un champ caché de type Texte

Copier/coller ce code dans la section JavaScript de votre landing page :

function setText(field, value) {
var field = field;
var value = value;

var checkExist = setInterval(function() {
if (document.getElementById(`jsonform-1-elt-${field}`) != null) {
clearInterval(checkExist);
document.getElementById(`jsonform-1-elt-${field}`).value = value;
}
}, 1000);
};

setText("field", "value");

Remplacer dans l'encart JavaScript de votre landing page (ligne 13 sur la capture d'écran) :

  • La mention "field" par le nom technique de votre champ

  • La mention "value" par la valeur souhaitée

Le code une fois modifié se présentera comme ceci :

Sauvegarder puis publier les modifications de votre landing page.

2 - Remplir une valeur via un champ caché de type Liste déroulante

Copier/coller ce code dans la section JavaScript de votre landing page :

setMultiSelect("jsonform-1-elt-field", ["value"]);

function setMultiSelect(field, values) {
var field = field;
var values = values;

var setHiddenValueSelectField = function setHiddenValueSelectField(input) {
input.selected = true;
input.checked = true;
};
var checkExist = setInterval(function() {
if (document.getElementsByClassName(`jsonform-error-${field}`) != null) {
var red = null;
for (x of values) {
clearInterval(checkExist);
inputs = document.querySelectorAll(`[data-key-record="${x}"]`)
inputs.forEach.call(inputs, function(input) {
res = input;
})
if (res != null) {
setHiddenValueSelectField(res);
}
}
}
}, 1000);
};

Remplacer dans l'encart JavaScript de votre landing page (ligne 1) :

  • La mention "field" (❗️ne pas supprimer "jsonform-1-elt-") par le nom technique de votre champ

  • La mention "value" par le nom technique de votre valeur

❗️ Attention à ne pas supprimer les caractères techniques { ; [ ( "

Le code une fois modifié se présentera comme ceci :

Sauvegarder puis publier les modifications de votre landing page.

3 - Remplir une valeur via un champ caché de type Sélection multiple

Copier/coller ce code dans la section JavaScript de votre landing page :

setMultiSelect("field", ["value1", "value2"]);

function setMultiSelect(field, values) {
var field = field;
var values = values;
// Modification de la valeur du champ caché
var setHiddenValueSelectField = function setHiddenValueSelectField(input) {
input.selected = true;
input.checked = true;
};
var checkExist = setInterval(function() {
if (document.getElementsByClassName(`jsonform-error-${field}`) != null) {
var red = null;
for (x of values) {
clearInterval(checkExist);
inputs = document.querySelectorAll(`[data-key-record="${x}"]`)
inputs.forEach.call(inputs, function(input) {
res = input;
})
if (res != null) {
setHiddenValueSelectField(res);
}
}
}
}, 1000);
};

Remplacer dans l'encart JavaScript de votre landing page (ligne 1) :

  • La mention "field" par le nom technique de votre champ

  • Les mention "value1" et "value2" par les noms techniques de vos valeurs

Le code une fois modifié se présentera comme ceci :

Sauvegarder puis publier les modifications de votre landing page.

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