Så här använder du anpassade HTML-block i registreringsformulär

Du kommer att lära dig

Lär dig hur du använder det anpassade HTML-blocket för att lägga till din egen uppmärkning i Klaviyo-registreringsformulär, utöver de block som finns i formulärredigeraren. HTML-blocket ger dig detaljerad kontroll över innehåll och layout – anpassade rubriker, formaterad text, listor, tabeller, bilder och länkar – så att dina formulär kan matcha ditt varumärke och ditt budskap exakt.

Av säkerhetsskäl stöder HTML-blocket bara en specifik uppsättning etiketter och attribut. Allt utanför den uppsättningen tas bort automatiskt när ditt formulär renderas, så all HTML du skriver visas inte på webbplatsen. I avsnitten nedan listas vilka etiketter och attribut som stöds och vilka som alltid tas bort.

Innan du börjar

Observera följande innan du använder anpassad HTML:

• Anpassat HTML-block är endast tillgängligt i betalda Klaviyo-planer. Den här funktionen rullas ut gradvis, så du kanske inte ser den i ditt konto än.
• Din HTML rensas automatiskt av säkerhetsskäl. HTML-blocket behåller bara etiketter och attribut som stöds och tar bort allt annat – inklusive skript och händelsehanterare – när ditt formulär renderas. Det här skyddar dina webbplatsbesökare från skadlig kod. Som ett resultat kanske viss HTML som du skriver inte visas på webbplatsen om den inte stöds. Se listan över etiketter som stöds nedan.
• Anpassat HTML-block lägger endast till nytt innehåll. HTML-blocket gör att du kan lägga till dina egna element i ett formulär. Du kan inte använda det för att redigera HTML-koden i formulärets befintliga block.
• Klaviyo Support kan inte felsöka anpassad kod. Problem som orsakas av anpassad HTML (t.ex. trasiga layouter, innehåll som inte renderas, stilproblem) är ditt ansvar att felsöka och åtgärda. Om ett formulär med anpassad HTML inte visas eller fungerar korrekt tar du bort HTML-blocket först för att kontrollera om din kod är orsaken.
• Testa innan du publicerar. Anpassad HTML kan påverka formulärets layout och användbarhet. Förhandsgranska och testa alltid formuläret både på dator och mobil innan du publicerar det.

Lägg till ett HTML-block i ditt formulär

Så här lägger du till anpassad HTML i ett formulär:

1. Gå till Registreringsformulär och öppna ditt formulär i redigeraren.
2. I blockpanelen hittar du HTML -blocket och drar det till ditt formulär där du vill att det anpassade innehållet ska visas.

3. Välj HTML-blocket för att öppna dess inställningar. En kodredigerare visas i blockets sidofält.

HTML-blocket fungerar som vilket annat block som helst i formulärredigeraren – du kan lägga till fler än ett, flytta dem och ta bort dem. Anpassad HTML finns i sitt eget block, så den påverkar inte resten av formulärets struktur.

Skriv din HTML

Kodredigeraren startar tom. Ange din HTML direkt och använd endast etiketter och attribut som stöds. Etiketter och attribut som inte stöds tas bort automatiskt när ditt formulär renderas.

Exempel

<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>

Om du vill formge din HTML lägger du till egna class -namn på element och riktar in dig på dem med anpassad CSS. Till exempel kan du ange class="promo-heading" på din rubrik och sedan formge .promo-heading i redigeraren för anpassad CSS. Se Så använder du anpassad CSS i registreringsformulär för information om hur du aktiverar och skriver anpassad CSS.

HTML-etiketter och -attribut som stöds

Av säkerhetsskäl har HTML-blocket stöd för följande etiketter och attribut. Alla etiketter eller attribut som inte finns med i den här listan tas bort när ditt formulär renderas.

Globala attribut – dessa är tillåtna på varje etikett som stöds: id, class, dir, lang, role och aria-* (tillgänglighetsattribut).

Tabellerna nedan listar ytterligare attribut som tillåts på specifika etiketter, utöver de globala attributen ovan.

Text och formatering

Rubriker

Listor

Tabeller

Media och länkar

Tillåtna URL-scheman

Länkar (href) och bildkällor (src) får bara använda följande URL-scheman: http, https, mailto, tel samt relativa sökvägar eller #fragment -ankare. URL:er som använder något annat schema (till exempel javascript: eller data:) tas bort. När en länk använder target="_blank" tillämpas rel="noopener noreferrer" automatiskt för att hålla länken säker.

Etiketter och attribut som tas bort av säkerhetsskäl

För att skydda din webbplats och dina besökare tar HTML-blocket automatiskt bort allt som skulle kunna köra kod eller kapa ditt formulär – en typ av attack som kallas cross-site scripting (XSS). Följande tas alltid bort, även om det är vanligt i HTML:

• Skript: <script> och <noscript>
• Attribut för händelsehanterare: alla attribut vars namn börjar med on (till exempel onclick, onload, onerror, onmouseover)
• Ramar och inbäddningar: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Vektor- och uppmärkningsspråksetiketter: <svg>, <math>
• Dokument- och resurs-etiketter: <base>, <meta>, <link> och etiketten <style>
• Farliga URL-scheman i länkar eller källor: javascript:, vbscript:, data:, filesystem:
• Åsidosättningsattribut för formulärinskick: formaction, formmethod, formtarget, formenctype
• Äldre eller utfasade etiketter: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Om en del av din kod försvinner när formuläret renderas beror det troligen på att den använde en etikett eller ett attribut som inte finns med i listan över stöd som anges ovan.

Förhandsgranska och publicera

När du har skrivit din HTML:

1. Använd förhandsgranskningen i redigeraren för att kontrollera hur ditt formulär ser ut.
2. Verifiera ditt formulär på både dator och mobil eftersom anpassad HTML kan påverka dem olika.
3. Publicera ditt formulär på en sida som inte är offentlig för att kontrollera hur det visas på webbplatsen.
4. Skicka in en testregistrering i ditt publicerade formulär för att bekräfta att alla inmatningsfält och knappar fortfarande fungerar.
5. Publicera formuläret offentligt.

Redigera eller ta bort anpassad HTML

Om du vill redigera din HTML väljer du HTML-blocket och uppdaterar koden i dess inställningar.

Om du vill ta bort anpassad HTML markerar du HTML-blocket och tar bort det. Det tar bort blocket och dess innehåll från ditt formulär; resten av formuläret påverkas inte. Att ta bort blocket är också det snabbaste sättet att kontrollera om ett visningsproblem orsakas av din anpassade kod.

Felsökning

En del av min HTML visas inte.
HTML-blocket tar bort alla etiketter eller attribut som inte stöds när ditt formulär renderas. Kontrollera din kod mot de etiketter och attribut som stöds ovan och bekräfta att du inte använder en etikett eller ett attribut som tas bort av säkerhetsskäl.

Mitt formulär ser trasigt ut.
Granska din HTML efter etiketter som inte har stängts eller inte matchar, samt layoutregler som flyttar eller gör att andra block överlappar varandra. Eftersom din kod finns i ett eget block kan du ta bort HTML-blocket för att bekräfta att det är orsaken, lägga till det igen och sedan testa mindre ändringar.

Min formatering tillämpas inte på min HTML.
Bekräfta att class -namnen i din HTML matchar selektorerna i din anpassade CSS, att anpassad CSS är aktiverat och att du har publicerat den senaste versionen av formuläret. Se Så här använder du anpassad CSS i registreringsformulär.

Jag ser inte HTML-blocket.
Anpassad HTML är bara tillgängligt på betalplaner och rullas ut gradvis. Om du har en betalplan och inte ser det ännu kan du kolla igen snart.

Vanliga frågor

Kan jag redigera HTML-koden för mitt formulärs befintliga block?
Nej. Med HTML-blocket kan du lägga till nytt anpassat innehåll i ett formulär. Det ändrar inte HTML-koden för ditt formulärs befintliga block.

Varför togs en del av min kod bort?
Av säkerhetsskäl behåller HTML-blocket bara etiketter och attribut som stöds och tar bort allt annat – till exempel skript och händelsehanterare – för att förhindra att skadlig kod körs på din webbplats. Se listan över etiketter och attribut som tagits bort av säkerhetsskäl ovan.

Kan jag lägga till en <script> eller annan JavaScript i mitt formulär?
Nej. Skript och attribut för händelsehanterare tas alltid bort för att skydda dina webbplatsbesökare. Det här går inte att stänga av.

Kan jag formge mitt HTML-block?
Ja. Lägg till dina egna class -namn i dina HTML-element och rikta in dem med anpassad CSS. Se Så här använder du anpassad CSS i registreringsformulär.

Hjälper Klaviyo Support mig att skriva eller fixa min HTML?
Nej. Klaviyo Support kan inte skriva, granska eller felsöka anpassad kod. Om ett formulär med anpassad HTML har ett problem kommer du att bli ombedd att ta bort HTML-blocket för att utesluta det innan Support kan undersöka vidare.