Customising an embedded form in HubSpot

forms

#1

Hi,

I am trying to customise the CSS in an embedded HubSpot form, however i am not having much luck!

As you can see from the screenshot below, the is automatically set to max-width: 500px;. This means the form only covers half the container, i am trying to extend the width so that it fills 100% of the width of the container.

I have read through the developer documentation listed below;

None of these have worked for me. I know it compiles on load, however it just isn't picking up any CSS classes i am trying to reference - I'm not even able to over-ride the existing classes by using !important.

I am not a javascript expert - so may be getting this completely wrong - any help would be greatly appreciated.

Thanks
Dan


#2

Sorry - some of my text has gone missing in my post.

After the links, it originally read...

I have tried removing the default styling by adding css: "" to the script, then referencing the class in my stylesheet.
I have tried referencing a CSS class in my stylesheet by using cssClass:"".
I have now tried entering the CSS into the script, as shown below...

	hbspt.forms.create({
		portalId: "XXXXXX",
		formId: "XXXXXX",
		css: ".hs-form fieldset.form-columns-2 { max-width: 2000px !important; }"
	});

Thanks
Dan


#3

Hi @dan.thomas - Have you tried the Belch Form Designer for embed codes to style your form? Also, if you are a HubSpot free user, you won't be able to change the form CSS without using Belch and making sure you connect your HubSpot portal to pull in the forms


#4

Hi Tim,

I had never heard of it - thanks for contributing. I have had a go, and it has certainly improved my current form!

I'm not sure it gives me the full functionality i need. I have had a look at editing the Beltch form CSS - if you edit it, it returns to the default HubSpot style.

I am using the Marketing Hub Starter - will this allow me to edit the CSS?

Thanks
Dan


#5

Hey @dan.thomas, can you jump intoour slack channel and I can walk you through it?


#6

Hi @dan.thomas,

Don't have much more to add here other than to confirm what Tim said; HubSpot Marketing/CRM Free portals are not able to customize their form styling by default.