How to embed Hubspot form to ensure compliance with Cookiebot

[CMcCaw]

Hi, 

I need to embed a form but ensure compliance with Cookiebot. The form should only show, if the user has selected marketing/statistic cookies etc? 

Any ideas? 

[kosalaindrasiri]

Hey @CMcCaw,

Install the official Cookiebot app via HubSpot App Marketplace.

It handles consent flow and auto-sync for HubSpot tools, but for form embeds, you will need conditional script logic.

Refer: https://support.cookiebot.com/hc/en-us/articles/360015961639-HubSpot-installation 

Conditional script logic Example :

function loadHubspotForm() {
  hbspt.forms.create({ /* your form config */ });
}

if (window.Cookiebot) {
  window.addEventListener('CookiebotOnConsentReady', () => {
    if (Cookiebot.consent.statistics || Cookiebot.consent.marketing) {
      loadHubspotForm();
    }
  });
} else {
  loadHubspotForm();
}

https://support.cookiebot.com/hc/en-us/articles/6954474867740-Conditionally-loading-code-in-bundles 

PS: Mark HubSpot scripts with data-cookieconsent="ignore" If your embed uses HubSpot’s tracking or scripts blocked by Cookiebot, tag them to bypass auto-blocking.

<script src="https://js.hsforms.net/forms/v2.js" data-cookieconsent="ignore"></script>

This prevents forms from vanishing when cookies are denied.

Regards,

Kosala

[Anton · Accepted solution]

Hey @CMcCaw, 

to be honest - I've never done something like this, but I could think of a a custom module with an if-statement that will check for the marketing-cookie or trigger the cookie banner...

{% if marketing_cookie %}
{{ module.form }}
...
{% else %} {# <-- if marketing cookie is not set #}
{% require_css %}
<style>
.cookie-overlay{
display:flex;
justify-content:center;
align-items: center;
background-color:#eaeaea;
}
span.cookie-banner-button{
background-color: #f00;
color:#fff;
padding:.75rem 2rem;
font-weight:700;
display:inline-flex;
}
</style>
{% end_require_css %}
{% require_js %}
<script>
document.querySelectorAll('.cookie-banner-button').forEach(button => {
    button.addEventListener('click', function() {
        (function(){
            var _hsp = window._hsp = window._hsp || [];
            _hsp.push(['showBanner']);
        })();
    });
});
</script>
{% end_require_js %}
<div class="cookie-overlay">
<p><strong>In order to fill out the form, please enable Marketing cookies</strong></p>
<span class="cookie-banner-button">Manage Cookies</span>
</div>
{% endif %}

best, 

Anton

[CMcCaw]

Thanks @Anton  - since posting, i've been working on an approach like this. 

I will post a final soltuion, once one is available - should anyone else have the same issues.