MailerLite is a great email marketing and automation platform, offering a host of features even in its Free plan. We’ve found it to be comparable to other popular tools like ActiveCampaign. However, as with most platforms, certain things may require a bit of adjustment or customization, and this is true for MailerLite forms as well.
Why would anyone need a hidden field in a form?
There are countless reasons why marketers might need hidden fields in forms, but it’s primarily to segment users or collect tracking information without explicitly asking for it. Such information may not be automatically sent back to your sign-up records.
At TrackFunnels, we work extensively with Google Analytics 4 (GA4). As a result, many of our data collection techniques are related to Google Analytics tracking. We need a hidden field in the form to capture the Google Analytics Client ID of a user, which you can later use to tie your Google Analytics data with your Marketing Automation dataset.
Adding More Than One Hidden Field
The method described above allows you to add a single hidden field. But what if you need to add more than one field?
As of August 10, 2024, the only way to achieve this is by hiding the fields via CSS.
How to Hide Multiple Fields with CSS
To hide multiple fields, add the necessary fields to your form as you normally would. Then, go to your CSS file and hide them using the following rule:
Let’s assume you have a field named “Meeting Date.” This field would typically be rendered in HTML as:
<div class="ml-form-fieldRow">
<div class="ml-field-group ml-field-meeting_date ml-validate-date ml-validate-required">
<label>When would you like to talk about it? *</label>
<input aria-label="meeting_date" aria-required="true" type="text" class="form-control" data-inputmask="'mask':'y-m-d', 'placeholder':'yyyy-mm-dd'" name="fields[meeting_date]" placeholder="" autocomplete="" aria-invalid="false">
</div>
</div>
What we want to hide here is the field group, which is represented by the class ml-field-meeting_date
. You can hide it in your CSS as follows:
.ml-field-meeting_date {
display: none;
}
How to Identify the Correct CSS Class for Your Fields
It’s simple: whatever name you’ve given to your field, replace spaces with underscores and prefix it with ml-field-
.
Here are some examples:
- If your field name is “Reason for contacting,” the CSS class would be
ml-field-reason_for_contacting
.
- If your field name is “Areas of Interest,” the CSS class would be
ml-field-areas_of_interest
.
This approach hides the field from the user’s view. However, while this allows you to add and hide the field in the form, it does not let you set a value for this hidden field, which is typically what you want to do.
Adding Values to Hidden Fields with JavaScript
To set a value for a hidden field, add a small JavaScript script to your page. This script listens for the form to load, checks for the fields you’ve hidden with CSS, and populates them with the desired values.
JavaScript Example
Part 1: Listen for the form to load and then trigger the function to populate field values.
You don’t need to change anything in this part of the script. Use it exactly as-is.
document.addEventListener("DOMContentLoaded", function() {
// Check if the MailerLite form has loaded
var checkFormInterval = setInterval(function() {
var formElement = document.querySelector(".ml-block-form"); // Adjust this selector if needed, but as of writing this post, MailerLite uses this CSS class selector in all its forms
if (formElement) {
clearInterval(checkFormInterval);
// Once the form is loaded, run your field manipulation functions
populateFields();
}
}, 100); // Check every 100ms whether the form has loaded
});
Part 2: Once the form fields are loaded, populate the values of the fields you want.
In this part of the scirpt, you’ll need to update the fields and their names with the field names and CSS classes relevant to your use case.
function populateFields() {
// Populate the "meeting_date" field
var meetingDateField = document.querySelector(".ml-field-meeting_date input");
if (meetingDateField) {
meetingDateField.value = "2024-08-24"; // Use the correct date format if applicable
}
// Populate the "interest_group" field
var interestGroupField = document.querySelector(".ml-field-interest_group input");
if (interestGroupField) {
interestGroupField.value = "marketing automation";
}
// Example: Populate another field
var anotherField = document.querySelector(".ml-field-other_field_class input");
if (anotherField) {
anotherField.value = "some other value";
}
}
In this example, we showed you how to populate two fields, meeting_date
and interest_group
, and included an example to populate another field. If you have more than one field, you can copy and paste the same snippet for each additional field.
Make sure this JavaScript is added after the form embed code on your page. You can also use Google Tag Manager to add this script to all your pages where the form is embedded.
Let us know in the comments if you have any other specific scenarios that you’d like us to cover.
0 Comments