Add Hidden Fields in a Form

Hidden fields in forms allow you to include additional data that is not visible to the user but can be submitted along with the rest of the form data. This can be useful for storing data that doesn't need to be displayed.

Here are two methods to add hidden fields in a form: one for static values and another for dynamic values.

Adding a Hidden Field Directly from the Editor: For Static Value

Open the Pagemaker editor and navigate to the form section where you want to add the hidden field.
Add a new field to the form by selecting the appropriate option in the editor.
In the field settings, select the field type as "Hidden."
Locate the "Value" section, and enter the static value you want to pass when the form is submitted.
Click on the "Save" button to save the changes to your page.

Once save the changes to your page, when users fill out the form, the specified static value will be included in the form submission data.

Adding a Hidden Field Via JavaScript: For Static Value

Open the Pagemaker editor and navigate to the form section where you want to add the hidden field.
Add a new field to the form and select the field type as "Hidden" in the field type.
In the "Value" section or input field, leave it empty for now.
Click on the "Save" button to save the changes to your page.

Locate the JavaScript section from the admin panel to add custom JavaScript code associated with the hidden field.
Write the JavaScript code to assign the desired static value to the hidden field. For example:

var field = document.getElementsByName('token')[0];

field.setAttribute('value', 'StaticValue');

field.dispatchEvent(new Event('input'));

</script>

So, If you want to set a column tab as a "token" and pass a static value of "XYZ," the JavaScript code should be as follows:

var token = document. getElementsByName("token")[0];

token.setAttribute('value', 'xyz');

token.dispatchEvent(new Event('input'));

</script>

If you have your own code for adding a hidden field in JavaScript, make sure to include the following line in your code:

hidden_field_name.dispatchEvent(new Event('input'));

Save the changes.
Save the changes to your page also.
When users fill out the form on your site, the JavaScript code will automatically set the static value to the hidden field.

So, this is how you can pass a static hidden value in Pagemaker via the editor and JavaScript. Now let's learn how to pass a dynamic value.

Adding a Hidden Field Via JavaScript: For Dynamic Value

Open the Pagemaker editor and navigate to the form section where you want to add the hidden field.
Add a new field to the form and select the field type as "Hidden" in the field type.
In the "Value" section or input field, leave it empty for now.
Click on the "Save" button to save the changes to your page.

Locate the JavaScript section from the admin panel to add custom JavaScript code associated with the hidden field.
Write the JavaScript code to assign the desired static value to the hidden field. For example:

const urlParams = new URLSearchParams(window.location.search);

var field = document.getElementsByName("token")[0];

var fieldValue = urlParams.get('token');

if (field && fieldValue) {

field.setAttribute('value', fieldValue);

field.dispatchEvent(new Event('input'));

}

</script>

If you have your own code for adding a hidden field in JavaScript, make sure to include the following line in your code:

hidden_field_nameField.dispatchEvent(new Event('input'));

Save the changes.
Save the changes to your page also.
When users fill out the form on your site, the JavaScript code will automatically set the dynamic value to the hidden field.

By following these steps, you can successfully add hidden fields to your pages. If you encounter any difficulties or have further questions, please don't hesitate to reach out to our support team at support@pagemaker.io for further assistance.