Hidden input fields are a powerful tool for collecting additional data from users without requiring them to enter it manually. These fields can capture details like referral sources, campaign IDs, or any other information valuable to your tracking and reporting. Follow the steps below to add hidden input fields to your forms and optimize your data capture.
Step 1: Go to the form builder
To get started, open your form builder. This tool allows you to customize and build high-converting forms with ease, giving you full control over form elements, styling, and advanced tracking options.
Step 2: Add the element "Hidden input"
In the form builder, locate the form element called “Hidden input.” Drag and drop this element into your form where you’d like to include it. While users won’t see this field, it will play a crucial role in collecting background data.
Step 3: Give it a custom name
Assign a custom name to your hidden input field. This name is important because it serves as the identifier for the hidden data you’re capturing. Use a name that clearly represents the information you’re tracking, such as “Referral Source”.
Step 4: Generate the embed code for your website
Once you’ve set up your hidden input field, it’s time to embed the form on your website. In the form builder, locate the option to generate the embed code. Copy this code, as you’ll need it for the next step.
<script src="https://app.leadboosterpro.io/form/iframe.js" charset="utf-8" type="text/javascript"></script>
<script>
leadBoosterPro.forms.create({
form: 'this-is-the-form-id',
type: 'inline'
})
</script>
Step 5: Customize the embed code
Before you add the embed code to your website, customize it to prefill the hidden input field with the desired value. For example, if you want to capture the “Spring 2023 Campaign” as the source, set that value within the code.
<script src="https://app.leadboosterpro.io/form/iframe.js" charset="utf-8" type="text/javascript"></script>
<script>
leadBoosterPro.forms.create({
form: 'this-is-the-form-id',
formValues: {
'Referral Source': 'Spring 2023 Campaign',
},
type: 'inline'
})
</script>
Conclusion
That’s it! Your form is now equipped with hidden input fields, allowing you to collect valuable, additional information without needing extra user input. The hidden input data is sent automatically each time a user submits the form.
Now, each time the form is submitted, the data you prefilled in the hidden input field (like “Spring 2023 Campaign” in this case) will be captured along with other form data. This makes it easy to analyze form submissions by campaign, referral source, or any other custom parameter you set.
FAQ
What are hidden input fields, and why should I use them?
Hidden input fields are form elements that remain invisible to users but capture valuable data without requiring user input. They allow you to pass along crucial details like campaign IDs, referral sources, or any other pre-defined values that help with tracking and analytics. They streamline data collection, ensuring you receive detailed information for each submission without additional steps for the user.
How do hidden input fields help with tracking campaigns or referrals?
Hidden input fields enable tracking by holding values like campaign IDs or referral sources that indicate how a user arrived at your form. This data is then stored with each form submission, providing insights into campaign effectiveness or referral paths, helping you analyze and optimize your marketing efforts based on the origin of each lead.
Can I dynamically update the hidden input field value based on URL parameters?
Yes, you can set the hidden input field values dynamically when the form is initialized by using URL parameters. This means that upon loading, the form can capture specific data from the URL (such as ?campaign_id=1234). However, once initialized, the values of hidden input fields cannot be updated dynamically later in the user’s session.
