Formularblock und Felder verstehen

Du wirst lernen

Hier erfährst du, wie du verschiedene Inhaltsblöcke aus dem Formulareditor (z.B. Element und Eingabefeld) in deinem Anmeldeformular verwenden kannst, um sein Aussehen und die Art der Informationen, die du von Abonnent sammelst, anzupassen. 

Über die Registerkarte Block hinzufügen

Klicke im Anmeldeformular-Editor auf die Registerkarte Block hinzufügen, um die verschiedenen Inhaltsblöcke zu sehen, die du zu deinem Formular hinzufügen kannst. 

Es gibt 2 verschiedene Block-Kategorien:

1. Element
2. Eingabefeld

Wenn du einen Block per Drag & Drop in die Formularvorschau ziehst, werden in der linken Seitenleiste Bearbeitungsoptionen angezeigt. Hier kannst du den Detailtext des Blocks anpassen, einschließlich Text und Styling. Unten in diesem Bearbeitungsmenü kannst du auch die Sichtbarkeitseinstellungen für den Block konfigurieren, um festzulegen, ob er auf allen Geräten, nur auf dem Desktop oder nur auf dem Handy angezeigt wird. Erfahre mehr über den dynamischen Block in Formularen.

Wenn du ein Anmeldeformular nur für Handys erstellst, sieh dir die Grundlagen an : Mobiles Formulardesign. 

Bewährte Praktiken beim Hinzufügen von Inhaltsblöcken zu Formularen

Wenn du dein Abonnement mit mehreren Blöcken und Feldern versiehst, um deine Website-Besucher nach mehreren Informationen zu fragen (z. B. Geburtstag, E-Mail-Adresse, Telefonnummer usw.), solltest du ein mehrstufiges Formular verwenden. Mit mehrstufigen Formularen kannst du mehr über deine Besucher erfahren und ihre Zustimmung über mehrere Kanäle einholen, ohne sie mit zu vielen Feldern auf einmal zu überfordern.

Wenn du in deinem Formular sowohl nach der E-Mail als auch nach der Telefonnummer fragen willst, ist es aus Gründen des Listenwachstums und der Compliance am besten, wenn du diese Felder auf zwei verschiedenen Stufen einfügst.

Formular Element

Anmeldeformular Elemente fügen Inhalte zu deinem Formular hinzu, darunter Text, Schaltflächen, Bilder und Gutscheine. Diese Blöcke informieren den Besucher über den Zweck deines Anmeldeformulars und ermöglichen es ihm, damit zu interagieren. 

Textblock

Mit dem Textblock kannst du Textinhalte in dein Formular einfügen, z. B. eine Überschrift, Anweisungen oder anderen Anzeigetext. KlaviyoFormular-Editor verwendet den UTF-Kodierungsstandard, d.h. er unterstützt lateinische Zeichen, Emojis, Doppelbyte-Zeichen und mehr. Außerdem kannst du ein Inline-Bild hinzufügen, indem du die Bild-URL-Eingabeoption verwendest. 

Knopfleiste

Mit Button Block kannst du Informationen über diejenigen, die dein Formular abschicken, sammeln und auf Klaviyo speichern. Eine Schaltfläche kann es dem Betrachter ermöglichen, das Formular zu schließen oder abzuschicken, ihn zu einer anderen Seite auf deiner Website zu leiten oder ihn für SMS-Nachrichten zu registrieren.

Wähle 1 der folgenden Aktionen für deinen Button: 

• Formular schließen
  Das Formular wird geschlossen und die Daten werden nicht an Klaviyo übermittelt.  
• Formular abschicken
  Alle Formularfelder, die der Besucher ausgefüllt hat, werden an Klaviyo gesendet, und das Formular wird entsprechend der Option, die du für das Feld Nach dem Absenden ausgewählt hast, fortgesetzt (entweder Nächster Schritt anzeigen, Zur URL gehen oder Formular schließen). 
• Gehe zu URL (Weiterleitung zu einer anderen Seite)
  Der Besucher wird zu der von dir angegebenen URL weitergeleitet, und die Daten aus den Formularfeldern werden nicht an Klaviyo übermittelt. Wenn du deine Ziel-URL eingibst, verwende die vollständige URL, einschließlich https:// (z.B.: https://help.klaviyo.com/hc/de-de und nicht help.klaviyo.com/hc/de-us).

  Die Aktion "Gehe zu URL" funktioniert nicht mit einer unvollständigen URL.

• Abonnieren per SMS
  Du kannst diese Option für Formulare konfigurieren, die nur für Mobilgeräte bestimmt sind, oder für die mobile Ansicht des SMS-Opt-in-Schritts für Formulare, die für alle Geräte bestimmt sind. Es ermöglicht den Besuchern, SMS mit nur wenigen Fingertipps zu abonnieren (Tap-to-Text). Wenn ein Besucher auf die Schaltfläche " Per SMS abonnieren" klickt, wird seine SMS-App mit einer vorgetippten Nachricht angezeigt, die er zur Anmeldung senden kann.
  • Wähle ein Stichwort aus dem Dropdown-Menü " Stichwort abonnieren". Das ist das Wort, das jemand an deine Zielnummer schicken muss, um in die SMS Abonnentenliste deines Kontos aufgenommen zu werden, und wird auf Kontoebene konfiguriert.
  • Lege eine Opt-in-Nachricht fest, die in ihrer Messaging-App erscheint. Standardmäßig steht hier "Sende diesen Text, um zu <organization_name> abonnieren!", aber du kannst den Inhalt der Nachricht anpassen. Dieses Feld erlaubt nur bis zu 160 GSM-7-Zeichen (1 Nachricht). Sonderzeichen, einschließlich Emojis, sind nicht gültig.
  • Wähle die entsprechende Nummer unter Sendende Region, wenn du in mehreren Regionen tätig bist und mehr als 1 Absendernummer hast.
    

Ändere die Liste, an die ein Anmeldeformular weitergeleitet wird

Du kannst die Liste, an die dein Formular weitergeleitet wird (d.h. die Liste, in der neue Abonnenten gesammelt werden), in den Einstellungen der Schaltfläche ändern. So änderst du die Übermittlungsliste eines Formulars: 

1. Klicke auf die Schaltfläche im Formulareditor. 
2. In dem Menü, das links erscheint, wählst du die neue Liste unter Zu übermittelnde Liste aus .
   
   
3. Klicke auf Zurück in der Bearbeitungsseitenleiste.
4. Wenn du mit dem Inhalt deines Formulars zufrieden bist, klicke auf Veröffentlichen. Auch wenn dein Formular bereits live ist, musst du die Änderungen veröffentlichen, damit neue Abonnenten auf deiner neu ausgewählten Liste sammeln.
   

Versteckte Felder einreichen

Versteckte Felder sind zusätzliche Eigenschaften, die dem Profil eines Abonnenten in Klaviyo hinzugefügt werden. So kannst du die Besucher verfolgen, die mit deinem Formular interagieren. Standardmäßig haben alle Formulare eine $source-Eigenschaft als verstecktes Feld, das angibt, wie sie zu deiner Liste hinzugefügt wurden. 

Du kannst die Eigenschaft $source und andere Eigenschaftsnamen anpassen. Wenn du versteckte Felder für Eigenschaften hinzufügst, die bereits im Profil einer Person vorhanden sind, werden diese wie andere Eingaben in Formularen durch den neuen Wert überschrieben, wenn die Person das Formular abschickt. Nehmen wir an, dein Formular erfasst die Kollektionspräferenzen und ein Kunde hat zuvor ausgewählt, dass er an deiner Männerkollektion interessiert ist. Wenn dieses Formular ein verstecktes Feld für das Interesse an deiner Damenkollektion hat, wird die Eigenschaft "Präferenzen" überschrieben, wenn du auf die Schaltfläche klickst (d.h. von "Männer" auf "Frauen"). 

Um eine neue verborgene Eigenschaft hinzuzufügen, wähle Eigenschaft hinzufügen.

Bildblock

Mit dem Bildblock kannst du ein Bild zu deinem Formular hinzufügen (z. B. dein Logo). Du kannst diesen Block verwenden, um Bilder hinzuzufügen, die zum Look and Feel deiner Marke passen. 

JPEG-, PNG- und GIF-Dateien werden alle akzeptiert. Wie bei allen Bildern, die im Internet betrachtet werden, führen größere Dateigrößen zu langsameren Ladezeiten. Für eine optimale Leistung solltest du eine Dateigröße von 50-100 KB anstreben.

Du kannst auch ein Hintergrundbild oder ein Seitenbild auf der Registerkarte " Stile" des Formular-Editors hinzufügen. 

Gutschein Block

Füge einen Gutschein-Block hinzu, um deine Website-Besucher dazu zu bewegen, dein Anmeldeformular auszufüllen und den enthaltenen Gutschein für einen Kauf auf deiner Website zu verwenden.

Du kannst einem Formular statische oder eindeutige Gutscheincodes hinzufügen. Die Best Practices von Klaviyo empfehlen, diese Codes im Erfolgsschritt anzuzeigen, damit die Kunden deine Website nicht verlassen müssen, um den Code zu erhalten. Lies unseren Leitfaden zum Hinzufügen von Gutscheincodes zu Anmeldeformularen, um mehr über die Einrichtung zu erfahren.

SMS Offenlegung Block

SMS Der Hinweis sollte über einem SMS Opt-in-Button platziert werden, um die Einhaltung von SMS zu gewährleisten. Erfahre mehr über die SMS-Offenlegungssprache.

Countdown-Timer

Countdown-Timer können deinem Anmeldeformular ein Gefühl der Dringlichkeit verleihen und werden oft mit Sonderaktionen oder Weihnachtsbotschaften kombiniert. Erfahre mehr über das Hinzufügen von Countdown-Timern zu Formularen.

Anmeldungszähler-Block

Fügen Sie einen Anmeldeformular-Zählerblock hinzu, um die Anzahl der Anmeldungen in Echtzeit anzuzeigen (z.B. "500 Personen haben sich in der letzten Stunde für diese Angebote angemeldet!"), um die Conversion zu steigern und das Listenwachstum zu beschleunigen. Dieser Block nutzt Social Proof, um Dringlichkeit zu erzeugen und die Besucher der Website zu einem Abonnement zu bewegen.

Wenn Sie einen Anmeldezähler-Block zu einem Formular hinzufügen, können Sie die folgenden Einstellungen konfigurieren:

• Einstellungen anzeigen
  Legen Sie fest, wie Anmeldungen gezählt werden. Beachten Sie, dass ein Abonnent den Erfolgsschritt des Formulars erreichen muss:
  
  • Anmeldungen aus den letzten 30 Tagen
  • Anmeldungen der letzten 7 Tage
  • Anmeldungen der letzten 24 Stunden
  • Anmeldungen der letzten Stunde
• Zeigen nach __ Übertragungen
  Bestimmen Sie die Mindestanzahl von Einsendungen, die erforderlich sind, damit der Block erscheint.
  

  Der Block wird vor den Besuchern der Website verborgen, bis die Mindestanzahl an Einsendungen überschritten ist. Sobald die Mindestanzahl an Übermittlungen erreicht ist (z.B. 200 Übermittlungen), wird der Block in Ihrem Formular angezeigt.

  

Der Standardtext entspricht den von Ihnen gewählten Anzeigeeinstellungen. Dieser Text ist zwar konfigurierbar, aber löschen Sie nicht den {{ form_submit_count }} -Tag, da dieser die Anzahl der Anmeldungen in Echtzeit anzeigt.

Eingabefeld

Mit Eingabefeld kannst du Informationen von Website-Besuchern sammeln, wie ihre E-Mail-Adresse, ihren Namen oder ihren Geburtstag. 

Alle Eingabefelder müssen mit einer Profileigenschaft verbunden sein, die zum Laden der Daten verwendet wird, die jeder Abonnent einreicht. Wenn du ein Eingabefeld zu deinem Formular hinzufügst, wählst du eine bestehende Eigenschaft aus dem Dropdown-Menü Profileigenschaften aus oder erstellst eine neue, indem du einen neuen Eigenschaftsnamen eingibst und auf Option erstellenklickst .

Wenn nicht anders angegeben, werden die Eingaben in diesen Feldern auf der Profilseite jeder Person geladen. 

E-Mail-Eingabefeld

E-Mail-Eingabefelder ermöglichen es Besuchern, ihre E-Mail-Adressen einzugeben und die mit dem Formular verbundene Liste zu abonnieren. Ein Formular kann nur eine E-Mail-Eingabe haben, und diese muss in einem der Schritte des Formulars erscheinen, nicht in der Erfolgsmeldung.

Feld Telefonnummer

Wenn du ein Telefonnummernfeld hinzufügst, erfasst es standardmäßig die SMS-Einwilligung, mit der du beliebige SMS Nachrichten senden kannst. Dieser Block validiert übermittelte Telefonnummern, um sicherzustellen, dass sie in einem akzeptablen Nummernformat geladen sind. Falls du es noch nicht getan hast, aktiviere SMS, wenn du SMS-Einwilligung sammelst, und richte deine Offenlegungssprache überall dort ein, wo du SMS-Einwilligung sammelst.

Falls nötig, kannst du die Art der SMS-Einwilligung, die das Formular erhebt, anpassen. Achte aber darauf, dass die Angaben zur Art der Einwilligung passen und Beispiele für die Arten von Nachrichten enthalten, die du verschickst, damit die Abonnenten verstehen, womit sie einverstanden sind.

Du kannst auch einen dynamischen Block beim Sammeln von SMS -Einwilligung verwenden, um sicherzustellen, dass die Kunden die beste Methode zum Opt-In sehen.

Text Eingabefeld

Texteingabefelder werden verwendet, um Informationen zu erfassen, die keinem bestimmten Format folgen müssen (wie z.B. Daten oder E-Mail-Adressen), und wenn es nicht sinnvoll ist, eine voreingestellte Liste von Optionen anzubieten. Beachte, dass bei Segmentierung und Flow-Filter zwischen Groß- und Kleinschreibung unterschieden wird. Ziehe andere Feldtypen in Betracht, wenn du Abonnement diese Daten zur Segmentierung oder zum Filtern verwenden möchtest. 

Ein häufiger Anwendungsfall für das Texteingabefeld ist das Sammeln von Abonnentennamen. Um ein Vornamenfeld hinzuzufügen, verwende "Vorname" als Beschriftung oder Platzhaltertext und wähle " Vorname" als Profileigenschaft. 

Optionsfelder

Optionsfelder bieten eine voreingestellte Liste von Optionen, von denen der Abonnent nur 1 auswählen kann. Diese sind nützlich, um Informationen wie das Geschlecht oder die Altersspanne zu erfassen.

Das Eigenschaftsfeld Profil sollte den Namen enthalten, den du für diese Eigenschaft verwenden möchtest. Wenn du in deinem Formular zum Beispiel fragst, ob die Besucher Kaffee oder Tee bevorzugen, kannst du eine benutzerdefinierte Profileigenschaft wie "Getränkewahl" verwenden. 

Verwende die Spalte Labels im Abschnitt Eigenschaftsoptionen, um die Optionen hinzuzufügen, aus denen dein Abonnent wählen kann. Füge dann die entsprechenden Werte in der Spalte Werte hinzu. Diese Werte werden im Profil aller Personen gespeichert, die das Formular ausfüllen, also solltest du eine Kurzversion der Antwort verwenden, die leicht zu finden ist. 

Wenn deine Optionsbezeichnungen "Teetrinker" und "Kaffeetrinker" lauten, könnten die Werte "Tee" bzw. "Kaffee" sein. 

Wenn ein Abonnent eine Optionsfeldfrage beantwortet, wird seine Antwort als String-Datentyp geladen. 

Mehrere Kontrollkästchen

Multi-Checkboxen bieten eine Liste von Optionen, und der Abonnent kann so viele Optionen auswählen, wie er möchte. Mehrfach-Kontrollkästchen sind nützlich für die Erfassung von Präferenzen, Interessengebieten, demografischen Informationen und für alle Fragen, bei denen der Abonnent mehr als eine Option auswählen kann.

Wie ein Optionsfeld benötigt auch dein Multikontrollfeld eine Profileigenschaft, eine Reihe von Beschriftungen und eine Reihe von Werten. 

Wenn ein Abonnent eine Frage mit mehreren Kontrollkästchen beantwortet, wird seine Antwort als Datentyp Liste geladen, unabhängig davon, wie viele Optionen er auswählt. 

Datumsfeld

Datumsfelder sind die beste Möglichkeit für Abonnenten, Datumswerte einzugeben, die dann wiederum zur Segmentierung oder zum Auslösen von datumsbasierten Flows verwendet werden können.

Du möchtest zum Beispiel die Geburtstage deiner Abonnenten sammeln, damit du ihnen an ihrem Geburtstag einen Gutscheincode per Flow schicken kannst. In diesem Fall würdest du das Datumsfeld hinzufügen und die entsprechende Profileigenschaft auf Geburtstag setzen. Wenn du Datumsinformationen über einen Kunden sammeln möchtest, verwende einen Datumsblock, um sicherzustellen, dass die Daten richtig formatiert sind.

Du hast die Möglichkeit, die Art der Datumseingabe in deinem Formular anzupassen (z.B. TT/MM+/JJJJ); im persönlichen Profil werden die Daten jedoch weiterhin im Standardformat MM+/TT/JJJJ geladen. Wenn du im Menü Datumsformat eine Option auswählst, die keine Jahreszahl enthält (z.B. MM+ TT), wird automatisch ein Standardjahr in das Profil jedes Abonnenten eingefügt. Daten, die über ein Datumsfeld übermittelt werden, werden mit dem Datentyp "Datum" geladen. 

Dropdown-Feld

Dropdowns sind ähnlich wie Radiobuttons, da der Abonnent 1 Option aus einer vorgegebenen Liste auswählen kann. Diese Option hilft auch, Platz auf deinem Formular zu sparen. Ziehe in Erwägung, ein Dropdown anstelle von Optionsfeldern zu verwenden, wenn du mehr als 4 Optionen hast. Wie Radiobuttons und Kontrollkästchen benötigt auch dein Dropdown-Feld eine Profileigenschaft, eine Beschriftung und eine Reihe von Werten. 

Alterssperre

Alterssperre-Baustein kann die Verwendung von alkoholbezogenen Marken SMS in den USA, Großbritannien und Australien erlauben. Die Altersfreigabe muss in deinem Konto aktiviert sein, bevor du den Alterssperre-Baustein zu deinem Anmeldeformular hinzufügen und SMS nutzen kannst. Erfahre mehr über die Altersfreigabe von Alkohol mit Klaviyo.

Ein Element oder Eingabefeld löschen

Um ein beliebiges Element oder Eingabefeld aus deinem Anmeldeformular zu löschen:

1. Bewege den Mauszeiger in der Formularvorschau im Editor auf den Block, den du löschen möchtest.
2. Wähle das Papierkorbsymbol aus, das erscheint.
   
3. Im Modal " Block löschen" wählst du " Block löschen". Beachte, dass ein Block nicht wiederhergestellt werden kann, sobald du ihn gelöscht hast.

Nächste Schritte

Wenn du 1 Formular so konfigurieren möchtest, dass es eine eigene Desktop-Ansicht und eine eigene mobile Ansicht hat, schau dir unseren Leitfaden zur Verwendung von dynamischen Blöcken in Formularen an.

Wenn du Block und Felder zu deinem Anmeldeformular hinzugefügt hast, lernst du, wie du es so gestalten kannst , dass es zu deiner Marke passt. Wenn du ein Popup-, Flyout- oder Ganzseitenformular veröffentlichen möchtest, klickst du einfach auf Veröffentlichen, um es auf deiner Website einzubinden. Wenn du ein Einbettungsformular erstellst, füge den Einbettungscode des Formulars auf deiner Website ein, um es zu veröffentlichen.

Zusätzliche Ressourcen

Erste Schritte mit dem Anmeldeformular

Grundlagen: Mobile Formulargestaltung

Wie man den dynamischen Block in Formularen verwendet

Kurs: Strategische Anmeldeformulare erstellen