Grundlegendes zu Stilen für ein Anmeldeformular

Übersicht

Erfahre, wie du mit dem Anmeldeformular-Builder von Klaviyo dein Formular gestalten kannst, indem du die Designeinstellungen bearbeitest, die im Abschnitt Stile verfügbar sind. Die Stileinstellungen gelten für dein gesamtes Anmeldeformular, einschließlich aller Schritte eines Formulars und seiner 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 zu Anmeldeformular > Formular erstellen. Wenn du dazu aufgefordert wirst, einen Kanal auszuwählen, gib einen Namen ein, wähle Web aus und klicke auf Erstellen. Du kannst eine vorgefertigte Vorlage aus der Formularbibliothek anpassen oder eine brandneue Anmeldeformular-Vorlage erstellen. Füge beliebige Inhalts- und Eingabeblöcke hinzu, die du vor dem Gestalten einbinden möchtest.

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

Formulartypen

Wähle oben im Abschnitt Styles einen Formulartyp: Popup, Ganze Seite, Flyout, Einbettung oder Banner.

• 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 leicht zu übersehen sind. Allerdings sind sie dadurch 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.
  • Um ein anderes Formular über ein Banner auszulösen, klicke in der Vorschau auf die Schaltfläche des Banners und lege Aktion auf Ein anderes Formular öffnen fest. Wähle ein Live-Popup, Flyout oder ein Vollseitenformular unter Zu öffnendes Formular aus. Eingebettete Formulare können diese Aktion ebenfalls verwenden, aber ein eingebettetes Formular, Banner oder wieder auf Lager-Formular kann nicht das Formular sein, das geöffnet wird.

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.
  • Wenn du die Pixelabmessungen eines Bildes reduzierst oder es komprimierst, kann das die Dateigröße verringern, aber auch die Qualität beeinträchtigen. Berücksichtige beim Auswählen von Bildern den Kompromiss zwischen Bildqualität und Ladezeit.
• Achte darauf, für die besten Ergebnisse ein Bild in ausreichend hoher Qualität zu verwenden.
  
  • Um Bildqualität und Ladegeschwindigkeit auszubalancieren, solltest du versuchen, deine Bilder bei 600 bis 1000 px Breite und bei Bildern in voller Breite unter 2000 px Höhe zu halten. Bilder, die weniger als die volle Breite des Formulars einnehmen, können kleiner als 600 px sein.
    • Wenn du ein Anmeldeformular als ganze Seite verwendest, benötigst du ein größeres, hochauflösendes Bild (z. B. eine Mindestbreite von 1980 px), damit es zum größeren Formular passt. Beachte, dass sich das trotzdem auf die Ladezeit auswirken kann.
• Füge deinem Bild Alternativtext hinzu, um die Barrierefreiheit für alle Nutzer*innen zu verbessern, die mit deinen Formularen interagieren.

Anmeldeformulare werden in Webbrowsern angezeigt, während E-Mails in E-Mail-Clients erscheinen. Verwende hochauflösende Bilder mit handhabbaren Dateigrößen und teste ihre Darstellung auf jedem Gerätetyp. Bilder, die über den Formular-Editor hochgeladen werden, müssen 5 MB oder kleiner sein.

Seitliches Bild hinzufügen

Seitliche Bilder sind für Popup-, Flyout-, eingebettete und Vollseitenformulare verfügbar. So fügst du ein seitliches Bild hinzu:

1. Gehe zum Abschnitt Stile und scrolle zu den Einstellungen für Bild an der Seite.
2. Wähle Linkes Bild oder Rechtes Bild, je nachdem, wo das Bild angezeigt werden soll.
   

3. Klicke im Formularvorschau auf den leeren seitlichen Bildbereich und klicke dann auf Bild auswählen, um ein Bild aus deiner Bibliothek auszuwählen oder ein neues hochzuladen.

Standardmäßig wird durch das Hinzufügen eines seitlichen Bildes bei Popup-, Flyout- und eingebetteten Formularen eine Breite von 780 px festgelegt, mit einem seitlichen Bild der Größe Mittel. Passe den Anteil des Bildes am Formular in Stile > Seitenbild an. Passe die Gesamtbreite des Formulars in den Popup-Einstellungen, Flyout-Einstellungen oder Einbettungseinstellungen an. Passe bei Formularen für ganze Seiten die Inhaltsbreite in Full page settings an.

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.

Seitenbilder sind auf Mobilgeräten standardmäßig ausgeblendet. Um auch auf Mobilgeräten eins anzuzeigen, gehe zu Stile > Seitenbild und wähle Alle Geräte aus. Sieh dir das mobile Layout in der Vorschau an, nachdem du diese Änderung vorgenommen hast.

Ein Hintergrundbild hinzufügen

So fügst du ein Hintergrundbild hinzu:

1. Aktiviere in Stile das Hintergrundbild.
2. Klicke auf Bild auswählen, um ein Bild aus deiner Bibliothek auszuwählen oder ein neues hochzuladen.
3. Wähle, wie das Bild eingepasst wird: Ausfüllen füllt den Bereich aus und kann das Bild zuschneiden; Einpassen zeigt das ganze Bild und kann leeren Raum lassen; Benutzerdefiniert ermöglicht es dir, die Breite festzulegen. Passe die Ausrichtung an, um das Bild zu positionieren.

Wenn du deinem Formular ein Seiten- oder Hintergrundbild hinzufügst, kannst du alle Formularschritte, einschließlich der Erfolgsmeldung, in der Vorschau anzeigen, indem du in der oberen Menüleiste jeden Schritt auswählst. Standardmäßig passt sich die Höhe deines Formulars anhand der Inhalte und Formularfelder in jedem Schritt an, sodass einige Schritte höher oder niedriger als andere sein können. Wenn dein Formular ein Bild enthält, kann ein Teil des Bildinhalts bei kleineren Schritten abgeschnitten werden. Bei Pop-up-, Flyout- und eingebetteten Formularen kannst du unter Pop-up-Einstellungen, Flyout-Einstellungen oder Einbetten-Einstellungen in Stile die Mindesthöhe anpassen. Ganzseitenformulare haben diese Einstellung nicht. Überprüfe außerdem in jedem Schritt und bei jeder Gerätegröße die Bildanpassung und Ausrichtung.

Farb- und Abstandsoptionen

Verwende in Stilen Hintergrundfarbe, Rahmen, Innenabstand und Außenabstand, um die Farben und Abstände des Formulars anzupassen. Verwende Eingabefeld-Stile, um die Eingabefelder zu gestalten. Außenabstand ist für eingebettete Formulare nicht verfügbar. Diese Einstellungen gelten für alle Schritte deines Formulars, sofern du innerhalb eines bestimmten Blocks keine widersprüchlichen Einstellungen vornimmst.

Schriftarten und Textstile

Verwende Stile > Eingabefeldtext, um die Schriftart, -größe und -farbe für Eingabefelder wie E-Mail- und Telefonnummernfelder zu bearbeiten. Verwende Text und Überschriften, um gemeinsame Stile für Textblöcke festzulegen, und wähle Fließtext oder eine Überschriftenebene aus, bevor du das Erscheinungsbild anpasst.

Bearbeite den Text für einen bestimmten Text -Block, indem du im Formular-Preview auf den Block klickst und den Inhalt -Editor verwendest, der angezeigt wird. 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 deines Formulars anpassen (standardmäßig das X in der oberen rechten Ecke). Klicke im Formular-Vorschaubereich auf das X-Symbol und passe dann seine Einstellungen für das Schließen-Symbol an. Eingebettete Formulare haben kein Schließen-Symbol. Hier erfährst du mehr über das Styling des Schließen-Symbols eines Formulars.

Käufer*innen können ein Vollseitenformular über das Schließen-Symbol oder die Escape-Taste schließen. Halte das Schließen-Symbol frei und sichtbar, damit Käufer*innen nicht von der Unterbrechung durch dein Vollseitenformular frustriert werden.

Benutzerdefiniertes HTML und CSS

Bezahlte Klaviyo-Konto können in Anmeldeformularen benutzerdefiniertes HTML und CSS verwenden. Diese Funktionen sind für Personen gedacht, die sich mit dem Schreiben von Code auskennen. Klaviyo bietet keinen Support für benutzerdefinierten Code, und fehlerhafter Code kann dein Formular beschädigen. Sieh dir dein Formular vor der Veröffentlichung auf Desktop und Mobilgeräten in der Vorschau an und teste es.

• Um das Styling mit CSS zu ändern, gehe zu Styles > Benutzerdefiniertes CSS und aktiviere Benutzerdefiniertes CSS aktivieren. Gib deinen Code in Benutzerdefinierter CSS-Code ein. Erfahre mehr darüber, wie du benutzerdefiniertes CSS in Anmeldeformularen verwendest.
• Um benutzerdefinierte Inhalte hinzuzufügen, ziehe einen HTML -Block aus Blöcke hinzufügen auf dein Formular, und wähle ihn dann aus, um dein Markup einzugeben. Dadurch werden Inhalte innerhalb des Blocks hinzugefügt; der HTML-Code vorhandener Blöcke wird dadurch nicht bearbeitet. Verwende nur unterstützte Tags und Attribute. Erfahre mehr darüber, wie du einen benutzerdefinierten HTML-Block in Anmeldeformularen verwendest.

Tipps und Inspirationen zum Anpassen deines Formulars mit Klaviyos 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.

Deine Styling-Änderungen müssen veröffentlicht werden, bevor sie auf deiner Website angezeigt werden, einschließlich Änderungen an einem Formular, das bereits live ist. Sobald Design und Targeting bereit sind, befolge die Schritte zum Veröffentlichen und Testen deines Anmeldeformulars.

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