topic styling fields in embedded form? in APIs & Integrations

styling fields in embedded form?

AKelmachter — Tue, 05 Sep 2023 06:19:52 GMT

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.

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';

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);

}

Re: styling fields in embedded form?

Jaycee_Lewis — Wed, 06 Sep 2023 19:21:19 GMT

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 option?

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

Thanks for the additional information! — Jaycee

Re: styling fields in embedded form?

AKelmachter — Thu, 07 Sep 2023 06:49:01 GMT

Hi Jayccee, correct.