Adding Hidden Fields to MailerLite Forms

Adding Hidden fields to MailerLite Forms are not intuitive. Here is how to easily add hidden fields into your MailerLite forms, perfect for segmenting users or gathering important tracking information without requiring additional input from your subscribers.

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.

Here’s how you can add a hidden field to a MailerLite form:

  1. A hidden field can only be added in MailerLite Forms through the Form Settings. It is not part of the regular form field canvas where you add other form fields.
  2. Go to the settings area and check the box that says “Hidden Segmentation Field.”
  3. Fields will now be available to choose from at the bottom of the Settings area. Select the field you want. In our case, we use the GA Client ID and leave the value blank because we’ll populate it on the page.
  4. That’s it, you’re done! 🙂

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

    Leave a Reply

    Similar articles