Custom Form Style

How can I style an embedded form?

When using the embed code it creates an iframe. But it is not possible to apply a styling on elements within an iframe. I know that I can remove the hubspot styling with the property css: ‘’ but that does not help, if I can’t apply my own styling.

Hi @ManuelMeindl,

It will use javascript to create your form on an external site. You should remove the styling on the form, as you mentioned, but then you’ll need to add references to your CSS file.

https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-style-my-embedded-form

You can find references to CSS classes used here:

Thank you, for the fast reply!

I already found this posts. What I don’t understand, is, how to correctly apply the css classes. It is not possible to style elements within an iframe. When I click on ‘embed code’ I don’t have the checkbox ‘Include default styling’ so maybe there is the problem?

Should the form, if not included with default styling (checkbox unchecked), be embedded without an iframe?

EDIT: I somehow overlooked, that the custom form styling is only possible with Marketing Hub Basic or higher and I am using the free version right now.

It’s not using an iframe, instead javascript.

I’m not certain why you wouldn’t have the option to include default styling. [Edit: per your response, you aren’t seeing this because you are using Marketing Free. Following is still relevant to users running into this issue (not on free).]

When adding the references to your CSS file, be sure that they are in a spot where they are loading last and not being overwritten. I have also found it necessary on some sites to add !important after the declaration.

For example:

.hs-form label {color: #000 !important;}

Is your external website using WordPress?

My javascript embed code is creating the iframe. I don’t want the iframe :slightly_smiling_face:

If it would add only the form tag without the iframe there would be no problem with my css.

No I am not using WordPress.

Edit:

Yeah I thought so. Thank you, for your time!

Try the Belch HubSpot form styler. It should do the trick for you.


If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.