krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-02 01:18:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Toggling form legel disclamers (#1717)

Browse Source 
* test another legal disclaimer approach

* swapped disclaimers

* revert contact form id
This commit is contained in:
trean
2025-07-14 15:58:24 +02:00
committed by GitHub
parent 7dd2fa5fa6
commit 88cb287638
3 changed files with 96 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant-2024/assets/css/partials/_contact-form.scss
+17
View File
@@ -49,6 +49,10 @@
}
fieldset {
.input .hs-input {
width: 100%;
}
&.form-columns-1:has(> .legal-consent-container) {
width: auto;
margin-bottom: 0;
@@ -96,4 +100,17 @@
@include media-breakpoint-up(xl) {
padding: $spacer * 3 $spacer * 2.5;
}
.input ul {
padding-left: 0;
li {
list-style: none;
}
}
#Legit-interest-text-legal-disclaimer,
#explicit-text-legal-disclaimer {
font-size: pxToRem(12);
line-height: pxToRem(18);
}
}
qdrant-landing/themes/qdrant-2024/assets/css/partials/_hubspot-form.scss
+35 -35
View File
@@ -64,7 +64,7 @@ form.hs-form {
// todo: this may be removed once the form is updated
// this hides an original HubSpot form header
&.form-columns-0 {
&.form-columns-0:first-child {
margin: 0;
.hs-richtext {
display: none !important;
@@ -157,48 +157,49 @@ form.hs-form {
}
}
.hs-form-booleancheckbox-display,
.hs-form-checkbox-display {
display: flex;
align-items: center;
input[type='checkbox'] {
width: 1.2rem;
height: 1rem;
aspect-ratio: 1/1;
background-color: transparent;
border: 1px solid $neutral-40;
border-radius: 4px;
outline: none;
appearance: none;
padding: 0;
margin-right: pxToRem(8);
&:checked {
border-color: $neutral-100;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2YwZjJmOSIgZD0iTTQzOC42IDEwNS40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0yNTYgMjU2Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMGwtMTI4LTEyOGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMEwxNjAgMzM4LjcgMzkzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDB6Ii8+PC9zdmc+');
background-repeat: no-repeat;
background-position: center;
}
&:focus {
border: 1px solid $neutral-100;
}
}
}
.legal-consent-container {
p, & div {
p,
div,
span,
.hs-form-booleancheckbox-display {
font-size: pxToRem(12);
line-height: pxToRem(18);
color: $neutral-60;
margin-bottom: pxToRem(8);
a {
color: $neutral-80;
font-weight: 600;
}
}
.hs-form-booleancheckbox-display {
display: flex;
align-items: center;
input[type='checkbox'] {
width: 1.2rem;
height: 1rem;
aspect-ratio: 1/1;
background-color: transparent;
border: 1px solid $neutral-40;
border-radius: 4px;
outline: none;
appearance: none;
padding: 0;
&:checked {
border-color: $neutral-100;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2YwZjJmOSIgZD0iTTQzOC42IDEwNS40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0yNTYgMjU2Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMGwtMTI4LTEyOGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMEwxNjAgMzM4LjcgMzkzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDB6Ii8+PC9zdmc+');
background-repeat: no-repeat;
background-position: center;
}
&:focus {
border: 1px solid $neutral-100;
}
}
}
&:last-child {
margin-bottom: pxToRem(20);
}
}
}
@@ -228,8 +229,7 @@ form.hs-form {
}
.hs_recaptcha.hs-recaptcha {
.grecaptcha-badge {
box-shadow: none !important;
}
}
}
qdrant-landing/themes/qdrant-2024/layouts/partials/hubspot-form.html
+44 -1
View File
@@ -27,6 +27,37 @@
}
});
};
// 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 legitDisclaimerText = form.querySelector('#Legit-interest-text-legal-disclaimer');
const explicitDisclaimerText = form.querySelector('#explicit-text-legal-disclaimer');
if (!countryField || !legitDisclaimerText || !explicitDisclaimerText) {
// If there is no country field or related disclaimers, exit early
return;
}
const selected = countryField.value;
const isRestricted = restrictedCountries.includes(selected);
const showOptIn = selected && isRestricted;
if (legitDisclaimerText) legitDisclaimerText.style.display = showOptIn ? "none" : "block";
if (explicitDisclaimerText) explicitDisclaimerText.style.display = showOptIn ? "block" : "none";
}
try {
hbspt.forms.create({
...options,
@@ -34,12 +65,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>