Wie man ein Anmeldeformular auslöst, das erscheint, wenn man auf eine Schaltfläche klickt

Du wirst lernen

Erfahre, wie du ein Anmeldeformular auf deiner Website auslösen kannst, wenn ein Besucher auf einen bestimmten Button klickt. In dieser Anleitung erfährst du, wie du dein Formular so anpasst, dass es bei einem benutzerdefinierten Auslöser angezeigt wird, wie du einen neuen Button erstellst und zu deiner Website hinzufügst und wie du ein kurzes Code-Fragment in das HTML deiner Website einfügst, damit ein Klick auf den Button das Anmeldeformular auslöst. 

Wenn du ein Entwickler bist und einen Trigger für dein Anmeldeformular programmieren möchtest, schau dir unsere Entwickler-Ressource an, in der du erfährst, wie du ein Popup- oder Flyout-Formular individuell auslösen kannst. 

Eine neue Schaltfläche erstellen 

Als erstes erstellst du einen neuen Button auf deiner Website, der das Anmeldeformular auslöst, wenn er angeklickt wird. Du musst sicherstellen, dass dein Anmeldeformular in Klaviyo richtig eingerichtet ist, bevor du den Button auf deiner Seite einfügst. Um dies zu tun:

1. Erstelle ein neues Anmeldeformular, das angezeigt wird, wenn du auf die Schaltfläche klickst, oder wähle ein Formular aus, das du bereits erstellt hast.
2. Auf der Registerkarte Stile sollte dein Formulartyp entweder auf Popup, Flyout oder Ganzseite eingestellt sein. Eingebettete Formulare können nicht ausgelöst werden, wenn eine Schaltfläche angeklickt wird.
3. Auf der Registerkarte Targeting & Behaviors wählst du unter Timing die Option Only show on custom trigger .
   
4. Wenn du mit dem Design und dem Inhalt deines Formulars zufrieden bist, klicke auf Veröffentlichen. 
5. Als Nächstes öffnest du den Editor für dein Formular und wählst die folgenden Einstellungen
6. Kopiere den Code unten:

   <button class="klaviyo_form_trigger"> Hier klicken</button>

7. Füge den Code in den HTML-Code einer beliebigen Seite auf deiner Website ein, auf der der Button erscheinen soll. Diese Schaltfläche verwendet die Standardstile aus der Vorlage deiner Website. Wenn du das Aussehen des Buttons weiter anpassen möchtest, wende dich an deinen Entwickler oder einen Klaviyo-Partner.

Wenn du deiner Website mehrere Schaltflächen hinzufügst, die jeweils ein anderes Anmeldeformular auslösen, musst du für jede Schaltfläche einen eindeutigen Namen verwenden (z. B. klaviyo_form_trigger1, klaviyo_form_trigger2). 

Lege die Schaltfläche zum Auslösen deines Anmeldeformulars fest

Nachdem du einen neuen Button zu deiner Website hinzugefügt hast, musst du als Nächstes den Trigger einrichten, damit dein Anmeldeformular erscheint, wenn du darauf klickst. Richte den Trigger ein, indem du ein kleines, benutzerdefiniertes JavaScript-Snippet zu deiner Website hinzufügst:

1. Kopiere das folgende Code-Fragment: 
   

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

2. Füge das Code-Fragment direkt unter dem Button-Code ein, den du im letzten Abschnitt zu deiner Seite hinzugefügt hast.
3. Ersetze im eben eingefügten Snippet FORM_ID durch die ID deines Anmeldeformulars.
   • Um die Formular-ID zu finden, navigiere zurück zu Klaviyo und öffne den Formulareditor für dein Anmeldeformular. Kopiere den 6-stelligen Code am Ende der URL und füge ihn in dein Code-Fragment ein; das ist die Formular-ID.
     
4. Der fertige Code sollte den neuen Code für die Schaltfläche und den Auslöser für das Anmeldeformular mit deiner eindeutigen Formular-ID enthalten. Füge diesen Code auf jeder Seite ein, auf der du den Button-Code hinzugefügt hast.
   • Hier ist ein Beispiel für den fertigen Code in einem Shopify-Seiteneditor: 
     
     

     Wenn du die Klasse der Schaltfläche im letzten Schritt angepasst hast (d.h. du hast klaviyo_form_trigger durch einen anderen Text ersetzt oder eine Zahl hinzugefügt), musst du diesen Code mit dem verwendeten Text aktualisieren. 

5. Speichere deine Änderungen.

Teste deinen Button 

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

Hast du Probleme? Im Community Forum von Klaviyo findest du Ratschläge von anderen Klaviyo-Nutzern. 

Zusätzliche Ressourcen

• Erste Schritte mit dem Anmeldeformular
• So löst du ein Popup- oder Flyout-Formular aus
• So wählst du die Einstellungen für das Formular-Targeting und das Verhalten
• Kurs: Klaviyo Produktzertifizierung