Inline css for embedded form cannot be removed after using css: ''

#1

When using hubspot forms we created an instance using the following:

hbspt.forms.create({ portalId: '', formId: '', css: '', cssRequired: '' });

With the attributes filled in the hope is for all CSS to not be rendered when css:'' is the value.

When the page is rendered the form displays fine, but we would not like the inline css to be attached to our html. It appears that this is something that may not be removable which does not make sense when we have explicitly said no css.

Sample output of what this inline css goes something like:

fn-date-picker.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;*zoom:1}.fn-date-picker.pika-single.is-hidden{display:none}

#3

Hi, @cjboranp.

To clarify, are you manually adding css:' ' to the form's embed code, or are you simply copying what HubSpot spits out?

Additionally, have you toggled the Unstyled form switch in the form's Settings tab?

If I'm still not following, could you share a link to the form in your account and a link to the page where you're seeing the inline styling applied?

#4

Hi @Isaac_Takushi,

Thank you for the reply. On our site we've implemented the code referenced:

					hbspt.forms.create({
					portalId: '<id>',
					css: '',
					formId: '<form>',
					formInstanceId: '1',
					target: '#target'
				});

I believe this is what you mean about css: ' ' (unless the space is relevant?). After loading the page the form loads as expected, however we want to not have external CSS load and it is still loading inline.

Looking in the head of the DOM it includes something like "<style type="text/css" id="hs-form-styleb4c85286-8955..." and inline css that we don't want.

In our Purchased account we have turned style off. Is there a way to remove that?

#5

Hi, @cjboranp.

I was referring to that css: '' rule, however my unstyled forms do not have that rule in their embed codes. Here's what my forms tool produces:

  hbspt.forms.create({
	portalId: "{myHubID}",
	formId: "{formId}"
});

Unlike form embed codes I've seen in the past, no css: '' rule is included. Did you add this in manually?

I also haven't been able to replicate the behavior you're describing (i.e. no inline hs-form-style... style tags appear in my own source code).

As such, could you share a link to the form in your account and a link to the page where you're seeing the inline styling applied?