Added script to hide checkbox in form (#1657)

* Added script to hide checkbox in form

* updated checkbox logic

* refactoring

* fix for missing consent parts

---------

Co-authored-by: trean <trean.mi@gmail.com>

qdrant-landing/themes/qdrant-2024/assets/css/partials/_hubspot-form.scss

@@ -150,7 +150,10 @@ form.hs-form {
   }
 
   .legal-consent-container {
-    p {
+    p,
+    div,
+    span,
+    .hs-form-booleancheckbox-display {
       font-size: pxToRem(12);
       line-height: pxToRem(18);
       color: $neutral-60;
@@ -187,6 +190,19 @@ form.hs-form {
         }
       }
     }
+    .hs-fieldtype-booleancheckbox {
+      // hide initially the checkbox for the legal consent
+      // to avoid flickering when the form is loaded
+      // it will be shown only for specific countries chosen in the form
+      // script handling this is
+      // in the `qdrant-landing/themes/qdrant-2024/layouts/partials/hubspot-form.htmls` file
+      display: none;
+    }
+    & > div:nth-child(3) {
+      // hide part of the legal consent text for the specific countries
+      // see the script in the `qdrant-landing/themes/qdrant-2024/layouts/partials/hubspot-form.htmls` file
+      display: none;
+    }
   }
 }
 
@@ -216,7 +232,6 @@ form.hs-form {
 }
 
 .hs_recaptcha.hs-recaptcha {
-
   .grecaptcha-badge {
     box-shadow: none !important;
   }

qdrant-landing/themes/qdrant-2024/layouts/partials/hubspot-form.html

@@ -27,6 +27,47 @@
             }
           });
         };
+
+        // List of countries that require explicit consent for data processing
+        const restrictedCountries = [
+          "Argentina", "Belgium", "Canada", "Czech Republic", "Cyprus", "Denmark", "Germany",
+          "Hungary", "Latvia", "Liechtenstein", "Luxembourg", "Netherlands", "Norway", "France",
+          "Finland", "Croatia", "Bulgaria", "Belarus", "Bosnia and Herzegovina", "Austria", "Estonia",
+          "Georgia", "Greenland", "Hong Kong", "Israel", "Italy", "Maldives", "Moldova", "Monaco",
+          "Portugal", "Russia", "Serbia", "Slovakia", "Slovenia", "Sweden", "Switzerland", "Türkiye",
+          "Ukraine", "Macedonia (FYROM)", "United Kingdom"
+        ];
+
+        // consent block should show additional checkbox for restricted countries
+        function updateConsentBlocks(form) {
+          const countryField = form.querySelector('select[name="country"]');
+          const checkboxField = form.querySelector('.legal-consent-container .hs-fieldtype-booleancheckbox');
+          const checkboxRelatedConsent = form.querySelector('.legal-consent-container > div:nth-child(3)');
+          const otherCountriesConsent = form.querySelector('.legal-consent-container > div:nth-child(2)');
+
+          if (!countryField || !checkboxField) {
+            // If there is no country field or checkbox field, exit early
+            return;
+          }
+
+          const selected = countryField.value;
+          const isRestricted = restrictedCountries.includes(selected);
+          const showOptIn = selected && isRestricted;
+          const checkbox = checkboxField.querySelector('input[type="checkbox"]');
+
+          checkboxField.style.display = showOptIn ? "block" : "none";
+          if (checkboxRelatedConsent) checkboxRelatedConsent.style.display = showOptIn ? "block" : "none";
+          if (otherCountriesConsent) otherCountriesConsent.style.display = showOptIn ? "none" : "block";
+
+          // Toggle checkbox state depending on the country selection
+          if (selected && !isRestricted) {
+            if (!checkbox.checked) checkbox.click();
+          } else {
+            if (checkbox.checked) checkbox.click();
+          }
+        }
+
+
         try {
           hbspt.forms.create({
             ...options,
@@ -34,12 +75,24 @@
             pageId: "{{- .context.Permalink -}}",
             target: "#{{- .id -}}",
             onFormReady: function($form) {
+              if (!$form) {
+                console.warn("Form not found.");
+                return;
+              }
+
               initHoneypot($form);
+
+              updateConsentBlocks($form);
+              const countryField = $form.querySelector('select[name="country"]');
+              if (countryField) {
+                countryField.addEventListener("change", () => updateConsentBlocks($form));
+              }
+
             },
           });
         } catch (e) {
           document.getElementById("{{- .id -}}").innerHTML = '<p class="text-white">Here should be a form but looks like it was blocked on your side. Please, check your trackers blocking policy.</p>';
         }
       })()
-   </script>
+</script>
 </div>