So verwendest du benutzerdefinierten HTML-Block in Anmeldeformularen

Übersicht

Erfahre, wie du mit dem benutzerdefinierten HTML-Block dein eigenes Markup zu Klaviyo-Anmeldeformularen hinzufügst, das über die im Formular-Editor verfügbaren Blöcke hinausgeht. Der HTML-Block gibt dir eine feine Kontrolle über Inhalt und Layout – benutzerdefinierte Überschriften, formatierten Text, Listen, Tabellen, Bilder und Links –, damit deine Formulare genau zu deiner Marke und deinem Messaging passen.

Aus Sicherheitsgründen unterstützt der HTML-Block nur einen bestimmten Satz von Tags und Attributen. Alle Elemente außerhalb dieses Satzes werden automatisch entfernt, wenn dein Formular gerendert wird, sodass nicht alle HTML-Elemente, die du schreibst, auf der Website angezeigt werden. Die folgenden Abschnitte listen auf, welche Tags und Attribute unterstützt werden und welche immer entfernt werden.

Bevor du anfängst

Beachte Folgendes, bevor du benutzerdefinierten HTML-Code verwendest:

• Der benutzerdefinierte HTML-Block ist nur bei kostenpflichtigen Klaviyo Abonnements verfügbar. Diese Funktion wird schrittweise eingeführt, sodass du sie in deinem Konto möglicherweise noch nicht siehst.
• Dein HTML wird aus Sicherheitsgründen automatisch bereinigt. Der HTML-Block behält nur unterstützte Tags und Attribute bei und entfernt alle anderen Elemente (einschließlich Skripts und Ereignishandler), wenn dein Formular gerendert wird. Dies schützt deine Website-Besucher vor bösartigem Code. Daher wird ein Teil des von dir geschriebenen HTML-Codes möglicherweise nicht auf der Website angezeigt, wenn er nicht unterstützt wird. Bitte sieh dir die Support-Liste der Tags unten an.
• Der benutzerdefinierte HTML-Block fügt nur neue Inhalte hinzu. Mit dem HTML-Block kannst du eigene Elemente zu einem Formular hinzufügen. Du kannst es nicht verwenden, um den HTML-Code der vorhandenen Formularblöcke zu bearbeiten.
• Der Klaviyo Support kann keine Probleme mit benutzerdefiniertem Code beheben. Probleme, die durch benutzerdefinierten HTML-Code verursacht werden (z. B. fehlerhafte Layouts, Inhalte, die nicht gerendert werden, Styling-Probleme), liegen in deiner Verantwortung, zu debuggen und zu beheben. Wenn ein Formular mit benutzerdefiniertem HTML-Code nicht richtig angezeigt wird oder sich nicht richtig verhält, entferne zuerst den HTML-Block, um zu überprüfen, ob dein Code die Ursache ist.
• Teste vor der Veröffentlichung. Benutzerdefinierter HTML-Code kann sich auf das Formularlayout und die Benutzerfreundlichkeit auswirken. Teste dein Formular vor der Veröffentlichung immer in der Vorschau auf Desktop- und Mobilgeräten.

Füge deinem Formular einen HTML-Block hinzu

So fügst du benutzerdefinierten HTML-Code zu einem Formular hinzu:

1. Navigiere zu Anmeldeformularen und öffne dein Formular im Editor.
2. Suche im Bedienfeld „Blöcke“ nach dem HTML- Block und ziehe ihn auf dein Formular, wo der benutzerdefinierte Inhalt erscheinen soll.

3. Wähle den HTML-Block aus, um seine Einstellungen zu öffnen. In der Seitenleiste des Blocks wird ein Code-Editor angezeigt.

Der HTML-Block funktioniert wie jeder andere Block im Formular-Editor. Du kannst mehrere Blöcke hinzufügen, sie neu positionieren und löschen. Benutzerdefinierter HTML-Code ist in seinem Block enthalten, sodass er sich nicht auf die übrige Struktur deines Formulars auswirkt.

Schreibe deinen HTML-Code

Der Code-Editor beginnt leer. Gib deinen HTML-Code direkt ein und verwende dabei nur unterstützte Tags und Attribute. Nicht unterstützte Tags und Attribute werden automatisch entfernt, wenn dein Formular gerendert wird.

Beispiel

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>

Um dein HTML zu gestalten, füge deine eigenen class -Namen zu Elementen hinzu und sprich sie mit benutzerdefiniertem CSS an. Lege zum Beispiel class="promo-heading" für deine Überschrift fest und gestalte dann .promo-heading im Editor für benutzerdefiniertes CSS. Siehe So verwendest du benutzerdefiniertes CSS in Anmeldeformularen, um zu erfahren, wie du benutzerdefiniertes CSS aktivierst und schreibst.

Unterstützte HTML-Tags und -Attribute

Aus Sicherheitsgründen unterstützt der HTML-Block die folgenden Tags und Attribute. Alle Tags oder Attribute, die sich nicht in dieser Liste befinden, werden entfernt, wenn dein Formular gerendert wird.

Globale Attribute – diese sind für jedes unterstützte Tag zulässig: id, class, dir, lang, roleund aria-* (Barrierefreiheitsattribute).

In den folgenden Tabellen sind zusätzliche Attribute aufgeführt, die für bestimmte Tags zulässig sind und über die oben genannten globalen Attribute hinausgehen.

Text und Formatierung

Überschriften

Listen

Tabellen

Medien und Links

Zugelassene URL-Schemata

Links (href) und Bildquellen (src) kann nur diese URL-Schemata verwenden: http, https, mailto, telund relative Pfade oder #fragment Anker. URLs, die ein anderes Schema verwenden (z. B. javascript: oder data:) entfernt werden. Wenn ein Link target="_blank", rel="noopener noreferrer" wird automatisch angewendet, um den Link zu schützen.

Tags und Attribute aus Sicherheitsgründen entfernt

Um deine Website und deine Besucher*innen zu schützen, entfernt der HTML-Block automatisch alles, was Code ausführen oder dein Formular kapern könnte – eine Angriffsklasse, die als Cross-Site-Scripting (XSS) bezeichnet wird. Die folgenden Elemente werden immer entfernt, auch wenn sie im HTML-Code häufig vorkommen:

• Skripte: <script> und <noscript>
• Ereignishandlerattribute: jedes Attribut, dessen Name beginnt mit on (Beispiel: onclick, onload, onerror, onmouseover)
• Rahmen und Einbettungen: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Vektor- und Markup-Sprach-Tags: <svg>, <math>
• Dokument- und Ressourcen-Tags: <base>, <meta>, <link>und die <style> Tag
• Gefährliche URL-Schemata in Links oder Quellen: javascript:, vbscript:, data:, filesystem:
• Überschreibungsattribute für die Formularübermittlung: formaction, formmethod, formtarget, formenctype
• Legacy- oder veraltete Tags: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Wenn ein Teil deines Codes beim Rendern des Formulars verschwindet, wurde höchstwahrscheinlich ein Tag oder Attribut verwendet, das nicht in der oben aufgeführten unterstützten Liste enthalten ist.

Vorschau und Veröffentlichung

Nachdem du deinen HTML-Code geschrieben hast:

1. Verwende die Editorvorschau, um das Aussehen deines Formulars zu überprüfen.
2. Überprüfe dein Formular sowohl auf dem Desktop als auch auf dem Mobilgerät, da sich benutzerdefinierter HTML-Code 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.

Benutzerdefinierten HTML-Code bearbeiten oder entfernen

Um deinen HTML-Block zu bearbeiten, wähle den HTML-Block aus und aktualisiere den Code in seinen Einstellungen.

Um benutzerdefinierten HTML-Code zu entfernen, wählst du den HTML-Block aus und löschst ihn. Dadurch wird der Block und sein Inhalt aus deinem Formular entfernt. Der Rest deines Formulars ist davon nicht betroffen. Das Entfernen des Blocks ist auch der schnellste Weg, um zu überprüfen, ob ein Anzeigeproblem durch deinen benutzerdefinierten Code verursacht wird.

Fehlerbehebung

Einige HTML-Elemente werden nicht angezeigt.
Der HTML-Block entfernt alle Tags oder Attribute, die beim Rendern deines Formulars nicht unterstützt werden. Vergleiche deinen Code mit den oben unterstützten Tags und Attributen und bestätige, dass du kein Tag oder Attribut verwendest, das aus Sicherheitsgründen entfernt wurde.

Mein Formular sieht kaputt aus.
Überprüfe deinen HTML-Code auf nicht geschlossene oder nicht übereinstimmende Tags und Layoutregeln, die andere Blöcke neu positionieren oder überlappen. Da dein Code in einem eigenen Block lebt, kannst du den HTML-Block löschen, um zu bestätigen, dass er die Ursache hat, ihn dann erneut hinzufügen und kleinere Änderungen testen.

Mein Styling wird nicht auf mein HTML angewendet.
Überprüfe, ob die class -Namen in deinem HTML mit den Selektoren in deinem benutzerdefinierten CSS übereinstimmen, ob das benutzerdefinierte CSS aktiviert ist und ob du die neueste Version des Formulars veröffentlicht hast. Siehe So verwendest du benutzerdefiniertes CSS in Anmeldeformularen.

Ich sehe den HTML-Block nicht.
Benutzerdefinierter HTML-Code 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.

Häufig gestellte Fragen

Kann ich den HTML-Code der vorhandenen Formularblöcke bearbeiten?
Nein. Mit dem HTML-Block kannst du neue benutzerdefinierte Inhalte zu einem Formular hinzufügen. Der HTML-Code der vorhandenen Blöcke deines Formulars wird dadurch nicht geändert.

Warum wurde ein Teil meines Codes entfernt?
Aus Sicherheitsgründen behält der HTML-Block nur unterstützte Tags und Attribute bei und entfernt alle anderen Elemente (z. B. Skripts und Ereignishandler), um zu verhindern, dass bösartiger Code auf deiner Website ausgeführt wird. Aus Sicherheitsgründen siehst du oben die Liste der entfernten Tags und Attribute.

Kann ich eine <script> oder andere JavaScript-Formulare?
Nein. Skripte und Ereignishandlerattribute werden immer entfernt, um deine Website-Besucher zu schützen. Dies kann nicht deaktiviert werden.

Kann ich meinen HTML-Block gestalten?
Ja. Füge deinen HTML-Elementen eigene class -Namen hinzu und sprich sie mit benutzerdefiniertem CSS an. Siehe So verwendest du benutzerdefiniertes CSS in Anmeldeformularen.

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