Grundlegendes zu Stilen für ein Anmeldeformular

Übersicht

Erfahre, wie du Klaviyos Builder für Anmeldeformulare verwendest, um dein Formular zu gestalten, indem du die Designeinstellungen bearbeitest, die im Abschnitt Styles verfügbar sind. 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 1 Hauptzweck haben. Außerdem solltest du dafür sorgen, dass es leicht zu lesen und zu verstehen ist.

Bevor du anfängst

Bevor du dein Anmeldeformular gestaltest, navigiere zum Tab Anmeldeformulare > Anmeldeformular erstellen. Du kannst eine vorgefertigte Vorlage aus der Formularbibliothek anpassen oder eine ganz neue Anmeldeformular-Vorlage erstellen. Füge alle Inhalts- und Eingabeblöcke hinzu, die du vor dem Gestalten einfügen möchtest.

Wenn du ein reines Mobil-Anmeldeformular erstellst, siehe Grundlagen: Design mobiler Formulare.

Formulartypen

Oben im Abschnitt Styles kannst du einen Formular-Typ auswählen: Popup, ganze Seite, Flyout oder Einbettung:

• Pop-ups werden in der Mitte des Browserfensters angezeigt. Ein Pop-up ist aufmerksamkeitsstark und eignet sich am besten für wichtige Angebote oder kritische Mitteilungen. Pop-ups haben die höchste Conversion-Rate aller Formulartypen.
• Flyouts gleiten aus jeder von dir ausgewählten Richtung in das Browserfenster. Diese können – ähnlich wie Popups – genutzt werden, um jemanden dazu zu bringen, etwas zu erledigen oder sie umzuleiten. Da es aber eine weniger aufdringliche Option ist, 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 das am wenigsten aufdringliche Anmeldeformular und werden in der Regel im Footer einer Website verwendet, um E-Mail-Adressen zu erfassen.
• Ganze Seite -Formulare werden über das gesamte Browserfenster hinweg angezeigt und ziehen die volle Aufmerksamkeit deiner Kund*innen auf sich. Das sind Formulare mit hoher Conversion-Rate, da sie nicht so leicht übersehen werden können. Allerdings sind sie auch aufdringlicher, da Kund*innen mit dem Formular interagieren müssen, um es zu schließen.
  • Ziehe in Erwägung, ein ganzseitiges Formular als Landingpage zu verwenden, um deine Abonnent*innenliste zu erweitern.
• Banner werden als Leiste oben oder unten auf einer Webseite angezeigt. Sie sind weniger aufdringlich als Pop-ups oder ganzseitige Formulare und bieten kontinuierliche Sichtbarkeit sowie ein mobilfreundliches Design, das sich nahtlos in deine Website einfügt. Du kannst den Banner so einstellen, dass er mit der Seite mitscrollt oder fixiert bleibt, Inhaltsblöcke oder Eingabefelder direkt zum Banner hinzufügen oder den Banner so konfigurieren, dass beim Klicken darauf ein anderes Formular aus deinem Konto geöffnet wird.
  • Damit ein anderes Formular angezeigt wird, wenn ein*e Shopper*in auf das Banner klickt, klicke in der Vorschau auf die Schaltfläche und setze die Aktion auf Ein anderes Formular öffnen und wähle dann das Live-Formular aus, das du anzeigen möchtest. Beachte, dass dies für eingebettete Formulare nicht möglich ist.

Hintergrundbilder und Seitenbilder

Um benutzerdefinierte Bilder zu deinem Anmeldeformular hinzuzufügen, verwende ein Seitenbild oder ein Hintergrundbild. Seitenbilder werden links oder rechts von deinem Formularinhalt angezeigt, 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 Bildformattypen zur Auswahl. JPEGs bieten ein gutes Gleichgewicht zwischen Qualität und Größe für farbige Bilder, während PNGs transparente Bilder oder Logos scharf darstellen können.
  • Plane für Seitengrafiken eine Dateigröße von 50–100 KB und für Hintergrundbilder weniger als 200 KB ein, um eine hohe Bildqualität sicherzustellen, ohne die Ladezeiten deiner Website zu verlangsamen.
• Wie bei allen Bildern, die im Web angezeigt werden, führen größere Dateigrößen zu längeren Ladezeiten.
  • Beachte, dass ein Bild in voller Breite mit 72 dpi oft größer als 1 MB ist und dass eine Reduzierung der Bildgröße die Qualität verringern kann. Wäge beim Auswählen von Bildern zwischen Bildqualität und Ladezeit ab.
• Achte darauf, für die besten Ergebnisse ein Bild in ausreichend hoher Qualität zu verwenden.
  
  • Im Web ist die Verwendung einer Auflösung von 72 dpi Best Practice. Um Bildqualität und Ladegeschwindigkeit auszubalancieren, solltest du versuchen, deine Bilder zwischen 600 und 1.000 px breit zu halten und bei Bildern in voller Breite weniger als 2.000 px hoch. Bilder, die nicht die volle Breite der E-Mail einnehmen, können kleiner als 600 px sein.
    
    • Beachte, dass du bei der Verwendung eines Anmeldeformulars als ganze Seite ein größeres Bild mit hoher Auflösung benötigst (z. B. eine Mindestbreite von 1980 px), damit es zum größeren Formular passt. Behalte jedoch im Hinterkopf, dass dies die Ladezeit dennoch beeinträchtigen kann.
• Füge deinem Bild Alternativtext hinzu, um die Barrierefreiheit für alle Nutzer*innen zu verbessern, die mit deinen Formularen interagieren.

Da Anmeldeformulare in Browsern gerendert werden (im Gegensatz zu E-Mails, die in ESPs gerendert werden), gibt es weniger Empfehlungen dazu, wie man sie formatiert und anpasst. Browser können Bilder aller Typen und Größen rendern. Halte dich daher generell an hochauflösende Bilder und überschaubare Dateigrößen und teste die Darstellung auf jedem Gerätetyp.

Seitliches Bild hinzufügen

So fügst du ein Bild an der Seite hinzu:

1. Zum Abschnitt Styles gehen und zu den Einstellungen für Side Image scrollen.
2. Wähle Linkes Bild oder Rechtes Bild, je nachdem, wo das Bild angezeigt werden soll.
   

3. Wähle ein Bild aus. Standardmäßig sind Formulare mit seitlichen Bildern 780 px breit und mittelgroß; das lässt sich jedoch im Abschnitt Seitliches Bild im Tab Stile anpassen – je nach Formulargröße oder wenn das Bild kleiner oder größer angezeigt werden soll.

Beachte, dass Seitenbilder auf der Schritt-Ebene festgelegt werden, sodass du für jeden Schritt deines Anmeldeformulars separate Bilder festlegen kannst. Weitere Informationen zu Anzeigeoptionen für Seitenbilder findest du in unserem Artikel So fügst du Seitenbilder in Anmeldeformularen hinzu.

Ein Hintergrundbild hinzufügen

So fügst du ein Hintergrundbild hinzu:

1. Aktiviere die Einstellung Background Image unter Form Background.
2. Lade dein Bild über die Schaltfläche Durchsuchen hoch.
3. Passe die Anzeigeeinstellungen nach deinen Wünschen an.
   

Wenn du deinem Formular ein Seiten- oder Hintergrundbild hinzufügst, sieh dir eine Vorschau aller Formularschritte an, einschließlich der Erfolgsmeldung, indem du jeden Schritt in der oberen Menüleiste auswählst. Standardmäßig passt sich die Höhe deines Formulars basierend auf dem Inhalt und den Formularfeldern in jedem Schritt an, sodass einige Schritte höher oder niedriger als andere sein können. Wenn dein Formular ein Bild enthält, können einige Bildinhalte bei kleineren Schritten abgeschnitten werden. Um das zu vermeiden, lege unter Form Type im Abschnitt Styles eine Mindesthöhe fest.

Farb- und Abstandsoptionen

Verwende die Einstellungen Formularstile und Eingabefeldstile, um Farben, Rahmenfarben, Innenabstände und Ränder festzulegen. Diese Einstellungen gelten für alle Schritte deines Formulars, es sei denn, du wendest innerhalb der Stileinstellungen eines bestimmten Inhaltsblocks abweichende Einstellungen an (z. B. für Text oder Farben).

Schriftarten und Textstile

Bearbeite den Text (z. B. Schriftart, -größe, -farbe usw.) für deine Inhaltsblöcke (z. B. ein E-Mail- oder Telefonnummernfeld) unter Eingabefeld-Textstile.

Bearbeite den Text für einen bestimmten Inhaltsblock, indem du im Formularvorschau auf den Block klickst und das angezeigte Optionsmenü Text verwendest. Der Formular-Editor von Klaviyo verwendet den Kodierungsstandard UTF-8, d. h. er unterstützt lateinische Zeichen, Emojis, Doppelbyte-Zeichen und mehr.

Dein Anmeldeformular kann die webbasierten Standardschriftarten verwenden, die in den Klaviyo-Editoren nativ verfügbar sind, eine unserer von Klaviyo gehosteten benutzerdefinierten Schriftarten, oder du kannst deine eigenen benutzerdefinierten Schriftarten hinzufügen. Erfahre, wie du benutzerdefinierte Schriftarten in deinen Anmeldeformularen verwendest.

Schließen-Symbole

Du kannst die Größe, Farbe und den Stil des Schließen-Symbols (das X oben rechts) in deinem Formular anpassen. Klicke im Formulareditor auf das X-Symbol und passe dann die Einstellungen im Editor links an. Hier erfährst du mehr über das Styling des Schließen-Symbols eines Formulars.

Wenn du ein Formular für die ganze Seite ausgewählt hast, können deine Shopper*innen das Formular nur schließen, indem sie auf das Schließen-Symbol klicken. Das ist hilfreich, um ihre Aufmerksamkeit zu gewinnen; achte aber darauf, dass das Schließen-Symbol eindeutig und gut sichtbar ist, damit Shopper*innen nicht durch die Unterbrechung deines Formulars für die ganze Seite frustriert werden.

Benutzerdefiniertes HTML und CSS

Der Editor für Klaviyo-Anmeldeformulare unterstützt derzeit keine benutzerdefinierten HTML- oder CSS-Inhalte. Tipps und Inspirationen zur Anpassung deines Formulars mit dem Klaviyo-Editor findest du im Community-Forum.

Ergebnis

Du hast jetzt gelernt, wie du im Formular-Editor verschiedene Stileinstellungen anpasst, um dein Anmeldeformular zu gestalten.

Nächste Schritte

Nachdem du dein Anmeldeformular gestaltet hast, erfährst du, wie du das Verhalten deines Formulars einrichtest, einschließlich welche Besucher*innen das Formular sehen sollen und wann es angezeigt werden soll. Lies dazu unseren Artikel So wählst du Einstellungen für Formular-Targeting und -Verhalten aus.

Nachdem du dein Anmeldeformular veröffentlicht hast, passe deine Opt-in-Bestätigungs-E-Mail an, wenn Double Opt-in für deine Liste aktiviert ist. Erstelle dann eine Welcome-Serie, um dein Formularangebot (z. B. einen Rabatt oder kostenlosen Versand für die erste Bestellung) zuzustellen und neue Abonnent*innen mit deiner Marke vertraut zu machen.

Weitere Ressourcen