# Custom Form Style

**URL:** <https://community.hubspot.com/t/custom-form-style/8510>\
**Category:** Lead Capture Tools\
**Created:** [April 16, 2018, 2:01pm UTC](https://community.hubspot.com/t/custom-form-style/8510 "2018-04-16T14:01:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ManuelMeindl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manuelmeindl/32/89259_2.png) [@ManuelMeindl](https://community.hubspot.com/u/ManuelMeindl)\
**Post date:** [April 16, 2018, 2:01pm UTC](https://community.hubspot.com/t/custom-form-style/8510/1 "2018-04-16T14:01:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [April 16, 2018, 2:07pm UTC](https://community.hubspot.com/t/custom-form-style/8510/2 "2018-04-16T14:07:16Z")

</div>

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](https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-style-my-embedded-form)

You can find references to CSS classes used here:

> **[HubSpot forms - HubSpot docs](https://developers.hubspot.com/docs/cms/start-building/building-blocks/modules/forms)**
>
> Learn how to add forms to your HubSpot website or external pages using modules, HubL, or the embed code. Then, learn about how to style them.

---

<div class="post-metadata">

**Author:** ![ManuelMeindl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manuelmeindl/32/89259_2.png) [@ManuelMeindl](https://community.hubspot.com/u/ManuelMeindl)\
**Post date:** [April 16, 2018, 2:18pm UTC](https://community.hubspot.com/t/custom-form-style/8510/3 "2018-04-16T14:18:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [April 16, 2018, 2:28pm UTC](https://community.hubspot.com/t/custom-form-style/8510/4 "2018-04-16T14:28:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ManuelMeindl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manuelmeindl/32/89259_2.png) [@ManuelMeindl](https://community.hubspot.com/u/ManuelMeindl)\
**Post date:** [April 16, 2018, 2:37pm UTC](https://community.hubspot.com/t/custom-form-style/8510/5 "2018-04-16T14:37:18Z")

</div>

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

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!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 1, 2018, 2:49pm UTC](https://community.hubspot.com/t/custom-form-style/8510/6 "2018-08-01T14:49:34Z")

</div>

Try the [Belch HubSpot form styler](https://forms.belch.io). It should do the trick for you.

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).
