How can I stop HubSpot Form CSS from being injected into our page header?

Regular Contributor

We're trying to use several pop-up forms on a single page:
- lead capture for white paper

- schedule a demo

- sign up for free trial

- plain old contact us

 

For each form, we have "Unstyled Form" checked in the form settings, and use our own CSS. However, the HubSpot JavaScript IS STILL injecting form CSS into our page header. To make matters worse, it's injecting the SAME CSS four times, for four forms. And it's a lot of CSS. See below... that CSS is injected FOUR times, that's just one of the blocks.

 

How can we prevent this from happening? It's rather bad practice.

 

hs-form-css.png

8 Replies
Regular Contributor

Well... we got a "response" from support... such as it is...

Thanks for reaching out to support!


It is not possible to stop that from loading in your site. I understand that it is extra code to the page, but Hubspot does not currently offer the ability to remove that redundant code. If you have any other questions please let me know and I'll be happy to help.


Regards,

Paul

 

Seriously?

 

I specifically select the form to be unstyled, you not only still inject the CSS into the page header, but then tell me there's no way to remove the CSS -- that is repeated four times -- this is significantly adding to the overall payload of our page, and impacting our Google Page Speed score.

 

This needs to be fixed. I don't pay Hubspot thousands of dollars a year to mess up our pages.

Reply
0 Upvotes
Highlighted
Community Thought Leader

Original question modified. Original solution no longer applies ...

#nlmtt, #nlmtu

Reply
0 Upvotes
Regular Contributor

Frank. The pages upon which these forms appear are not in production. In fact, the etire site is having a revamp. Some of the issues you brought up have been addressed. Thanks.

 

Now, how do we stop unused HubSpot code/CSS from being injected into our pages?

Reply
0 Upvotes
Community Thought Leader

Question asked and answered (by HubSpot support).

cc: @jennysowyrda@roisinkirby

Regular Contributor

Frank...

 

Um... no. Support has not indicated when a bug in their product will be corrected.

Reply
0 Upvotes
pjp
New Contributor

If you don't want to use the standard form, you can make your own frontend form.

On submit you can then send the data to the corresponding Hubspot form.

See this page:

https://developers.hubspot.com/docs/methods/forms/submit_form

 

That way you can avoid any Hubspot code on your page.

Regular Contributor

We're looking at that. It's turning out to be difficult to make the "thank you" process graceful, however.

 

In any event, this is still a code bug in Hubspot.

- I don't need duplicate CSS for each form on the page

- I don't need any CSS if unstyled form is checked

 

Hubspot customers should not have to jump through hoops as a workaround for something this simple.

Reply
0 Upvotes
Regular Contributor

The response from support suggested that adding the following attribute to the JS embed could solve the problem:
css: ""

 

Our embed code already contained that attribute.

 

After experimenting, this prevented 98% of the CSS from being injected:
cssRequired: ""

 

The CSS for the Captchas was still being injected (for some odd reason), but it's rather minimal.

Reply
0 Upvotes