CSS for Embedded Hubspot Form - Help & How?

Have been using the “integration” function to connect Unbounce form fills to our Hubspot CRM forms. But…we’d like to “embed” a Hubspot form instead. Had no difficulty adding an HTML block and dropping the script (provided by Hubspot for the form) into our Unbounce landing page. NOTE - Hubspot builds all forms using Javascript (not HTML).

We’d like to customize how the embedded form looks using the Stylesheet function in Unbounce, but I can’t figure out how to make any of the edits work. Do I use ID and Class elements for Hubspot? Do I use the ID and Class provided by Unbounce for that element?

Have tried inspecting the page in Chrome and searching for elements to apply “test” CSS edits to, but have been unsuccessful. Any help is appreciated. :slight_smile:

Hi @sanchore welcome to the community :smiley:

You are on the right track. You will need to get the right element ID’s to target with in your custom CSS. Could you share the page URL? I’d be happy to take a look to see if I can help a little more.

1 Like

Thanks, @Kyle.C! Glad to hear that I’m not wandering aimlessly with this one. Sharing the test page that I’ve made to practice and figure things out on. There are two forms (top form is Unbounce) and the bottom is the embedded JS from Hubspot (using raw HTML for custom CSS).

1 Like

Ah looks like this hubspot form might actually be styled by a script.

Have you checked out this article from Hubspot?

Yes - I’ve seen that article and was hoping to add CSS despite the JS. No go?

Well I think it should work as long as everything is marked as important. Try using these classes…

<style>
.hs-submit{
font-size: 100px !important;
background-color: orange !important;
}
.hs-email{
background: red !important;
}
.hs-firstname{
background: blue !important;
}
.hs-lastname{
background: green !important;
}
.hs-company{
background: purple !important;
}
</style>