Stile für ein Anmeldeformular verstehen

Du wirst lernen

Lerne, wie du den Anmeldeformular-Builder von Klaviyo nutzt, um dein Formular zu gestalten, indem du die Design-Einstellungen im Bereich Styles bearbeitest. Die Stileinstellungen gelten für dein gesamtes Anmeldeformular, einschließlich aller Schritte des Formulars und der Erfolgsmeldung. 

Halte das Design deines Anmeldeformulars einfach. Sie sollte klar und übersichtlich sein und einen Hauptzweck haben. Außerdem solltest du darauf achten, dass er leicht zu lesen und zu verstehen ist. 

Bevor du beginnst

Bevor du dein Anmeldeformular gestaltest, gehst du auf die Registerkarte Anmeldeformular > Anmeldeformular erstellen .Du kannst eine vorgefertigte Vorlage aus der Formularbibliothek anpassen oder eine ganz neue Vorlage für ein Anmeldeformular erstellen. Füge alle Inhalte und Eingabeblöcke hinzu, die du vor dem Styling einfügen möchtest. 

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

Formular-Typen

Oben im Abschnitt Stile kannst du einen Formulartyp auswählen: Popup, Ganzseite, Flyout oder Einbetten:

• Popups erscheinen in der Mitte des Browserfensters. Ein Popup ist aufmerksamkeitsstark und wird am besten für wichtige Angebote oder kritische Nachrichten verwendet. Popups haben die höchste Conversion-Rate von allen Formulararten. 
• Flyouts gleiten aus jeder beliebigen Richtung in das Browserfenster. Diese können wie Popups verwendet werden, um jemanden dazu zu bringen, etwas zu tun oder ihn umzuleiten. Da es sich aber um eine weniger aufdringliche Option handelt, kannst du sie nutzen, um auf passive Weise Informationen über deine Browser zu sammeln.
• Eingebettete Formulare erscheinen dort, wo du das bereitgestellte Code-Fragment auf deiner Website einfügst. Eingebettete Formulare sind die am wenigsten aufdringlichen Anmeldeformulare und werden normalerweise in der Fußzeile einer Website verwendet, um E-Mail-Adressen zu sammeln. 
• Ganzseitenformulare werden im gesamten Browserfenster angezeigt, so dass du die volle Aufmerksamkeit deiner Kunden erhältst. Diese Formulare haben eine hohe Konversionsrate, da sie nicht so leicht übersehen werden können. Das macht sie aber auch aufdringlicher, da die Kunden mit dem Formular interagieren müssen, um es abzuschließen.
  • Erwäge, ein ganzseitiges Formular als Landing Page zu verwenden, um deine Abonnentenliste zu erweitern. 
• Banner erscheinen als Balken am oberen oder unteren Rand einer Webseite. Sie sind weniger aufdringlich als Popups oder Ganzseitenformulare, bieten kontinuierliche Sichtbarkeit und ein mobilfreundliches Design, das sich nahtlos in deine Website einfügt. Du kannst das Banner so einstellen, dass es mit der Seite scrollt oder fixiert bleibt, einen Inhaltsblock oder ein Eingabefeld direkt zum Banner hinzufügen oder das Banner so konfigurieren, dass es ein anderes Formular aus deinem Konto öffnet, wenn jemand darauf klickt. 
  • Um ein anderes Formular anzuzeigen, wenn ein Kunde auf das Banner klickt, klickst du auf die Schaltfläche in der Vorschau und stellst die Aktion auf "Anderes Formular öffnen" ein und wählst dann das Live-Formular aus, das du anzeigen möchtest. Beachte, dass dies bei eingebetteten Formularen nicht möglich ist.

Hintergrundbilder und Seitenbilder 

Um dein Anmeldeformular mit eigenen Bildern zu versehen, kannst du ein Seiten- oder Hintergrundbild verwenden. Seitenbilder erscheinen links oder rechts von deinem Formularinhalt, während Hintergrundbilder hinter deinen Formularfeldern angezeigt werden. 

Wenn du ein Bild in einem Formular verwendest, gibt es ein paar Dinge zu beachten:

• Es gibt viele Arten von Bildformaten, aus denen du wählen kannst. JPEGs bieten ein gutes Gleichgewicht zwischen Qualität und Größe für bunte Bilder, während PNGs transparente Bilder oder Logos scharf aussehen lassen. 
  • Strebe eine Dateigröße von 50-100 KB für Seitenbilder und weniger als 200 KB für Hintergrundbilder an, um eine hohe Qualität der Bilder zu gewährleisten, ohne die Ladezeiten deiner Website zu verlangsamen.
• Wie bei allen Bildern, die im Internet betrachtet werden, führen größere Dateigrößen zu langsameren Ladezeiten.
  • Beachte, dass ein Bild in voller Breite bei 72 dpi oft größer als 1 MB ist und eine Verkleinerung des Bildes seine Qualität beeinträchtigen kann. Berücksichtige bei der Auswahl der Bilder den Kompromiss zwischen Bildqualität und Ladezeit.
• Achte darauf, dass du ein Bild von guter Qualität verwendest, um beste Ergebnisse zu erzielen. 
  
  • Im Internet ist eine Auflösung von 72dpi die beste Praxis. Um ein Gleichgewicht zwischen Bildqualität und Ladegeschwindigkeit zu erreichen, solltest du versuchen, deine Bilder zwischen 600 und 1000 Pixel breit und weniger als 2000 Pixel hoch zu halten, wenn sie über die gesamte Breite gehen. Bilder, die weniger als die volle Breite der E-Mail einnehmen, können kleiner als 600px sein.
    
    • Wenn du ein ganzseitiges Anmeldeformular verwendest, brauchst du ein größeres, hochauflösendes Bild (z. B. mit einer Mindestbreite von 1980 Pixel), damit es in das größere Formular passt. Bedenke aber, dass dies trotzdem Auswirkungen auf die Ladezeit haben kann.
• Füge deinem Bild einen Alt-Text hinzu, um die Zugänglichkeit für alle Nutzer/innen, die mit deinen Formularen interagieren, zu fördern. 

Da Anmeldeformulare von Browsern gerendert werden (im Gegensatz zu E-Mails, die von E-Mail-Service-Providern gerendert werden), gibt es weniger Empfehlungen, wie man sie formatiert und anpasst. Browser können Bilder aller Arten und Größen wiedergeben. Halte dich also im Allgemeinen an hochauflösende Bilder und überschaubare Dateigrößen und teste das Aussehen auf jedem Gerätetyp. 

Ein Seitenbild hinzufügen

So fügst du ein Seitenbild hinzu:

1. Gehe zum Abschnitt Stile und scrolle zu den Einstellungen für das Seitenbild.
2. Wähle Linkes Bild oder Rechtes Bild, je nachdem, wo das Bild erscheinen soll.
   
3. Wähle ein Bild aus. Standardmäßig sind Formulare mit Seitenbildern auf eine Breite von 780 px und eine mittlere Größe eingestellt. Dies kann jedoch im Abschnitt Seitenbild auf der Registerkarte Stile angepasst werden, je nachdem, wie groß das Formular ist oder ob du das Bild kleiner oder größer haben möchtest.

Beachte, dass Seitenbilder auf Schrittebene eingestellt werden, sodass du für jeden Schritt deines Formulars eigene Bilder einstellen kannst. Weitere Informationen zu den Anzeigeoptionen für Seitenbilder findest du in unserem Artikel Wie man Seitenbilder in Anmeldeformularen hinzufügt. 

Ein Hintergrundbild hinzufügen

So fügst du ein Hintergrundbild hinzu:

1. Umschalter auf die Einstellung Hintergrundbild unter Formularhintergrund.
2. Lade dein Bild über die Schaltfläche Durchsuchen hoch.
3. Passe die Anzeigeeinstellungen nach deinem Geschmack an.
   

Wenn du deinem Formular ein Seiten- oder Hintergrundbild hinzufügst, kannst du eine Vorschau aller Formularschritte, einschließlich der Erfolgsmeldung, anzeigen, indem du jeden Schritt in der oberen Menüleiste auswählst. Standardmäßig passt sich die Höhe deines Formulars an den Inhalt und die Formularfelder der einzelnen Schritte an, sodass einige Schritte höher oder kürzer sein können als andere. Wenn dein Formular ein Bild enthält, können manche Bildinhalte bei kleineren Schritten abgeschnitten werden. Um dies zu vermeiden, legst du unter Formtyp im Abschnitt Stile eine Mindesthöhe fest. 

Optionen für Farbe und Abstände

Verwende die Einstellungen Formularstile und Eingabefeldstile, um Farben, Rahmenfarben, Auffüllungen und Ränder festzulegen. Diese Einstellungen gelten für alle Schritte deines Formulars, es sei denn, du wendest in den Stil-Einstellungen eines bestimmten Inhaltsblocks widersprüchliche Einstellungen an (z. B. für Text oder Farben).

Schriftarten und Textstile

Bearbeite den Text (z. B. Schriftart, Größe, Farbe usw.) für deinen Inhaltsblock (z. B. ein E-Mail- oder Telefonnummernfeld) unter Eingabefeld Textstile.

Bearbeite den Text für einen bestimmten Inhaltsblock, indem du in der Formularvorschau auf den Block klickst und das erscheinende Menü Textoptionen verwendest. KlaviyoDer Formulareditor verwendet den UTF-8-Kodierungsstandard, d.h. er unterstützt lateinische Zeichen, Emojis, Doppelbyte-Zeichen und mehr.

Dein Anmeldeformular kann die websicheren Schriftarten der Klaviyo-Editoren verwenden, eine unserer von Klaviyo gehosteten benutzerdefinierten Schriftarten, oder du kannst deine eigenen benutzerdefinierten Schriftarten hinzufügen. Lerne, wie du benutzerdefinierte Schriftarten in deinem Anmeldeformular verwenden kannst. 

Icons schließen

Du kannst die Größe, die Farbe und den Stil des Schließsymbols deines Formulars (das X in der oberen rechten Ecke) anpassen. Klicke auf das X-Symbol im Formulareditor und passe dann die Einstellungen im Editor auf der linken Seite an. Erfahre mehr über die Gestaltung des Schließsymbols eines Formulars. 

Wenn du dich für ein ganzseitiges Formular entschieden hast, können deine Kunden das Formular nur verlassen, indem sie auf das Schließen-Symbol klicken. Dies ist hilfreich, um ihre Aufmerksamkeit zu erregen. Achte aber darauf, dass das Schließsymbol deutlich sichtbar ist, damit die Kunden nicht durch die Unterbrechung deines Formulars frustriert werden.

Benutzerdefiniertes HTML und CSS

KlaviyoDer Anmeldeformular-Editor unterstützt derzeit keine benutzerdefinierten HTML- oder CSS-Inhalte. Tipps und Inspirationen, wie du dein Formular mit dem Klaviyo-Editor anpassen kannst, findest du im Community-Forum. 

Nächste Schritte

Sobald du dein Anmeldeformular gestaltet hast, erfährst du, wie du das Verhalten deines Formulars einrichtest, z. B. welche Besucher das Formular sehen sollen und wann es erscheinen soll. In unserem Artikel erfährst du, wie du die Einstellungen für Formular-Targeting und -Verhalten wählst.

Sobald du dein Anmeldeformular veröffentlicht hast, kannst du deine Bestätigungs-E-Mail anpassen, wenn Double Opt-in für deine Liste aktiviert ist. Erstelle dann einen Willkommensfluss, um das Angebot deines Formulars zu übermitteln (z.B. einen Rabatt oder kostenlosen Versand bei der ersten Bestellung) und neue Abonnenten mit deiner Marke bekannt zu machen.

Zusätzliche Ressourcen

• Erste Schritte mit dem Anmeldeformular
• Wie man ein Anmeldeformular A/B testet
• Kurs: Strategisches Anmeldeformular erstellen