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.

Bevor du beginnst, stelle sicher, dass Klaviyos Onsite-JavaScript (Klaviyo.js) auf jeder Seite installiert ist, auf der du den Button hinzufügst. Stelle sicher, dass Anmeldeformulare auf deiner Website aktiviert sind.

Neue Schaltfläche erstellen

This content requires Functional cookies to be enabled.

Update Cookie Settings

Bevor du deiner Website eine neue Schaltfläche hinzufügst, richte dein Anmeldeformular in Klaviyo ein:

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. Wähle im Formular-Editor Stile bearbeiten aus. Lege Formulartyp auf Popup, Flyout, Ganze Seite oder Banner fest. Eingebettete Formulare können nicht ausgelöst werden, wenn auf eine Schaltfläche geklickt wird.
3. Wähle Targeting und Verhalten > Anzeige aus. Lege unter Timing die Option Formular anzeigen auf Nur bei einem benutzerdefinierten Trigger fest.

Benutzerdefinierte Trigger umgehen die Regeln des Formulars für Targeting, Geräte und Häufigkeit. Wenn du einschränken musst, wer das Formular öffnen kann, wende diese Bedingungen auf die Schaltfläche oder den benutzerdefinierten Code deiner Website an.

1. Wenn du mit dem Design und Inhalt deines Formulars zufrieden bist, klicke auf Veröffentlichen oder planen, wähle die Option Jetzt veröffentlichen aus und klicke dann auf Jetzt veröffentlichen, um das Formular zu veröffentlichen.
2. 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.

Wenn du mehrere Buttons zur selben Seite hinzufügst, gib jedem Button einen eindeutigen Klassennamen (z. B. klaviyo_form_trigger1, klaviyo_form_trigger2), auch wenn sie dasselbe Anmeldeformular öffnen. Das JavaScript-Snippet unten wird nur an die erste Schaltfläche mit einer passenden Klasse angehängt. Füge für jede Schaltfläche ein passendes Snippet hinzu.

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 deine Formular-ID zu finden, navigiere zurück zu Klaviyo und öffne den Formulareditor für dein Anmeldeformular. Kopiere die ID direkt nach /forms/ in der URL. Die ID kann Buchstaben und Zahlen enthalten; behalte die Groß- und Kleinschreibung genau wie angezeigt bei, wenn du FORM_ID in deinem Snippet ersetzt.
     

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