How to Customize Hubspot form?

[amelnyk]

1. Hi.
   
   I have some problems with customizing the Hubspot form embedded on my website.
   
   I do follow the Hubspot docs, but something is not quite right.
   (https://developers.hubspot.com/docs/methods/forms/advanced_form_options)
   
   

Here is the code itself:

<style>
    
.my-custom-form input {
    border: 4px solid black;
}

</style>


 <div>

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});
    
</script>

</div>

[MatthewShepherd · Accepted solution]

Hi @amelnyk 

Is your form using built-in Hubspot styling or have you enabled "Set as raw HTML form" under the form's style & preview tab?  If the form is not set to raw HTML it loads in an iframe and therefore your internal style can't be applied to the form element within the iframe.

[HAhmed8]

Set as raw HTML form is disabled & asking for sales support.

[Jaycee_Lewis]

Hey, @HAhmed8 👋 I would suggest creating a new as this one is now 3 years old. One suggestion is to verify that the portal you are using has one of the following product tiers:

• Marketing Hub Professional or Enterprise
• CMS Hub Professional or Enterprise
• or Legacy Marketing Hub Basic only

The option to set as raw HTML is limited to portals with one of the above subscriptions.  Here's the link to the documentation — Style your form with CSS in your external stylesheet

Have fun coding! — Jaycee