So sorgst du dafür, dass ein Anmeldeformular angezeigt wird, wenn auf eine Schaltfläche geklickt wird

Übersicht

Erfahre, wie du ein Anmeldeformular so auslöst, dass es auf deiner Website angezeigt wird, wenn eine Besucher*in auf eine bestimmte Schaltfläche klickt. Diese Anleitung führt dich durch das Anpassen deines Formulars, damit es bei einem benutzerdefinierten Trigger angezeigt wird, das Erstellen und Hinzufügen einer neuen Schaltfläche zu deiner Website sowie das Einfügen eines kurzen Kurzwahlnummern- und Code-Fragment-Abschnitts in das HTML deiner Website, damit ein Klick auf die Schaltfläche das Anmeldeformular auslöst.

Wenn du Entwickler*in bist und einen benutzerdefinierten Trigger für dein Anmeldeformular programmieren möchtest, schau dir unsere Entwicklerressource dazu an, wie du ein Popup- oder Flyout-Formular mit benutzerdefiniertem Trigger auslösen kannst.

Neue Schaltfläche erstellen

This content requires Functional cookies to be enabled.

Update Cookie Settings

Erstelle zuerst auf deiner Website eine neue Schaltfläche, die beim Anklicken das Anmeldeformular einblendet. Bevor du die Schaltfläche zu deiner Website hinzufügst, musst du sicherstellen, dass dein Anmeldeformular in Klaviyo korrekt eingerichtet ist. Um dies zu tun:

1. Erstelle ein neues Anmeldeformular, das angezeigt wird, wenn auf die Schaltfläche geklickt wird, oder wähle ein Formular aus, das du bereits erstellt hast.
2. Auf der Registerkarte Stile sollte dein Formulartyp auf Popup, Flyout oder Ganze Seite eingestellt sein. Eingebettete Formulare können nicht durch einen Klick auf eine Schaltfläche ausgelöst werden.
3. Wähle auf der Registerkarte Targeting & Behaviors unter Timingdie Option Nur bei benutzerdefiniertem Trigger anzeigen aus.
   

4. Wenn du mit dem Design und Inhalt deines Formulars zufrieden bist, klicke auf Veröffentlichen.
5. Öffne als Nächstes den Editor für dein Formular und wähle die folgenden Einstellungen aus
6. Kopiere den nachstehenden Code:

<button class="klaviyo_form_trigger">Click here</button>

1. Füge den Code in das HTML einer beliebigen Seite deiner Website ein, auf der die Schaltfläche erscheinen soll. Diese Schaltfläche verwendet die Standardstile aus der Vorlage deiner Website. Wenn du das Erscheinungsbild der Schaltfläche weiter anpassen möchtest, wende dich an deine*n Entwickler*in oder eine*n Klaviyo Partner.

Beachte: Wenn du deiner Website mehrere Buttons hinzufügst, die jeweils unterschiedliche Anmeldeformulare auslösen, musst du einen eindeutigen Namen verwenden, um jeden Button zu klassifizieren (z. B. klaviyo_form_trigger1, klaviyo_form_trigger2).

Lege fest, dass die Schaltfläche dein Anmeldeformular auslöst.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Nachdem du deiner Website eine neue Schaltfläche hinzugefügt hast, musst du als Nächstes den Trigger einrichten, damit dein Anmeldeformular angezeigt wird, wenn darauf geklickt wird. Richte den Trigger ein, indem du deiner Website ein kleines, benutzerdefiniertes JavaScript-Snippet hinzufügst:

1. Kopiere das Code-Fragment unten:

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. Füge das Code-Fragment direkt unter dem Schaltflächencode ein, den du im letzten Abschnitt zu deiner Website hinzugefügt hast.
2. Ersetze in dem Snippet, das du gerade eingefügt hast, FORM_ID durch die ID deines Anmeldeformulars.
   • Um die Formular-ID zu finden, navigiere zurück zu Klaviyo und öffne den Formular-Editor für dein Anmeldeformular. Kopiere den 6-stelligen Code am Ende der URL, um ihn in dein Code-Fragment einzufügen; das ist die Formular-ID.
     

3. Der fertige Code sollte den neuen Button-Code und den Anmeldeformular-Trigger mit deiner eindeutigen Formular-ID enthalten. Achte darauf, dies auf jeder Seite einzufügen, auf der du den Button-Code hinzugefügt hast.
   • Hier ist ein Beispiel für den fertigen Code in einem Shopify-Seiteneditor:
     

1. Speichere deine Änderungen.

Button testen

Nachdem du alle Änderungen am Code deiner Website gespeichert hast, besuche deine Website und klicke auf deinen neuen Button. Dann wird das Anmeldeformular angezeigt.

Gibt es Probleme? Geh zum Community-Forum von Klaviyo, um dir Tipps von anderen Klaviyo-Nutzer*innen zu holen.

Weitere Ressourcen