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 eine bestimmte Auswahl an Tags und Attributen. Nicht unterstütztes HTML verhindert, dass deine Änderungen gespeichert werden, und der Editor zeigt einen Fehler an, der erklärt, was du beheben musst. In den folgenden Abschnitten sind unterstützte Tags und Attribute sowie gängige Beispiele aufgeführt, die nicht zulässig sind.

Bevor du anfängst

Beachte Folgendes, bevor du benutzerdefinierten HTML-Code verwendest:

• Der benutzerdefinierte HTML-Block ist nur in kostenpflichtigen Klaviyo-Plänen verfügbar.
• Dein HTML wird vor dem Speichern auf Sicherheit geprüft. Nicht unterstützte Tags und Attribute, einschließlich Skripten und Event-Handlern, verhindern das Speichern deiner Änderungen. Diese Einschränkungen schützen die Besucher*innen deiner Website vor schädlichem Code. Prüfe unten die unterstützten Tags und Attribute und behebe alle Fehler, die im Editor angezeigt werden.
• 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. Wähle Blöcke hinzufügen, suche den HTML -Block und ziehe ihn auf dein Formular an die Stelle, an der 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

Ersetze das Platzhalter-HTML im Code-Editor durch dein eigenes HTML und verwende dabei nur unterstützte Tags und Attribute. Änderungen werden automatisch gespeichert. Wenn der Editor einen Fehler anzeigt, behebe die nicht unterstützten Inhalte, bevor du fortfährst.

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" rel="noopener noreferrer">See terms and conditions</a></p>

Inline- style -Attribute und <style> -Tags werden nicht unterstützt. Um dein HTML zu gestalten, füge Elementen deine eigenen class -Namen 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. Unter So verwendest du benutzerdefiniertes CSS in Anmeldeformularen erfährst du, 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. Jeder Tag oder jedes Attribut, das nicht auf dieser Liste steht, verhindert, dass deine Änderungen gespeichert werden.

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) dürfen nur diese URL-Schemas verwenden: http, https, mailto, tel sowie relative Pfade oder #fragment -Anker. URLs, die ein anderes Schema verwenden (z. B. javascript: oder data:), verhindern, dass deine Änderungen gespeichert werden. Wenn ein Link target="_blank" verwendet, füge rel="noopener noreferrer" hinzu, damit der Link sicher bleibt.

Nicht unterstützte HTML-Tags und -Attribute

Um deine Website-Besucher*innen vor schädlichem Code zu schützen, weist der HTML-Block beim Speichern nicht unterstützte Tags, Attribute und URLs zurück. Folgendes ist nicht erlaubt, auch wenn es in HTML üblich ist:

• Skripte: <script> und <noscript>
• Formularsteuerelemente: <form>, <input>, <button>, <select> und <textarea>. Verwende die Standard-Eingabe- und Button-Blöcke des Editors, um Anmeldungen zu erfassen.
• 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 deine Änderungen nicht gespeichert werden können, verwende die Fehlermeldung, um das nicht unterstützte Tag, Attribut oder die nicht unterstützte URL zu finden und zu entfernen oder zu ersetzen. Prüfe deinen Code anhand der oben aufgeführten unterstützten Liste, bevor du fortfährst.

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. Wenn du ein Formular mit URL-Targeting verwendest, schränke es vor der Veröffentlichung auf deine Testseite ein. Öffne Targeting und Anzeigeverhalten > Targeting. Aktiviere unter URLs die Option Nur auf bestimmten URLs anzeigen, wähle Genau übereinstimmend aus, und ersetze alle vorhandenen zulässigen URLs durch die vollständige URL der Testseite.
4. Veröffentliche dein Formular auf einer nicht öffentlich zugänglichen Seite, um zu prüfen, wie es auf deiner Website angezeigt wird. Klicke auf Veröffentlichen oder planen, wähle Jetzt veröffentlichen aus und klicke dann auf Jetzt veröffentlichen. Behebe alle blockierenden Warnungen, bevor du veröffentlichst.
5. Übermittle eine Testregistrierung in deinem veröffentlichten Formular, um zu bestätigen, dass alle Eingaben und Schaltflächen noch funktionieren.
6. Stelle deine beabsichtigten Targeting-Einstellungen wieder her und verwende dann Veröffentlichen oder planen und Jetzt veröffentlichen, um dein Formular für deine Zielgruppe zu veröffentlichen.

Benutzerdefinierten HTML-Code bearbeiten oder entfernen

Um dein HTML zu bearbeiten, wähle den HTML-Block aus und aktualisiere den Code in seinen Einstellungen. Sieh dir eine Vorschau deiner Änderungen an und veröffentliche sie dann, um das Live-Formular zu aktualisieren.

Um benutzerdefiniertes HTML zu entfernen, wähle den HTML-Block aus und lösche ihn. Dadurch werden der Block und sein Inhalt aus deinem Formular entfernt; der Rest deines Formulars bleibt unverändert. Das Entfernen des Blocks ist auch der schnellste Weg, um zu prüfen, ob ein Anzeigeproblem durch deinen benutzerdefinierten Code verursacht wird. Veröffentliche die Änderung, um den Block aus dem Live-Formular zu entfernen.

Fehlerbehebung

Meine HTML-Änderungen werden nicht gespeichert.
Lies den Fehler in den Einstellungen des HTML-Blocks. Entferne den nicht unterstützten Tag, das Attribut oder die URL oder ersetze ihn bzw. sie, und bestätige dann, dass der Fehler verschwindet. Wähle in der Fehlermeldung Mehr über zulässige Tags erfahren aus, um die Liste der unterstützten Tags zu prüfen.

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.
Benutzerdefiniertes HTML ist in kostenpflichtigen Klaviyo-Plänen verfügbar. Prüfe, ob dein Konto über einen kostenpflichtigen Tarif verfügt, und suche dann im Formular-Editor unter Blöcke hinzufügen nach HTML.

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 kann ich nicht unterstütztes HTML speichern?
Klaviyo lehnt nicht unterstütztes HTML ab, um deine Website-Besucher*innen vor schädlichem Code zu schützen. Entferne nicht unterstützte Tags und Attribute, wie z. B. Skripte und Ereignishandler, und ersetze unsichere URLs, bevor du fortfährst. Sieh dir oben die Beispiele für nicht unterstütztes HTML an.

Kann ich meinem Formular ein <script> oder anderes JavaScript hinzufügen?
Nein. Skripte und Event-Handler-Attribute sind nicht zulässig, und HTML, das sie enthält, kann nicht gespeichert werden. Diese Einschränkung schützt deine Website-Besucher*innen und 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.