Custom CSS for Lead Form

Highlighted
Occasional Contributor

I'm working to add custom CSS styling to a HubSpot lead form embedded in a wordpress landing page (https://worldclimateservice.com/luvWCS/introduction-to-sub-r/

 

The page: https://designers.hubspot.com/docs/cms/hubspot-form-markup

says: 

'If you need to style or target a HubSpot form based on it's form ID we recommend targeting the .hs-form-[id] class." 

 

I find, however, that every load of the page generates a different ID of the lead form.  
How can custom CSS be specified based on it's form ID when it's changing on every load? 

 

Thanks,
jfd118

 

CSS
Reply
0 Upvotes
1 Reply 1
HubSpot Product Team
HubSpot Product Team

Hey @jfd118  the ID of your form will update on page load, however there is a specific class which targets the form based on it's HubSpot form ID. 

This is "hs-form-FORMID" 

 

So you will find the form ID in the URL when you're looking on the form in the HubSpot forms editor, or you will see it via inspecting the source of your page with the form on it. 

formID.png

 

Please note however, styling forms with an external stylesheet is only available when "set as raw html form" is enabled in the styling section on a form. This is only available to Pro and enterprise level marketing Hub subscriptions. 

 

Reply
0 Upvotes