Embeded Form treated as Tracking Content on Firefox

[PKim23]

Hello all, I am having some issues with an embeded form on an WP page which doesn't seem to display on Firefox browsers.

After the recent update on Firefox, embeded hsform is filtered as a Tracking Content and form does not load.

Only Firefox browser reproduces the issue as other browsers does not treat the embeded form as a tracking content. I understand this may be due to Enhance Tracking Protection setting on the browser, but I am curious see if there are different solutions.

Sample Embeded codes snippet:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "#region",
portalId: "#portalId",
formId: "#formId"
});
</script>

Please provide feedback, insight, solutions.

_________________
Edit (06-21-2024)

Now works on normal browser setting on Firefox, however is still blocked on private browsing. Tested on Chrome & Edge, the form is not triggered as a tracking content.

[RHmelnutskyi · Accepted solution]

When Enhanced Tracking Protection is enabled in Firefox, it blocks requests to `hsforms.net`, causing the `hbspt.forms.create` JavaScript not to work. This will result in users seeing an empty form on websites. You can view an example of this problem by checking the link and using the slider under the image to see how the form appears with and without Firefox Tracking Protection: https://scanningfox.com/r/gwHsL.

To address this, you can modify the embedded script. Before calling `hbspt.forms.create()`, insert the following code:

if (typeof hbspt === 'undefined') {

document.write('<p>The form is blocked by Firefox Enhanced Tracking Protection. Please email me directly at <a href="mailto:test@gmail.com">email</a></p>');

}"

So at least user will see some content.

[RHmelnutskyi · Accepted solution]

When Enhanced Tracking Protection is enabled in Firefox, it blocks requests to `hsforms.net`, causing the `hbspt.forms.create` JavaScript not to work. This will result in users seeing an empty form on websites. You can view an example of this problem by checking the link and using the slider under the image to see how the form appears with and without Firefox Tracking Protection: https://scanningfox.com/r/gwHsL.

To address this, you can modify the embedded script. Before calling `hbspt.forms.create()`, insert the following code:

if (typeof hbspt === 'undefined') {

document.write('<p>The form is blocked by Firefox Enhanced Tracking Protection. Please email me directly at <a href="mailto:test@gmail.com">email</a></p>');

}"

So at least user will see some content.

[FvB]

Is it possible to adapt this script to work with hubl form integrations? Like this one:

{% form
	form_to_use="{{ module.popup_contents.field_group.form_field.form_id }}"
	response_response_type="{{ module.popup_contents.field_group.form_field.response_type }}"
	response_message="{{ module.popup_contents.field_group.form_field.message }}"
	response_redirect_id="{{ module.popup_contents.field_group.form_field.redirect_id }}"
	response_redirect_url="{{module.popup_contents.field_group.form_field.redirect_url}}"
%}

 Thanks in advance!

[RHmelnutskyi]

Hi.

Honestly, I didn't work with HubSpot templating system, but my guess {% form ... %} will be translated into <script>insert form</script>.

So you'll need another script tag after form. The result will look something like:

{% form
	form_to_use="{{ module.popup_contents.field_group.form_field.form_id }}"
	response_response_type="{{ module.popup_contents.field_group.form_field.response_type }}"
	response_message="{{ module.popup_contents.field_group.form_field.message }}"
	response_redirect_id="{{ module.popup_contents.field_group.form_field.redirect_id }}"
	response_redirect_url="{{module.popup_contents.field_group.form_field.redirect_url}}"
%}
<script>
if (typeof hbspt === 'undefined') {
  document.write('<p>The form is blocked by Firefox Enhanced Tracking Protection. Please email me directly at <a href="mailto:test@gmail.com">email</a></p>');
}
</script>

[FvB · Accepted solution]

Hubl directly places the form as a <form> tag, so that script didn't work in my particular use case. In case somebody else runs into the same issue later: I solved this by requesting the hsforms tracking gif, and unhiding a warning text if the request fails. In code:

<div class="form_tracking_error hidden">
	<p>The Enhanced Tracking Protection settings on your browser might interfere with this download form. If the download isn't starting, set the Enhanced Tracking Protection settings to "standard" and try again.</p>
</div>
<div class="form_display">
	{% form
		form_to_use="{{ module.popup_contents.field_group.form_field.form_id }}"
		response_response_type="{{ module.popup_contents.field_group.form_field.response_type }}"
		response_message="{{ module.popup_contents.field_group.form_field.message }}"
		response_redirect_id="{{ module.popup_contents.field_group.form_field.redirect_id }}"
		response_redirect_url="{{module.popup_contents.field_group.form_field.redirect_url}}"
	%}
</div>
<script>
	function whenNoTrackingProtection() {
		// keeping track of the version of the script, to ensure test pages are up to date
		let version = "1.5" 
		if (!whenNoTrackingProtection.promise) {
			whenNoTrackingProtection.promise = new Promise(function(resolve, reject) {
				var time = Date.now();
				var img = new Image();
				img.onload = resolve;
				img.onerror = function() {
					if ((Date.now() - time) < 100) {
						reject(new Error("Rejected."));
					} else {
						resolve(new Error("Takes too long."));
					}
				};
				img.src='https://forms-na1.hsforms.com/embed/v3/counters.gif';
			}).then((result) => {
				console.log("Tracking " + version + " OK");
			}).catch(e => {
				console.log("Tracking " + version + " blocked: " + e);
				document.querySelector(".{{ name }} .form_tracking_error").classList.remove("hidden");
															 });
		}
	}
	whenNoTrackingProtection()
</script>

[PKim23]

Curious to know how this was accepted as the solution, as this seems like a short-term solution. Is Hubspot planning to implment something to resolve this permanently?

[Sbrac]

I can't see how this is meant to be a Accepted Solution when this is a work around. HubSpot need to find a fix for this and get it cleared from the Tracking aspects because it's poor UX for someone to click an email when you want them to submit a form.

[tko]

We have noticed that this problem also affects our pages. It should actually affect every website on which a Hubspot form is integrated and all Firefox users.
Has anyone found a solution?

[Ryan_Johnston]

We have the same issue with HubSpot forms not loading on an AEM powered website. Is there any response from HubSpot devs on when this might be resolved?

[Jaycee_Lewis]

Hey, @PKim23 I did some research internally. Unfortunately, this is out of our control, as this is a Firefox setting. Because this is tied to settings in the browser, there is not a workaround I can offer apart from of making sure this is disabled in the browser settings. Outside of this, I'd recommend filing a support ticket and letting your CSM or CSM team know this is blocking and impacting your business. 

Best,

Jaycee

[Sbrac]

Is there a way that you can reach out to Firefox directly and see why the Hubspot form is being flagged for this? I feel like this is a huge problem for Hubspot as a company that their content is being blocked by browsers and impacting your customers.

[BHomberg]

Thanks a lot for your investigation, Jaycee. 👍

Is there maybe a chance for the wordpress plugin to show the blocked users a message like: "Form couldn't loaded, please enable 3rd Party cookies or try a different browser"

[Sbrac]

It would be great to know how to fix this because this is becoming a real problem for my company too!

[BHomberg]

Same Problem on our Account. All Forms work fine in Wordpress with Chrome Browsers, but Firefox users dont see any Form.

Only if you switch in Firefox to "Default Secuirty" - (dont block 3rd Party Cookies), then it works

[PKim23]

Hi @Jaycee_Lewis, wanted reach out to see if this issue is something that can be resolved? If not please let me know!

[BHomberg]

We have latest Version of Wordpress and Hubspot Plugin, but the issue still remain. The Firefox Browser has no Addons installed.