# styling fields in embedded form?

**URL:** <https://community.hubspot.com/t/styling-fields-in-embedded-form/88948>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [September 5, 2023, 6:19am UTC](https://community.hubspot.com/t/styling-fields-in-embedded-form/88948 "2023-09-05T06:19:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AKelmachter](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@AKelmachter](https://community.hubspot.com/u/AKelmachter)\
**Post date:** [September 5, 2023, 6:19am UTC](https://community.hubspot.com/t/styling-fields-in-embedded-form/88948/1 "2023-09-05T06:19:52Z")

</div>

Hi,

We’re trying to replace the forms on our website with the HubSpot forms and are trying to stylize them with our React app.

I managed to style the “Submit Button” but I can’t manage to style each input field by itself. Using the “cssClass” I can apply styles to the form itself not to the labels, inputs inside the form, that I am trying to achieve, and I can’t find how to do it using the [documentation](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options?_ga=2.185268905.103734371.1662746674-312190651.1662746674&_gac=1.217051620.1662831365.Cj0KCQjw6_CYBhDjARIsABnuSzqGd2t-nkVFiMc34mFKG33q01CUE6Mnw1xrLIX2bnx4eUeStHR_pg4aAiKHEALw_wcB).

Here’s the code:

componentDidMount () {

const script = document.createElement(‘script’);

script.charset = ‘utf-8’;

script.type = ‘text/javascript’;

script.src = ‘//[js-eu1.hsforms.net/forms/embed/v2.js](http://js-eu1.hsforms.net/forms/embed/v2.js)’;

script.async = true;

script.onload = () =\> {

if (window.hbspt) {

window.hbspt.forms.create({

region: ‘eu1’,

portalId: ‘27159085’,

formId: ‘d24bc191-37af-4088-9a3a-fe9701b5ec8a’,

target: ‘#hubspotForm’,

cssClass: styles.contactInput,

submitButtonClass: styles.contactInputButton,

submitText: ‘Start Now’

});

}

};

document.body.appendChild(script);

}

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [September 6, 2023, 7:21pm UTC](https://community.hubspot.com/t/styling-fields-in-embedded-form/88948/2 "2023-09-06T19:21:19Z")

</div>

Hey, @AKelmachter 👋 Thanks for reaching out! Did you get this resolved? If not, I have two questions to give the community more context.

- Does your portal have a Marketing Hub or CMS Hub Professional or Enterprise subscription?
- You are using the [set as raw HTML](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site?_ga=2.66380654.1922258101.1694027792-6206338.1694027792&_gl=1*1khxptq*_ga*NjIwNjMzOC4xNjk0MDI3Nzky*_ga_LXTM6CQ0XK*MTY5NDAyNzc5Mi4xLjAuMTY5NDAyNzc5Mi42MC4wLjA.#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only) option?

I assume it’s yes to both, and I want to be certain before we dig deeper.

Thanks for the additional information! — Jaycee

---

<div class="post-metadata">

**Author:** ![AKelmachter](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@AKelmachter](https://community.hubspot.com/u/AKelmachter)\
**Post date:** [September 7, 2023, 6:49am UTC](https://community.hubspot.com/t/styling-fields-in-embedded-form/88948/3 "2023-09-07T06:49:01Z")

</div>

Hi Jayccee, correct.