Aangepast HTML-blok gebruiken in aanmeldingsformulieren

Wat je leert

Ontdek hoe je het aangepaste HTML-blok gebruikt om je eigen markup toe te voegen aan Klaviyo-aanmeldingsformulier, naast de blokken die beschikbaar zijn in de formuliereditor. Met het HTML-blok heb je gedetailleerde controle over content en lay-out – aangepaste koppen, opgemaakte tekst, lijsten, tabellen, afbeeldingen en links – zodat je formulieren precies passen bij je merk en boodschap.

Voor de veiligheid ondersteunt het HTML-blok alleen een specifieke set van tag en kenmerken. Alles buiten die set wordt automatisch verwijderd wanneer je formulier wordt weergegeven, dus niet alle HTML die je schrijft verschijnt op je site. In de onderstaande secties staat welke tag en kenmerken worden ondersteund en welke altijd worden verwijderd.

Voordat je van start gaat

Let op het volgende voordat je aangepaste HTML gebruikt:

• Aangepast HTML-blok is alleen beschikbaar in betaalde Klaviyo-abonnementen. Deze functie wordt geleidelijk uitgerold, dus het kan zijn dat je deze nog niet in je account ziet.
• Je HTML wordt automatisch opgeschoond voor de beveiliging. Het HTML-blok behoudt alleen ondersteunde tags en kenmerken en verwijdert de rest — inclusief scripts en event handlers — wanneer je formulier wordt weergegeven. Dit beschermt je sitebezoekers tegen kwaadaardige code. Als gevolg hiervan wordt sommige HTML die je schrijft mogelijk niet op je site weergegeven als deze niet wordt ondersteund. Bekijk hieronder de ondersteuningslijst met tags.
• Aangepast HTML-blok voegt alleen nieuwe content toe. Met het HTML-blok kun je je eigen elementen toevoegen aan een formulier. Je kunt het niet gebruiken om de HTML van de bestaande blokken van je formulier te bewerken.
• Klaviyo Support kan geen aangepaste code troubleshooten. Problemen die worden veroorzaakt door aangepaste HTML (bijv. kapotte lay-outs, content die niet wordt weergegeven, stylingproblemen) moet je zelf debuggen en oplossen. Als een formulier met aangepaste HTML niet goed wordt weergegeven of zich niet correct gedraagt, verwijder dan eerst het HTML-blok om te controleren of je code de oorzaak is.
• Test voordat je publiceert. Aangepaste HTML kan de lay-out en bruikbaarheid van formulieren beïnvloeden. Bekijk een voorbeeld van je formulier en test het altijd op zowel desktop als mobiel voordat je publiceert.

Een HTML-blok aan je formulier toevoegen

Zo voeg je aangepaste HTML toe aan een formulier:

1. Ga naar Aanmeldingsformulieren en open je formulier in de editor.
2. Zoek in het blokkenpaneel het blok HTML en sleep het naar je formulier waar je de aangepaste content wilt laten verschijnen.

3. Selecteer het HTML-blok om de instellingen te openen. Er verschijnt een code-editor in de zijbalk van het blok.

Het HTML-blok werkt net als elk ander blok in de formuliereneditor – je kunt er meer dan één toevoegen, ze verplaatsen en ze verwijderen. Aangepaste HTML staat in het eigen blok, dus het beïnvloedt de rest van de structuur van je formulier niet.

Schrijf je HTML

De code-editor is in het begin leeg. Voer je HTML rechtstreeks in en gebruik alleen ondersteunde tags en attributen. Niet-ondersteunde tags en attributen worden automatisch verwijderd wanneer je formulier wordt gerenderd.

Voorbeeld

<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 je HTML op te maken, voeg je je eigen class -namen toe aan elementen en richt je ze met aangepaste CSS. Stel bijvoorbeeld class="promo-heading" in op je kop, en geef daarna .promo-heading opmaak in de aangepaste CSS-editor. Bekijk Aangepaste CSS gebruiken in aanmeldingsformulieren voor informatie over het inschakelen en schrijven van aangepaste CSS.

Ondersteunde HTML-tags en -attributen

Om veiligheidsredenen ondersteunt het HTML-blok de volgende tags en kenmerken. Elke tag of elk kenmerk dat niet op deze lijst staat, wordt verwijderd wanneer je formulier wordt weergegeven.

Algemene attributen — deze zijn toegestaan bij elke ondersteunde tag: id, class, dir, lang, role en aria-* (toegankelijkheidsattributen).

De tabellen hieronder geven een overzicht van aanvullende kenmerken die zijn toegestaan voor specifieke tags, naast de globale kenmerken hierboven.

Tekst en opmaak

Kopteksten

Lijsten

Tabellen

Media en links

Toegestane URL-schema's

Links (href) en afbeeldingsbronnen (src) mogen alleen deze URL-schema's gebruiken: http, https, mailto, tel, en relatieve paden of #fragment -ankers. URL's met een ander schema (zoals javascript: of data:) worden verwijderd. Wanneer een link target="_blank" gebruikt, wordt rel="noopener noreferrer" automatisch toegepast om de link beveiligd te houden.

tag en kenmerken verwijderd voor de beveiliging

Om je site en je bezoekers te beschermen, verwijdert het HTML-blok automatisch alles wat code kan uitvoeren of je formulier kan kapen — een type aanval dat bekendstaat als cross-site scripting (XSS). Het volgende wordt altijd verwijderd, ook al komt het vaak voor in HTML:

• Scripts: <script> en <noscript>
• Attributen van eventhandler: elk attribuut waarvan de naam begint met on (bijvoorbeeld onclick, onload, onerror, onmouseover)
• Frames en insluitingen: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Vector- en opmaaktaaltags: <svg>, <math>
• Document- en resourcetags: <base>, <meta>, <link> en de tag <style>
• Gevaarlijke URL-schema's in links of bronnen: javascript:, vbscript:, data:, filesystem:
• Overschrijvingskenmerken voor formulierinzending: formaction, formmethod, formtarget, formenctype
• Verouderde of niet meer ondersteunde tags: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Als een deel van je code verdwijnt wanneer het formulier wordt weergegeven, gebruikte het waarschijnlijk een tag of kenmerk die niet op de bovenstaande ondersteunde lijst staat.

Voorbeeld bekijken en publiceren

Nadat je je HTML hebt geschreven:

1. Gebruik de editorpreview om te controleren hoe je formulier eruitziet.
2. Controleer je formulier op zowel desktop als mobiel, omdat aangepaste HTML beide verschillend kan beïnvloeden.
3. Publiceer je formulier op een niet-openbaar toegankelijke pagina om te controleren hoe het op je site wordt weergegeven.
4. Stuur een testinschrijving in op je gepubliceerde formulier om te controleren of alle invoervelden en knoppen nog werken.
5. Publiceer je formulier openbaar.

Bewerk of verwijder aangepaste HTML

Als je je HTML wilt bewerken, selecteer je het HTML-blok en werk je de code bij in de instellingen daarvan.

Als je aangepaste HTML wilt verwijderen, selecteer je het HTML-blok en verwijder je het. Hiermee verwijder je het blok en de inhoud ervan uit je formulier; de rest van je formulier blijft ongewijzigd. Het blok verwijderen is ook de snelste manier om te controleren of een weergaveprobleem wordt veroorzaakt door je aangepaste code.

Probleemoplossing

Een deel van mijn HTML wordt niet weergegeven.
Het HTML-blok verwijdert elke tag of elk attribuut dat niet wordt ondersteund wanneer je formulier wordt weergegeven. Controleer je code aan de hand van de ondersteunde tags en attributen hierboven en bevestig dat je geen tag of attribuut gebruikt dat om veiligheidsredenen wordt verwijderd.

Mijn formulier ziet er kapot uit.
Controleer je HTML op niet-afgesloten of niet-overeenkomende tags en op lay-outregels die andere blokken verplaatsen of overlappen. Omdat je code in een eigen blok staat, kun je het HTML-blok verwijderen om te bevestigen dat dit de oorzaak is. Voeg het daarna opnieuw toe en test kleinere wijzigingen.

Mijn styling wordt niet toegepast op mijn HTML.
Bevestig dat de class -namen in je HTML overeenkomen met de selectors in je aangepaste CSS, dat aangepaste CSS is ingeschakeld en dat je de nieuwste versie van het formulier hebt gepubliceerd. Bekijk Aangepaste CSS gebruiken in aanmeldingsformulieren.

Ik zie het HTML-blok niet.
Aangepaste HTML is alleen beschikbaar bij betaalde abonnementen en wordt geleidelijk uitgerold. Als je een betaald abonnement hebt en het nog niet ziet, kom dan snel terug.

Veelgestelde vragen

Kan ik de HTML van de bestaande blokken van mijn formulier bewerken?
Nee. Met het HTML-blok kun je nieuwe aangepaste content aan een formulier toevoegen. Hiermee wijzig je de HTML van de bestaande blokken van je formulier niet.

Waarom is een deel van mijn code verwijderd?
Om veiligheidsredenen bewaart het HTML-blok alleen ondersteunde tags en kenmerken, en verwijdert het de rest – zoals scripts en event handlers – om te voorkomen dat er kwaadaardige code op je site wordt uitgevoerd. Bekijk hierboven de lijst met tags en kenmerken die om veiligheidsredenen zijn verwijderd.

Kan ik een <script> of andere JavaScript aan mijn formulier toevoegen?
Nee. Scripts en kenmerken van gebeurtenisafhandelaars worden altijd verwijderd om je sitebezoekers te beschermen. Dit kan niet worden uitgeschakeld.

Kan ik mijn HTML-blok opmaken?
Ja. Voeg je eigen class -namen toe aan je HTML-elementen en target ze met aangepaste CSS. Zie Aangepaste CSS gebruiken in aanmeldingsformulieren.

Helpt Klaviyo Support me met het schrijven of oplossen van mijn HTML?
Nee. Klaviyo Support kan geen aangepaste code schrijven, beoordelen of problemen ermee oplossen. Als een formulier met aangepaste HTML een probleem heeft, wordt je gevraagd het HTML-blok te verwijderen om het uit te sluiten voordat Support verder onderzoek kan doen.