topic Re: Assistance Needed for Adding CSS Class to HubSpot Form Button in CMS Development

Assistance Needed for Adding CSS Class to HubSpot Form Button

Cole_Edwards — Fri, 08 Nov 2024 16:18:40 GMT

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:

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

Re: Assistance Needed for Adding CSS Class to HubSpot Form Button

GiantFocal — Fri, 08 Nov 2024 16:24:20 GMT

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.

Re: Assistance Needed for Adding CSS Class to HubSpot Form Button

Cole_Edwards — Fri, 08 Nov 2024 16:33:18 GMT

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?

Re: Assistance Needed for Adding CSS Class to HubSpot Form Button

albertsg — Fri, 08 Nov 2024 16:38:43 GMT

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).

Re: Assistance Needed for Adding CSS Class to HubSpot Form Button

Cole_Edwards — Fri, 08 Nov 2024 17:09:35 GMT

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

Re: Assistance Needed for Adding CSS Class to HubSpot Form Button

melindagreen — Mon, 11 Nov 2024 01:01:27 GMT

@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)