Skip to main content

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

Hi @sanchore welcome to the community 😃


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.

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

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>

@sanchore - Was wondering if this was a fix for you because I’m trying to do the exact same thing, style a HubSpot form within the unBounce landing page. I really do wish there would be documentation about different integration tools and how to add+manipulate them within unBounce.


Both software sets seem to be very limited in terms of allowing customization beyond the tools provided.


Update: Using the code above worked, however there’s an issue with anyone also using reCaptcha and I believe that problem is only solved on HubSpot’s end. I’m talking to them now about the solution to that problem but at least for now the forms are able to be styled beyond what’s available. Thank you @Kyle.C!!!

Reply


Terms & ConditionsCookie settings