Let’s set the scenario. You have a brand new WordPress website for your business, and you’re using the Divi theme builder to make it perfect. You want to setup multiple lead capture forms across different pages so you can easily track which are submitted, and use a Customer Relationship Management (CRM) solution like HubSpot to capture the data so that you can begin your powerful marketing to bring in revenue. The great thing about HubSpot is that it allows you to capture non-HubSpot forms via a tracking code that you place on your website.

So you’ve gone through and put in the tracking code from HubSpot, and have your form ready to go. Perfect! Let’s take this example form below. 

 

Demo Form Image

You decide to test it out and see how it’s tracked in HubSpot and to make sure that HubSpot is able to find your non-HubSpot form. Fill out the form and submit it, then going to check your HubSpot you see that it was captured – success! Or is it? Notice how the form is named .et_pb_contact_form .clearfix. This is coming from the actual form classes within the HTML that Divi generates.

Initial HubSpot Form Submission
HTML of the form

This may seem fine at first because you have the ability to just rename the form – but Divi generates every form with the same class. Yes – that means if you have multiple forms, every form is going to be treated as one within HubSpot. So how do we get around this? Your first thought – just like mine – was to take advantage of Divi’s custom ID and Class Advanced Setting. The only problem with this is that this only applies to the containing Div and not the Form element itself. Notice below how I tried this and my end result was not what I expected. 

Div with ID & Class

So what option do we have here? Well, Divi offers a Code module. If you’re familiar with JavaScript you may know that there is an onload event that can be called to fire when a webpage is opened. We can find the form element when the page loads, and push a class to it.

If you’re not, just follow along and copy the code snippet and don’t worry about the technicalities. I had not tried before to use this function within a Divi Code module but thought I would give it a try. So I threw a code module under the form, pasted in the following snippet – be sure to change the text between the brackets to whatever you would like to use – my example is form-webdevPage  and saved. 

<script>
window.onload = function() {
const form = document.getElementsByClassName(“et_pb_contact_form clearfix”);
form[0].classList.add(“{your custom class name}”);
};
</script>

Code Snippet to Add Class

Reloading the page now and inspecting the form….SUCCESS! We now have our own custom class on the form element instead of the container div, submitting the form again and viola! HubSpot now has the proper form with the unique class ID which allows us to have multiple forms and uniquely track their submissions!

Unique Class on Form
HubSpot Reading New Class

🎉 And that’s it! 🎉

The same steps can be replicated with each individual form you wish to setup and track on your website by simply adding the code snippet and changing the class name to whatever you want. Now, every form submission within HubSpot will be tied to that unique form so you can monitor and maintain which forms have the most traffic for your marketing purposes!

Some links on this article are affiliate links meaning if you click and make a purchase, I will receive a portion of the sell.

 

Pin It on Pinterest