HubSpot Form analyzer Chrome Extension

Over the last year, I've been working on a HubSpot implementation for a real estate developer. This includes the embedding of forms on multiple websites. These forms are hosted and managed in HubSpot, you only need to include a JavaScript embedding code on your website...

Example of a HubSpot embedded form

Yes, very easy to use 🥇 but...

Hidden fields: a common practice

A common practice with HubSpot is to include hidden fields in those forms to enrich the user data.

An example: if the user fills in a form for a specific product group, you'll want to add that product group data in a hidden field so that we can reuse it for that specific user in a future use case.

An example of an embedded form with hidden fields exposed

These hidden fields are often prefilled through the HubSpot form settings or even better: they get populated through a dynamic data layer that you add on a page, this adds maximum flexibility and reduces the number of forms in HubSpot that you need to maintain. This results in a cleaner and more scalable solution. (more on this subject in a later post)

Debugging in practice

Once you launch a HubSpot form with hidden fields through a data layer you'll want to verify (and debug) your forms regularly.

You usually have 2 options:

You submit the form and check if the contact in HubSpot has received the hidden field data. You will have to clean your 'testing' contact each time.
You check the source code through your browser's inspector tools to get the hidden field values:

Example of Chrome's code inspector to find a HubSpot hidden field in the source code.

You can find the hidden field data through the fieldset and hs-input classes. As you can see: this process is much cleaner as it doesn't pollute your HubSpot data but it becomes tedious if you need to inspect multiple forms regularly...

There's got to be an extension for that... right?

As you can see this is a very specific use case, but one you might need to repeat often if it applies to you... So I went looking for a solution by exposing these hidden form fields directly in the browser's DOM. There's got to be an extension for that right? I went for a search in the Chrome Web store...

It seems indeed there is!

Chrome extension store with the search results for hidden fields.

There's even a dedicated extension to expose hidden fields in SalesForce forms. Nice! But it appears there's no extension for HubSpot. I have tested the other hidden field/form exposers but none of them seem to work reliably.

Why don't they work well on these forms? I believe it is caused by the way HubSpot injects styling into the website DOM once the embedding code loads on your website. The parent div with class hs-form-field gets hidden as well through an inline styling:

The hs-form-field div gets hidden in the source code.

The existing extensions do indeed expose the hidden form fields but fail to expose the parent div. That makes these extensions basically unsuitable for our case...

Say hello to HubSpot Form Analyzer!

With these findings, I have written a Chrome extension named HubSpot Form Analyzer. And guess what? It got published at the beginning of this week!

Feature(s)

Once the extension is active it will automatically detect a HubSpot field on any page and expose the hidden fields. You can even change the values on those fields if you want to test the form through different conditions. Easy... right?

Example of a HubSpot form with exposed hidden fields through the extension.

It will also directly expose an edit link and the HubSpot account ID that embeds the form on the website. This way you can verify that the form you are looking at is the one you are expecting. (this sounds obvious but believe me: I have missed multiple times when I was looking at a different form or a testing version for half an hour... 🤭)

You can change the behavior of the extension through the settings menu:

HubSpot Form Analyzer settings menu

How it works under the hood

The extension is written in JavaScript and looks in the DOM for hs-form which is the CSS class any HubSpot form will receive when loaded.

Basic reminder: you can easily check the DOM for occurrences of a class through the querySelectorAll function in JavaScript.

const forms = document.querySelectorAll('form.hs-form');

If we find any of these classes (and thus HubSpot forms), we will inspect that form for hidden hs-form-field classes and the hidden inputs themselves (and expose them by overriding the styling and input types)

// Get all HubSpot fields from the form
const fields = form.querySelectorAll('.hs-form-field');

// Iterate through each HubSpot form field
fields.forEach(field => {
    const inputField = field.querySelector('.input').querySelector('.hs-input')
    // If hidden: add the debug class and change the hidden input to text.
    if (inputField && inputField.type === 'hidden') {
        field.classList.add("hs-form-debug-highlight");
        inputField.type = 'text';
    }
    // Add the debug-show class to visualise the form row and field.
    field.classList.add("hs-form-debug-show")
})

The CSS classes mentioned in the above code override the visual styling (and the display: none) of the hs-form-field and also add some extra visualizations for ease of debugging.

Welcome to contribute!

Feel free to dive into the source code to see how it works in detail. You can find the code on GitHub.

Do you have any suggestions or improvements for this extension, you are most welcome to fork and submit a pull request!

Debugging HubSpot embedded forms: the easy way

Exposing all HubSpot form information with a small Chrome extension

Table of contents