All Collections
To go further with your settings
Fill a hidden form field with a fixed value in a Landing page
Fill a hidden form field with a fixed value in a Landing page

This article presents the different options to feed a hidden field of your form with a fixed value

Florent avatar
Written by Florent
Updated over a week ago

A hidden field allows you to provide Plezi with additional information depending on the site or context in which the landing page is inserted.

First determine the type of field you want to hide in the form of your landing page :

  • Hidden field of type Text

  • Hidden field of type Drop-down list

  • Hidden field of type Multiple selection

⚠️ This article does not describe a feature of Plezi but a "workaround" for the more resourceful among you.

❗️The code below is an example that doesn't take into account the specifics of the technical name of your fields and values on Plezi that are unique to you.

To find them, you must go to these pages:

Technical name of fields

Technical name of values

>> We recommend you to be very careful about the reproduction of special characters included in the code and, if necessary, to ask a developer for advice on this integration.

1 - Fill a value via a hidden field of type Text

Copy/paste this code into the JavaScript section of your 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");

Replace in the JavaScript insert of your landing page (line 13 on the screenshot) :

  • The word "field" with the technical name of your field

  • The word "value" by the desired value

The modified code will look like this:

Save and publish your landing page changes.

2 - Fill in a value via a hidden dropdown field

Copy/paste this code into the JavaScript section of your 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);
};

Replace in the JavaScript insert of your landing page (line 1 and 2) :

  • The mention "field" (❗️don't delete "jsonform-1-elt-") by the technical name of your field (line 1)

  • The statement "value" by the technical name of your value (line 2)

❗️ Be careful not to delete the technical characters {; [ "-

The code once modified will look like this :

Save and publish your landing page changes.

3 - Fill a value via a hidden field of type Multiple Selection

Copy/paste this code into the JavaScript section of your 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);
};

Replace in the JavaScript insert of your landing page (line 1) :

  • The mention "field" by the technical name of your field

  • The words "value1" and "value2" by the technical names of your values

The modified code will look like this :

Save and publish your landing page changes.

Did this answer your question?