Assistance Needed for Adding CSS Class to HubSpot Form Button

[Cole_Edwards]

Hi HubSpot Developer Community,

I’m currently working on integrating HubSpot forms into our WordPress site and need some help with adding a CSS class to the submit button for tracking purposes.

Here’s what I’m trying to achieve:

I want to add a CSS class (e.g., hs-form-submit) to the submit buttons of our HubSpot forms so that I can track clicks using Google Tag Manager. 

What I Need Help With:

1. Adding the CSS Class: Is there a way to add the class to the submit buttons site wide on a WordPress Website?

I appreciate any guidance or examples you can provide. Thank you in advance for your help!

Best,

Cole

[albertsg · Accepted solution]

Hi @Cole_Edwards, I don't think you can add custom classes to the default buttons that HubSpot adds to the forms. 

If you cannot change your tracking strategy/settings to track the classes that the buttons have as default (such as the ones Abraham mentions in his reply), you could try adding your custom classes via Javascript.

See this as reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList (to be exact, you might want to use the .add() method).

[melindagreen · Accepted solution]

@Cole_Edwards for the email field, there's no class to directly access it but try

.hs-email .input input 

(note that it's class, class, tag name)

[albertsg · Accepted solution]

Hi @Cole_Edwards, I don't think you can add custom classes to the default buttons that HubSpot adds to the forms. 

If you cannot change your tracking strategy/settings to track the classes that the buttons have as default (such as the ones Abraham mentions in his reply), you could try adding your custom classes via Javascript.

See this as reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList (to be exact, you might want to use the .add() method).

[Cole_Edwards]

Got it! Is their a default class for the "Email" field we can track as well?

[GiantFocal]

Hi @Cole_Edwards,

Do you need to track only a specific form's submit button or ALL submit buttons on the site?

If all submit buttons, you can track the .hs_submit .hs-button default classes. 

[Cole_Edwards]

Awesome! Yes, we are looking to track all submissions sitewide. So this should work. 

The reason we are doing this is to set up enhanced conversions with our Google ads. Is their a default class for the "Email" field we can track as well?