Iubenda logo
Generator starten

Anleitungen

INHALTSÜBERSICHT

Consent Solution für Webflow

Sie haben eine Website mit Webflow erstellt und müssen die DSGVO-Anforderungen für die Einwilligung erfüllen?

Dann sind Sie hier genau richtig. In dieser Anleitung werfen wir einen Blick auf die Anforderungen der DSGVO für den Einwilligungsnachweis und darauf, wie Sie die Consent Solution von iubenda zu Ihrer Webflow-Website hinzufügen können.

Springen Sie zu Wie man die Consent Solution zu Weblow hinzufügt

Um es einfach auszudrücken: Sie brauchen DSGVO-Einwilligungsnachweise für Ihre Hubspot-Website, und hier ist der Grund dafür: 

Aufzeichnungen über Einwilligungen sind nach der DSGVO ausdrücklich vorgeschrieben. Eine vollständige und gründliche Aufzeichnung der Einwilligung ist erforderlich und ist ein wesentlicher Bestandteil der Compliance. Die Nachweisaufzeichnungen werden von Ihnen, dem für die Datenverarbeitung Verantwortlichen, verwaltet. Die DSGVO verlangt daher, dass Sie “Nachweise” oder Aufzeichnungen über die Einwilligung aufbewahren, die spezifische Details enthalten, die beweisen könnten, dass die erhaltene Einwilligung echt und daher gemäß der DSGVO gültig ist. Die Einwilligung muss nach der DSGVO ausdrücklich erfolgen, freiwillig erteilt werden und überprüfbar sein. Mehr über die Consent Solution von iubenda können Sie hier nachlesen.

Diese Aufzeichnungen sollten u. a. eine Möglichkeit zur Identifizierung des Nutzers, einen Nachweis der Einwilligung, eine Aufzeichnung der einwilligenden Handlung und die dem Nutzer zum Zeitpunkt der Einwilligung vorliegenden Rechtsdokumente enthalten.

Die folgenden Informationen sollten aufgezeichnet werden:

  • wer die Einwilligung erteilt hat;
  • wann und wie die Einwilligung des jeweiligen Nutzers eingeholt wurde;
  • das Formular zur Einholung der Einwilligung, das ihnen zum Zeitpunkt der Erhebung vorgelegt wurde; und
  • welche Bedingungen und Rechtsdokumente zum Zeitpunkt der Einholung der Einwilligung galten.

Die vollständigen Anforderungen können Sie hier nachlesen.

Die Consent Solution von iubenda erfasst und verwaltet automatisch die DSGVO- und LGPD-Einwilligung und die Datenschutzeinstellungen für jeden Ihrer Nutzer. Mehr über die Consent Solution von iubenda können Sie hier nachlesen.

Wie man die Consent Solution von iubenda zu Webflow hinzufügt

Bitte beachten Sie: Diese Integrationsmethode ist nur für Nutzer des Webflow-Premium-Plans möglich.

Dieser Prozess wurde in zwei Schritte aufgeteilt:

  1. Formular erstellen
  2. Formular in die Consent Solution von iubenda integrieren

Schritt 1 – Formular erstellen

Um loszulegen, gehen Sie zu Ihrer Webflow-Website und öffnen Sie das Projekt, an dem Sie arbeiten möchten, und klicken Sie dann auf den Home-Button.

Consent Solution für Webflow

Klicken Sie dann auf “contact”. Hier können wir das Formular ändern und jedem Formularfeld Namensattribute hinzufügen.

Consent Solution für Webflow

Klicken Sie anschließend auf das Feld “message”, damit das Kontrollkästchen nach dem Nachrichtenfeld platziert wird.

Consent Solution für Webflow

Wir fügen dem Formular das Kontrollkästchen zum Akzeptieren der Datenschutzerklärung hinzu. Klicken Sie dazu auf (+) in der oberen linken Ecke.

Consent Solution für Webflow

Klicken Sie anschließend auf das Kontrollkästchen, wie in der Abbildung unten dargestellt.

Consent Solution für Webflow

Klicken Sie anschließend in den neuen Einstellungen für das Kontrollkästchen auf “Required” und stellen Sie sicher, dass es deaktiviert ist.

Consent Solution für Webflow

Geben Sie nun “Privacy_acceptance” in das dafür vorgesehene Textfeld “Name” ein.

Consent Solution für Webflow

Sobald Sie einen Namen hinzugefügt haben, klicken Sie auf “Show All Settings”.

Consent Solution für Webflow

Hier müssen Sie auf CHECKBOX klicken, um den Namen zu ändern. Sie können etwas schreiben wie: “Ich stimme der Datenschutzerklärung und den AGBs zu”.

Consent Solution für Webflow

Klicken Sie dann auf das Textfeld für “email address”.

Consent Solution für Webflow

Geben Sie auf der rechten Seite des Bildschirms “email_user'” in das Name-Textfeld ein.

Consent Solution für Webflow

Klicken Sie erneut auf Required, um sicherzustellen, dass es deaktiviert ist.

Consent Solution für Webflow

Klicken Sie nun auf den Submit-Button am unteren Rand, um ein ID-Attribut hinzuzufügen.

Consent Solution für Webflow

Fügen Sie in der rechten Seitenleiste in das erste Textfeld das ID-Attribut “submit_button” ein.

Consent Solution für Webflow

Klicken Sie dann auf “contact us”, um das gesamte Formular auszuwählen, wie in der Abbildung unten gezeigt.

Consent Solution für Webflow

Klicken Sie nun in der linken Seitenleiste auf Contact Form.

Consent Solution für Webflow

Geben Sie dann in der rechten Seitenleiste “form_test” in das erste Textfeld ein. Hier fügen wir eine ID zum <form>.

Consent Solution für Webflow

Klicken Sie anschließend auf das Textfeld für den Namen im Kontaktformular.

Consent Solution für Webflow

Wählen Sie dann das Einstellungssymbol neben dem Textfeld.

Consent Solution für Webflow

Geben Sie dann “full_name” in das Textfeld ein und stellen Sie sicher, dass “Required” deaktiviert ist.

Consent Solution für Webflow

Glückwunsch! Sie haben gerade Ihr einfaches Kontaktformular erstellt. Im nächsten Schritt werden wir das Formular in die Consent Solution von iubenda integrieren.

Schritt 2: Integration des Formulars mit der Consent Solution von iubenda

Zunächst müssen Sie Ihr iubenda-Dashboard in einem neuen Tab öffnen. Von hier aus werden wir den Init-Code aus dem iubenda-Dashboard kopieren.

Consent Solution für Webflow

Klicken Sie auf den Button “Kopieren” neben dem Code “init”. Wenn der Button grün wird, ist er in die Zwischenablage kopiert worden.

Consent Solution für Webflow

Gehen Sie dann zurück zu Ihrer Webflow-Seite und klicken Sie auf “Project settings”.

Consent Solution für Webflow

Danach klicken Sie auf Custom Code, hier fügen wir den Init-Code zum <head>-Tag hinzu.

Consent Solution für Webflow

Um den Init-Code zum <head>-Tag hinzuzufügen, fügen Sie das “init”-Skript aus Ihrer Consent Solution in den vorgesehenen Textbereich des <head>-Tags ein.

Consent Solution für Webflow

Klicken Sie nun auf Save Changes.

Consent Solution für Webflow

Gehen Sie nach dem Speichern zum Designer und analysieren Sie das Formular, um die Consent Solution Submit-Funktion zu ändern.

Consent Solution für Webflow

Wenn Sie fertig sind, klicken Sie oben links auf Ihrem Bildschirm auf Home.

Consent Solution für Webflow

Wählen Sie dann im Dropdown-Menü Contact.

Consent Solution für Webflow

Klicken Sie hier auf das Augensymbol, um in den Vorschaumodus zu gelangen, wie in der Abbildung unten gezeigt.

Consent Solution für Webflow

Als Nächstes müssen Sie die Attribute Name und ID des <form> erfassen (wir haben sie in Schritt 1 hinzugefügt). Dazu werden wir DevTools verwenden. Klicken Sie zunächst mit der rechten Maustaste auf das Feld NAME.

Consent Solution für Webflow

Klicken Sie dann auf die Überprüfen-Funktion.

Consent Solution für Webflow

Suchen Sie nun nach dem <form>-Tag und notieren Sie sich das ID-Attribut.

Wir müssen das Name-Attribut der Felder Email und Full name (<input type="text">-Tags) notieren.
Dasselbe gilt für den Submit-Button (<input type="submit">-Tag)

Consent Solution für Webflow

In diesem Beispiel:

  • die ID des Formulars lautet: email-form
  • die ID des Submit-Buttons lautet: submit_button
  • das Name-Attribut des Feldes Name lautet: full_name
  • das Name-Attribut der E-Mail lautet: email_user
  • das Name-Attribut des Kontrollkästchens Privacy Policy lautet: privacy_acceptance

Nun fügen wir die zuvor gesammelten Daten in die Funktion “Submit” unserer Consent Solution ein, wie im folgenden Beispiel gezeigt.

 
<script type="text/javascript">
function sendToConsentSolution(){
_iub.cons_instructions.push(["submit",{
submitElement: document.getElementById("submit_button"),
form: {
selector: document.getElementById("email-form"),
map: {
subject: {
full_name: "full_name",
email: "email_user"
},
preferences: {
privacy_acceptance: "privacy_acceptance",}
}
},
consent: {
legal_notices: [
{
identifier: 'privacy_policy',
},
{
identifier: 'cookie_policy',
},
{
identifier: 'terms',
}
],
}}]);
}
</script>

Nun ist es an der Zeit, das Standardverhalten des “submit”-Buttons auf dem Formular zu ändern.

  • Wenn Sie auf den Submit-Button (id=#submit_button) klicken, wird geprüft, ob das Kontrollkästchen “Privacy_acceptance” aktiviert ist oder nicht.
  • Wenn angekreuzt, senden wir das Formular und die Einwilligung an die Consent Solution
  • Wenn dies nicht der Fall ist, wird dem Nutzer eine Warnung angezeigt und er muss die Datenschutzbestimmungen akzeptieren.
<script type="text/javascript">
function sendToConsentSolution(){
_iub.cons_instructions.push(["submit",{
submitElement: document.getElementById("submit_button"),
form: {
selector: document.getElementById("email-form"),
map: {
subject: {
full_name: "full_name",
email: "email_user"
},
preferences: {
privacy_acceptance: "privacy_acceptance",}
}
},
consent: {
legal_notices: [
{
identifier: 'privacy_policy',
},
{
identifier: 'cookie_policy',
},
{
identifier: 'terms',
}
],
}}]);
}
</script>

Danach müssen wir die beiden Skripte zusammenführen. In unserem Beispiel unten sehen Sie, wie das geht.

Klicken Sie nun auf den Button des Navigator-Menüs. Wir müssen die “Submit”-Funktion und das andere Skript in der Fußzeile der Seite einfügen.

<script type="text/javascript">
jQuery(document).ready(function() {

$("#submit_button").click(function (e) {

e.preventDefault();

if(jQuery('input[name="privacy_acceptance"]:checked').length<=0){alert('You should read and accept privacy policy');return false;}
else {
jQuery("#email-form").submit();
sendToConsentSolution();
}


});
});
</script>
<script type="text/javascript">
function sendToConsentSolution(){
iub.cons_instructions.push(["submit",{
submitElement: document.getElementById("submit_button"),
form: {
selector: document.getElementById("email-form"),
map: {
subject: {
full_name: "full_name",
email: "email_user“
},
preferences: {
privacy_acceptance: "privacy_acceptance",}
}
},
consent: {
legal_notices: [
{
identifier: 'privacy_policy',
},
{
identifier: 'cookie_policy',
},
{
identifier: 'terms',
}
],
}
}]);
}
</script>

Consent Solution für Webflow

Klicken Sie dazu auf Project Settings.

Consent Solution für Webflow

Klicken Sie dann auf Custom Code.

Consent Solution für Webflow

Klicken Sie anschließend mit der rechten Maustaste auf die Zahl 1 unter Footer Code.

Consent Solution für Webflow

Fügen Sie dann die beiden zusammengeführten Skripte in den Textbereich ein.

Consent Solution für Webflow

Wenn Sie dies getan haben, klicken Sie auf Save Changes.

Consent Solution für Webflow

Nun können Sie oben rechts auf Publish klicken.

Consent Solution für Webflow

Achten Sie darauf, dass Sie das erste Kontrollkästchen aktivieren.

Consent Solution für Webflow

Klicken Sie schließlich auf Publish to Selected Domains.

Consent Solution für Webflow

Glückwunsch! Sie haben Ihre Consent Solution erfolgreich in Webflow integriert.