Guides & tutorials
Guides & tutorials
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.
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.
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.
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.
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):
Follow this example if you're embedding your forms with JavaScript:
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.
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.
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.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.