So verwendest du benutzerdefiniertes CSS in Anmeldeformularen

Erfahre, wie du mit benutzerdefiniertem CSS deine Klaviyo-Anmeldeformulare über den Formular-Editor hinaus gestaltest. Benutzerdefiniertes CSS gibt dir eine präzise Kontrolle über Eigenschaften wie Zeilenhöhe, Buchstabenabstand und Elementabstand, damit deine Formulare genau zu deiner Marke passen.

Bevor du anfängst

Beachte vor der Verwendung von benutzerdefiniertem CSS Folgendes:

• Benutzerdefiniertes CSS ist nur für kostenpflichtige Klaviyo Abonnements verfügbar. Diese Funktion wird schrittweise eingeführt, sodass du sie in deinem Konto möglicherweise noch nicht siehst.
• Der Klaviyo Support kann keine Probleme mit benutzerdefiniertem Code beheben. Probleme, die durch benutzerdefiniertes CSS verursacht werden (z. B. fehlerhafte Layouts, versteckte Felder, Rendering-Probleme), liegen in deiner Verantwortung, zu debuggen und zu beheben. Wenn ein Formular mit benutzerdefiniertem CSS nicht richtig angezeigt wird oder sich nicht richtig verhält, deaktiviere zuerst benutzerdefiniertes CSS, um zu überprüfen, ob dein Code die Ursache ist.
• Benutzerdefiniertes CSS wendet nur das Styling an. Mit dieser Funktion kannst du den HTML-Code deines Formulars oder seiner Blöcke nicht hinzufügen oder bearbeiten.
• Teste vor der Veröffentlichung. Benutzerdefiniertes CSS kann die Benutzerfreundlichkeit von Formularen beeinträchtigen (z. B. kann das versehentliche Ausblenden eines Pflichtfelds die Registrierung verhindern). Teste dein Formular immer in der Vorschau, bevor du es veröffentlichst.

Benutzerdefiniertes CSS aktivieren

So aktivierst du benutzerdefiniertes CSS in einem Formular:

1. Navigiere zu Anmeldeformularen und öffne dein Formular im Editor.
2. Klicke auf die Registerkarte Stile.
3. Scrolle zum Abschnitt Benutzerdefiniertes CSS am unteren Rand des Panels.
4. Aktiviere benutzerdefiniertes CSS -Code.
5. Überprüfe die Warnmeldung. Wenn du benutzerdefiniertes CSS aktivierst, erkennst du an, dass Klaviyo Support bei Problemen, die durch deinen benutzerdefinierten Code verursacht werden, nicht helfen kann.

Nach der Aktivierung wird ein CSS-Editor angezeigt, in dem du benutzerdefiniertes CSS für dein Formular schreiben kannst. Benutzerdefiniertes CSS ist pro Formular aktiviert. Das Aktivieren für ein Formular hat keine Auswirkungen auf deine anderen Formulare.

Lege Klassennamen für Formularkomponenten fest

Wenn benutzerdefiniertes CSS aktiviert ist, erhält jede Komponente in deinem Formular ein CSS-Klassenfeld, das unten in der Seitenleiste der Komponente sichtbar ist, wenn du sie auswählst. Der Klassenname entspricht standardmäßig dem Namen der Komponente. Du kannst ihn mit deinem eigenen überschreiben, um den Zugriff zu erleichtern.

Verwende diese Klassennamen als Selektoren in deinem CSS. Das Festlegen deiner eigenen Klassennamen ist der zuverlässigste Weg, um Formularelemente anzusprechen, da sie stabil und lesbar bleiben.

Wenn du später benutzerdefiniertes CSS deaktivierst, werden deine Klassennamen beibehalten und wieder angezeigt, wenn du es erneut aktivierst.

Schreibe dein CSS

Der CSS-Editor beginnt leer – er zeigt nicht die aktuellen Stile deines Formulars an, da diese generiert werden, wenn das Formular auf deiner Website gerendert wird. Um Elemente anzusprechen, verwende einen der folgenden Ansätze:

• Verwende deine Klassennamen. Verweise auf die Klassennamen, die du in deinen Formularkomponenten festgelegt hast (empfohlen).
• Sieh dir dein Live-Formular an. Öffne dein veröffentlichtes Formular auf deiner Website und verwende dann die Entwicklertools deines Browsers (Rechtsklick > Untersuchen), um die Selektoren zu identifizieren, die du ansprechen möchtest.

Vermeide es, automatisch generierte Klassennamen von Klaviyo gezielt zu verwenden. Diese sind intern, können gehashte Werte enthalten und können sich ohne Vorankündigung ändern – was dein CSS stumm unterbrechen würde. Verwende stattdessen deine eigenen Klassennamen.

Beispiel

Angenommen, du legst den Klassennamen form-headline für deinen Überschriftenblock und email-input für deinen E-Mail-Eingabeblock fest:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Benutzerdefiniertes CSS schaltet auch Stile frei, die im Editor nicht verfügbar sind, wie z. B. Text von rechts nach links:

.form-headline {
  direction: rtl;
  text-align: right;
}

Vorschau und Veröffentlichung

Nachdem du dein CSS geschrieben hast:

1. Verwende die Editorvorschau, um das Aussehen deines Formulars zu überprüfen.
2. Verifiziere dein Formular sowohl auf dem Desktop als auch auf dem Mobilgerät, da sich benutzerdefiniertes CSS unterschiedlich auswirken kann.
3. Veröffentliche dein Formular auf einer nicht öffentlichen Seite, um zu überprüfen, wie es auf der Website angezeigt wird.
4. Übermittle eine Testregistrierung in deinem veröffentlichten Formular, um zu bestätigen, dass alle Eingaben und Schaltflächen noch funktionieren.
5. Veröffentliche dein Formular öffentlich.

Benutzerdefiniertes CSS deaktivieren

Um das benutzerdefinierte Styling zu entfernen, musst du das benutzerdefinierte CSS auf der Registerkarte Stile deaktivieren. Dein Formular kehrt sofort zum Standard-Editor zurück. Dies ist auch der schnellste Weg, um zu überprüfen, ob ein Anzeigeproblem durch deinen benutzerdefinierten Code verursacht wird. Dein bisheriger CSS-Code wird für gespeichert, wenn du dich entscheidest, Custom CSS wieder zu aktivieren.

Fehlerbehebung

Mein CSS wird nicht angewendet.
Vergewissere dich, dass benutzerdefiniertes CSS aktiviert ist, dass deine Selektoren mit den Klassennamen übereinstimmen, die in deinen Komponenten festgelegt sind, und dass du die neueste Version des Formulars veröffentlicht hast. Stile auf deiner Website können auch mit Formularstilen in Konflikt stehen oder diese überschreiben. Überprüfe mithilfe der Entwicklertools deines Browsers, welche Regeln erfolgreich sind.

Mein Formular sieht kaputt aus oder hat aufgehört, Anmeldungen zu sammeln.
Deaktiviere benutzerdefiniertes CSS, um die Ursache zu bestätigen, und überprüfe dann deinen Code. Prüfe vor allem nach Regeln, die Eingaben und Schaltflächen ausblenden oder neu positionieren.

Der Abschnitt Custom CSS wird nicht angezeigt.
Benutzerdefiniertes CSS ist nur bei kostenpflichtigen Abonnements verfügbar und wird schrittweise eingeführt. Wenn du ein kostenpflichtiges Abonnement hast und es noch nicht siehst, schau bald wieder vorbei.

Typografiestile in einer benutzerdefinierten Klasse werden nicht angewendet.

Wenn Layoutstile wie margin funktionieren, aber Textstile wie letter-spacing oder line-height nicht, ist die benutzerdefinierte Klasse wahrscheinlich an den äußeren Wrapper angehängt, während der sichtbare Text in einem verschachtelten untergeordneten Element gerendert wird. Richte in diesem Fall auch die untergeordneten Elemente aus, zum Beispiel: .form-headline, .form-headline * { ... }.

Häufig gestellte Fragen

Kann ich meinem Formular benutzerdefinierten HTML-Code hinzufügen?
Nein. Du kannst keine HTML-Elemente zu einem Formular hinzufügen oder den HTML-Code vorhandener Blöcke bearbeiten. Benutzerdefiniertes CSS ändert nur den Stil der vorhandenen Formularkomponenten.

Funktioniert benutzerdefiniertes CSS auf allen meinen Formularen?
Benutzerdefiniertes CSS ist für Formulare, die auf deiner Website angezeigt werden, pro Formular aktiviert. Aktiviere sie einzeln in jedem Formular, das du anpassen möchtest.

Hilft mir der Klaviyo Support beim Verfassen oder Korrigieren meines CSS?
Nein. Klaviyo Support kann keinen benutzerdefinierten Code schreiben, überprüfen oder Fehler beheben. Wenn ein Formular mit benutzerdefiniertem CSS ein Problem hat, wirst du aufgefordert, benutzerdefiniertes CSS zu deaktivieren, um es auszuschließen, bevor der Support weitere Untersuchungen durchführen kann.

Was passiert mit meinem CSS, wenn ich die Funktion deaktiviere?
Dein Formular wird wieder im Standardstil angezeigt. Die Namen deiner Komponentenklassen werden gespeichert und wiederhergestellt, wenn du benutzerdefiniertes CSS erneut aktivierst.