Custom Form Styling Issue

Developer Support CMS Development
, ,
1

Hopefully this is the correct channel to post this:
I am having issues getting the cssClass attribute to output on a form I am trying to embed into a WordPress website.

I am creating the embed as a custom Gutenberg block, and whilst the form/block does output on the page, no styling I try seems to work when editing the CSS (compiled in the theme via webpack), nor does the custom class get added to the form HTML.

See below, I am trying to add the class ‘newsletter’ as defined in the script, as per the instructions here, I do note the URL subdomain is ‘legacydocs’ so wondering if this method might no longer be possible?

HTML:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
 <script>
 hbspt.forms.create({
 region: "eu1",
 portalId: "25254412",
 formId: "8e1e9666-d23e-42a8-a127-12ce1a7101f5",
 cssClass: 'newsletter',
 css: '',
 cssRequired: ''
 });
 </script>

CSS:

/* test CSS */

.hs-form.newsletter .hs-form__virality-link {

display: none;

}

.hs-form.newsletter .hs-button {

background-color: blue;

}

2

Hey, @10D_JB :waving_hand: The Legacy docs are stable and supported unless explicitly flagged for depreciation.

Questions:

— Does your portal have a Marketing Hub Professional or Enterprise or a Content Hub Professional or Enterprise subscription? (required)

— Is your form set to Raw HTML?

Best,

Jaycee

3

Thanks for the reply - I had a feeling that might be the case, I don’t have the permissions on our account to see that but I think its the free version. I have seen the raw HTML option but it is locked for me so that must indicate that’s the case.

I got the impression from the docs that this used to be possible with the free version so that’s a shame, looks like it’s back to the drawing board!