So bindest du ein Registrierungsformular in deine Website ein

Das wirst du lernen

Erfahre, wie du deiner Website ein eingebettetes Formular hinzufügst, indem du den Einbettungscode in die Themendateien oder den Seiteneditor für deinen E-Commerce-Shop, deinen Blog oder deine Website einfügst. Wo du den Code einfügst, richtet sich danach, wo das eingebettete Formular erscheinen soll und wie die Website aufgebaut ist.

Diese Anleitung gilt nur für eingebettete Formulare und trifft nicht auf Pop-ups, Flyouts oder ganzseitige Formulare zu. Nachdem du den Einbettungscode auf deiner Website eingefügt hast, kannst du das Formular in Klaviyo bearbeiten und die Änderungen veröffentlichen, ohne dich um die Aktualisierung des Snippets kümmern zu müssen.

Falls du keine Integration für Shopify, BigCommerce, Magento oder WooCommerce hast, über die ein Code-Fragment namens Klaviyo.js synchronisiert wird (bei Shopify über eine App-Einbettung), musst du zunächst Klaviyo.js auf deiner Website installieren, um Formulare veröffentlichen zu können. Klaviyo.js ist auch das Code-Fragment für die Erfassung der aktiven Zeit auf der Website, da es auch die Verfolgung von Benutzeraktivitäten ermöglicht. Mehr dazu erfährst du in unserer Anleitung zum Webtracking. 

Neues eingebettetes Formular erstellen

1. Rufe Registrierungsformulare > Registrierungsformular erstellen > Neues Registrierungsformular erstellen auf.
2. Benenne das Formular und wähle eine Liste, zu der du Abonnent*innen hinzufügen möchtest.
3. Wähle den Formulartyp Eingebettet aus.
4. Klicke auf Speichern und weiter zum Entwurf.
   
5. Du kannst das Formular mit dem Editor gestalten und ihm beliebige Formularfelder hinzuzufügen.

Einbettungscode erhalten

Wenn du das Formular nach deinen Vorstellungen gestaltet hast, gibt es 2 Stellen, an denen du den Einbettungscode des Formulars abrufen kannst:

1. Im Bereich Targeting und Verhalten:
   
2. Wenn du ein eingebettetes Formular veröffentlichst, wird ein Modal angezeigt, in dem du aufgefordert wirst, den Einbettungscode auf deiner Website einzufügen:
   

Veröffentliche das Formular anschließend und kopiere das Code-Fragment, um es auf deiner Website einzufügen. 

Code auf deiner Website einfügen

Wo du den Code auf der Website einfügen solltest, hängt davon ab, wo das eingebettete Formular erscheinen soll, und variiert je nach Integration. Im Folgenden haben wir einige Anwendungsbeispiele für dich zusammengestellt. Scrolle einfach bis zur Plattform, die du verwendest (z. B. BigCommerce, Shopify, WooCommerce, andere Plattformen). Dort findest du eine konkrete Anleitung für die jeweilige Plattform.

BigCommerce 

Wenn du das BigCommerce-Formular in der Fußzeile durch ein Klaviyo-Formular ersetzen oder ein in Klaviyo eingebettetes Formular an anderer Stelle auf deiner Website einfügen möchtest, stehen dir die im Folgenden beschriebenen Möglichkeiten offen. 

Im Page Editor

1. Gehe zu Storefront > Webpages.
2. Wähle die Seite aus, auf der das eingebettete Formular erscheinen soll.
3. Klicke im Menü Action auf Edit.
   
4. Klicke im Bereich Page Content auf HTML, um den Quellcode-Editor zu öffnen.
5. Füge den Einbettungscode des Formulars ein.
6. Klicke auf Update und speichere die Änderungen.

Im Theme Editor

1. Melden dich bei deinem BigCommerce-Shop an.
2. Rufe Storefront > My Themes auf.
3. Klicke unter dem Bereich Current Theme auf Customize. 
4. Wähle die Seite aus, auf der du das eingebettete Formular einfügen möchtest.
5. Finde den Bereich auf der Seite, in dem das Formular hinzugefügt werden soll.
6. Ziehe einen HTML-Block hinein.
7. Füge den Einbettungscode für dein Formular in den Block-Editor ein.
8. Speichere den Block.
9. Speichere deine Änderungen.
   
   

In Theme-Dateien einfügen 

1. Rufe Storefront > My Themes auf.
2. Klicke auf die Dropdown-Liste Advanced im Abschnitt Current Theme.
3. Klicke auf Edit Theme Files.
   
   
   1. Wenn die Option Edit Theme Files nicht angezeigt wird, kannst du: 
      1. Das Theme kopieren
      2. Die Kopie bearbeiten
4. Rufe die Datei auf, die den Quellcode für den Abschnitt enthält, in den du ein Formular einbetten möchtest.
5. Finde den Abschnitt im Code, in dem das Formular erscheinen soll.
6. Füge den Einbettungscode ein.
7. Speichere deine Änderungen. 

Shopify

Shopify-Fußzeile für alle Themes

Wenn das eingebettete Formular in der Fußzeile auf deiner Website erscheinen soll, geh wie folgt vor. Diese Anleitung gilt für Vintage- und 2.0-Themen von Shopify. 

1. Rufe die Shopify-Verwaltung auf.
2. Gehe zu Online Store > Themes.
3. Klicke auf die 3 Punkte und wähle dann Edit code.
4. Öffne die Themes-Datei footer.liquid.
5. Finde den Bereich, in dem das Formular erscheinen soll.
   1. Im Beispiel unten wird das Registrierungsformular über den Angaben zum Urheberrecht auf der Website angezeigt:
      
6. Füge den Code zum Einbetten des Formulars ein.
7. Klicke auf Speichern.

Das Formular erscheint nun in der Fußzeile deiner Website.

Shopify – Vintage Themes und andere Stelle als Fußzeile

Wenn du auf deiner Shopify-Seite (mit Vintage Theme) ein eingebettetes Formular an einer anderen Stelle als der Fußzeile einfügen möchtest, kannst du das folgendermaßen tun: 

1. Rufe die Shopify-Verwaltung auf.
2. Gehe zu Online Store > Themes.
3. Klicke auf Customize > Add Section.
4. Wähle 1 der folgenden Optionen, je nachdem, was angezeigt wird:
   • Custom content
     1. Add this block
     2. Delete the default content that populates
   • Custom HTML  
5. Klicke auf Add content > Custom HTML.
6. Fügen den Einbettungscode ein.
7. Klicke auf Speichern.

Shopify – 2.0 Themes und andere Stelle als Fußzeile

Wenn du auf deiner Shopify-Seite (mit 2.0 Theme) ein eingebettetes Formular an einer anderen Stelle als der Fußzeile einfügen möchtest, kannst du das folgendermaßen tun:

1. Erstelle das eingebettete Anmeldeformular in Klaviyo. Der Formulartyp im Abschnitt Stile muss auf „Eingebettetes Formular“ eingestellt sein. Bei Pop-up-, Flyout- oder ganzseitigen Formularen funktioniert es nicht. 
2. Speichere die Formular-ID.
   Du findest die Formular-ID beim eingebetteten Formular in deinem Klaviyo-Konto. Die Formular-ID ist der aus sechs Buchstaben bestehende Code am Ende der URL.
3. Rufe die Shopify-Verwaltung auf.
4. Gehe zu Online Store > Themes.
5. Klicke auf Customize.
6. Rufe die Seitenvorlage auf, zu der du das Formular hinzufügen möchtest, z. B. zur Startseite.
7. Klicke auf Add section und scrolle nach unten zu Klaviyo Embedded Form unter „Apps“.
   
   
8. Klicke auf den neuen Abschnitt und füge die ID des eingebetteten Formulars in das Textfeld ein. 
   
9. Klicke auf Speichern.
10. Das eingebettete Formular wurde der Seitenvorlage hinzugefügt und du kannst es nach Bedarf auf der Seite verschieben.

Shopify-Passwortseite für alle Themen

Wenn du das eingebettete Formular auf der Passwortseite deiner Website platzieren möchtest, gehe wie folgt vor. Diese Anleitung gilt für Vintage- und 2.0-Themen von Shopify. 

Du musst ein Code-Fragment installieren, um Registrierungsformulare zu aktivieren – das ist Klaviyo.js, das separat auf der Passwortseite vorhanden sein muss. Das liegt daran, dass die Datei password-content.liquid (bzw. die Datei password.liquid in Shopify 2.0) nicht die Datei theme.liquid nutzt, in der sie von der Integration automatisch installiert wird. Weiter unten findest du eine Anleitung zum Installieren von Klaviyo.js.

1. Rufe die Shopify-Verwaltung auf.
2. Gehe zu Online Store > Themes.
3. Klicken auf Actions > Edit code.
4. Bei Vintage Themes öffnest du die Datei password-content.liquid, bei 2.0 Themes heißt sie password.liquid.
5. Kopiere das unten stehende Klaviyo.js-Code-Fragment und füge es am Ende der Datei ein.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. Wenn du PUBLIC_API_KEY im Fragment siehst, musst du diesen durch den öffentlichen API-Schlüssel deines Klaviyo Kontos ersetzen. Du findest den öffentlichen API-Schlüssel unter Einstellungen > API-Schlüssel.
   
7. Umgib das Standard-Registrierungsformular von Shopify mit Kommentar-Tags, damit es auf der Website nicht angezeigt wird:
   1. Füge {% comment %} hinzu, um das Tag zu beginnen. 
   2. Füge {% endcomment %} hinzu, um das Tag zu schließen.
      
8. Füge den Code Ihres eingebetteten Klaviyo-Formulars oberhalb des auskommentierten eingebetteten Shopify-Formulars ein.
9. Klicke auf Speichern. 

Das Klaviyo-Einbettungsformular erscheint nun auf der Passwortseite deiner Website.

Hinweis: Wenn du Klaviyo.js installierst, erscheinen alle veröffentlichten Pop-up- und Flyout-Formulare unter deinem Konto auf dieser Seite, sofern du nicht angibst, dass sie auf der spezifischen URL nicht angezeigt werden sollen. 

WooCommerce

1. Öffne das WooCommerce Dashboard.
2. Klicke auf Customize Your Site.
3. Navigiere zu der Seite, auf der du das eingebettete Formular einfügen möchtest.
4. Klicke auf Add a Widget > Custom HTML.
5. Füge den Einbettungscode unter „Content“ ein.
6. Klicke auf die Schaltfläche Publish, um die Änderungen zu übernehmen.

Andere Plattformen 

Damit ein eingebettetes Klaviyo-Formular funktioniert, müssen zwei Code-Fragmente auf der Seite vorhanden sein: Das Javascript-Fragment von Klaviyo und der Einbettungscode des Formulars. Viele der Standardintegrationen von Klaviyo (z. B. Magento, Magento 2) integrieren Klaviyo.js automatisch in deine Website. Schau in den Integrationseinstellungen deiner Plattform, ob diese Option aktiviert ist. 

Wenn die Plattform nicht über eine native Klaviyo-Integration verfügt, füge unser Javascript-Fragment manuell ein, indem du dich an diese Anleitung hältst. 

Sobald Klaviyo.js installiert ist, kannst du den Einbettungscode des Formulars an der Stelle in den HTML- bzw. Quellcode der Website einfügen, wo er erscheinen soll. Wenn du dich bei der Bearbeitung von Website-Code nicht wohlfühlst und dies lieber in fachkundige Hände übergeben möchtest, wende dich an einen Klaviyo-Partner. 

Zusätzliche Ressourcen

• Erste Schritte mit Registrierungsformularen
• So installierst du Klaviyo.js, um Registrierungsformulare zu veröffentlichen
• So bettest du ein Formular auf deiner Seite für Bestellbestätigungen ein
• So fügst du ein eingebettetes Klaviyo-Formular zu deiner BigCommerce-Seite hinzu