Introduction to hidden fields

When creating a form, it is crucial to think about every aspect of it. Optimizing your forms includes taking care of invisible elements as well, such as the hidden fields. Hidden fields tend to go unnoticed, but the truth is they can help you greatly. Learn what they are, what they are used for and how to set them up in your forms with Arengu.

What are hidden fields in forms?

When talking in a form context, hidden fields are values that stay out of sight for the user, and still are collected in the final submission.

These fields won't be shown at all in your forms. This way, the form will be shorter and more concise, but the fields will be automatically populated and you'll get the information you need anyways.

Why are hidden fields useful?

• Optimize user experience on forms. These fields are used to reduce friction and to improve user experience. Since they carry pre-existing information, you can eliminate fields and reduce friction to obtain better results in terms of conversion. This means, instead of asking the user a piece of information, you can obtain it out of their cookies or tracking parameters and see it in your form submissions. Asking the right amount of questions in a form is one of the key points to improve conversion rates. So hidden fields are your allies to obtain information without bothering your submitters.
• Track interesting aspects of your submitters. Hidden fields take information out of tracking parameters. When using parameterized URLs, you can get advantageous information about your submitters: Do they come from your social media accounts? Which ones? Did they arrive from a particular campaign? Adding parameters to your URLs will help you organize the results of your marketing efforts.
• Define your audience. Data is markedly useful to enrich your database and optimize your marketing efforts. Hidden fields allow you to get interesting input our of your submitters without having to ask for it. As we said before, this will reduce friction for your users, yet your database will be rich in data. For instance, you could collect information about their language or location. This kind of input will help you define your audience to better address it.  

How to pass hidden fields to your forms?

Arengu allows different ways to pass hidden fields to your forms, ordered by priority: by looking for parameters in the URL, by gathering them from Arengu's SDK, and by setting them on the form's editor.

Pass hidden fields to your forms with a parameterized URL

Hidden fields are usually filled with information coming for the URL. To start using them, add any parameter you'd like to track or any information you'd like to see in your submissions.

Although it is not the sole option, UTMs are an extended way to populate hidden fields with the URL. One popular use case is setting UTMs to track the user's itinerary, campaign details, etc.

With Arengu, you can pass hidden fields both with UTMs and with your own URL parameters.

Set hidden fields with Arengu's SDK

Arengu's forms can be added to your websites by simply copy pasting two lines of code. You can embed your forms with an HTML line or with a JavaScript line. You can opt for passing a hidden field directly with this line of code.

Follow this example if you're embedding your forms with HTML (recommended):

<div data-arengu-form-id="FORM_ID" data-field-promocode="A3B5ZD"></div>

Follow this example if you're embedding your forms with JavaScript:

ArenguForms.embed('FORM_ID', '.form', {promocode: 'A3B5ZD'});

In this example we have used a field called promocode, its value being A3B5ZD. If no hidden fields are found in the URL, the values will be taken from the SDK.

Set hidden fields in Arengu's form editor

Once you have created a form, go to Forms and click on Hidden fields, on the upper part of the form editor.

To set the hidden fields, just add the field name in the field Variable, and a fixed value in Default value (if needed). As you can see in the example below, we have added two hidden fields: provider (with a default value) and promocode (with a variable value).

If you haven't set any values on the URL nor the SDK, the information will be taken out the values in these fields.

How to see the values passed by the hidden fields

After setting your form's hidden fields with any of the previous methods, you will be able to see the values of the hidden fields in your submissions.

Go to Submissions, on the upper part of the editor. Here you will find a list of all the form's submissions and you can check the details of each one of them. When you click on the submission you'd like to see, you'll be displayed with a list of field values, including the hidden fields you set.

If you click on Meta data, you can also see additional values and details about the submissions, including the submission URL and the UTMs you have set.