CSS styling can't be reset


#1

Hello! I'm using the Hubspot API to embed a Lead Capture form with just a few fields. The embed works fine, however, I can't seem to reset the default CSS in any way.

I've tried clearing the default css via the hbspot.forms.create method. (I replaced the portal id and form id with ellipsis for this example to obfuscate any personal info.)

window.hbspt.forms.create({
    portalId: "...",
    formId: "...",
    target: "#hubspot",
    css: ''
 })

I've also tried using the Hubspot supplied CSS classes for targeting specific form elements like labels. However, this doesn't seem to affect the Hubspot elements either, even with dirty tricks like !important.

I'm not sure why the CSS isn't resetting. For context, I'm using the Hubspot embed within the context of a Create-React-App project. I can supply more info if necessary. Thanks in advance!


#2

In the interest of clarity, here is the rest of my embed code. Its created as part of the componentDidMount call in React.

componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/shell.js"
    document.body.appendChild(script);

    script.addEventListener('load', () => {
        if(window.hbspt) {
            window.hbspt.forms.create({
                portalId: "...",
                formId: "...",
                target: "#hubspot",
                css: ""
            })
        }
    })

}

#3

Found out why this is happening. For anyone wondering:

You can't customize Hubspot forms unless you're a paid member. Written in small text at the top of the page:

"Note: These options are only available for forms created using the marketing form builder available with a paid Basic, Professional, or Enterprise marketing subscription. Other forms, such as collected forms or lead flows, do not support these customization options."

Hey Hubspot folks: I appreciate your business needs, but this was REALLY hard to figure out. The API never returned an error message and there was no answer in the forums about this. For the sake of developer sanity, please consider printing a descriptive error or warning if a user tries to change something they're not allowed to change due to account type.


#4

@hugsformonsters - The Belch form styler can style that form as long as you connect your HubSpot account to the Form Styler. When you select the "Choose a Form" button on the right, make sure you hit the connect to hubspot button in Belch, it will walk you through the styling of your form