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 beveiliging ondersteunt het HTML-blok alleen een specifieke set tags en kenmerken. Niet-ondersteunde HTML zorgt ervoor dat je wijzigingen niet worden opgeslagen en de editor toont een foutmelding met wat je moet aanpassen. In de onderstaande secties vind je een lijst met ondersteunde tags en kenmerken en veelvoorkomende voorbeelden die niet zijn toegestaan.

Voordat je van start gaat

Let op het volgende voordat je aangepaste HTML gebruikt:

• Aangepast HTML-blok is alleen beschikbaar bij betaalde Klaviyo-abonnementen.
• Je HTML wordt om veiligheidsredenen gecontroleerd voordat het wordt opgeslagen. Niet-ondersteunde tags en kenmerken, waaronder scripts en event handlers, zorgen ervoor dat je wijzigingen niet worden opgeslagen. Deze beperkingen beschermen bezoekers van je site tegen schadelijke code. Controleer hieronder de ondersteunde tags en kenmerken en los eventuele fouten op die in de editor worden weergegeven.
• 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. Selecteer Blokken toevoegen, zoek het HTML -blok en sleep het naar je formulier op de plek 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

Vervang de tijdelijke HTML in de code-editor door je eigen HTML en gebruik alleen ondersteunde tags en attributen. Wijzigingen worden automatisch opgeslagen. Als de editor een foutmelding toont, los je de niet-ondersteunde content op voordat je doorgaat.

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

Inline style -attributen en <style> tags worden niet ondersteund. Als je je HTML wilt stylen, voeg je je eigen class -namen toe aan elementen en target je ze met aangepaste CSS. Stel bijvoorbeeld class="promo-heading" in op je kop, en style vervolgens .promo-heading in de aangepaste CSS-editor. Bekijk Hoe je aangepaste CSS gebruikt in aanmeldingsformulieren om te zien hoe je aangepaste CSS inschakelt en schrijft.

Ondersteunde HTML-tags en -attributen

Voor de veiligheid ondersteunt het HTML-blok de volgende tags en kenmerken. Elke tag of elk kenmerk dat niet op deze lijst staat, zorgt ervoor dat je wijzigingen niet worden opgeslagen.

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 die een ander schema gebruiken (zoals javascript: of data:) voorkomen dat je wijzigingen worden opgeslagen. Wanneer een link target="_blank" gebruikt, voeg je rel="noopener noreferrer" toe om de link veilig te houden.

Niet-ondersteunde HTML-tags en -attributen

Om je sitebezoekers te beschermen tegen schadelijke code, weigert het HTML-blok niet-ondersteunde tags, kenmerken en URL's bij het opslaan. Het volgende is niet toegestaan, ook al komt het vaak voor in HTML:

• Scripts: <script> en <noscript>
• Formulierbesturingselementen: <form>, <input>, <button>, <select> en <textarea>. Gebruik de standaard invoer- en knopblokken van de editor om aanmeldingen te verzamelen.
• 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 je wijzigingen niet kunnen worden opgeslagen, gebruik dan de foutmelding om de niet-ondersteunde tag, het kenmerk of de URL te vinden en te verwijderen of te vervangen. Controleer je code aan de hand van de ondersteunde lijst hierboven voordat je doorgaat.

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. Als je een formulier met URL-targeting gebruikt, beperk het dan tot je testpagina voordat je het publiceert. Open Targeting en weergavegedrag > Targeting. Zet onder URL's Alleen weergeven op bepaalde URL's aan, kies Exacte overeenkomst en vervang alle bestaande toegestane URL's door de volledige URL van de testpagina.
4. Publiceer je formulier op een niet-openbare pagina om te controleren hoe het op je site wordt weergegeven. Klik op Publiceren of plannen, selecteer Nu publiceren en klik vervolgens op Nu publiceren. Los alle blokkerende waarschuwingen op voordat je publiceert.
5. Stuur een testinschrijving in op je gepubliceerde formulier om te controleren of alle invoervelden en knoppen nog werken.
6. Herstel je bedoelde targetinginistellingen en gebruik vervolgens Publiceren of plannen en Nu publiceren om je formulier te publiceren voor je doelgroep.

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. Bekijk een voorbeeld van je wijzigingen en publiceer ze daarna om het live formulier bij te werken.

Om aangepaste HTML te 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. Publiceer de wijziging om het blok te verwijderen uit het live formulier.

Probleemoplossing

Mijn HTML-wijzigingen worden niet opgeslagen.
Lees de foutmelding in de instellingen van het HTML-blok. Verwijder of vervang de niet-ondersteunde tag, het kenmerk of de URL en controleer daarna of de foutmelding verdwijnt. Selecteer Meer informatie over toegestane tags in de foutmelding om de ondersteunde lijst te bekijken.

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 beschikbaar bij betaalde Klaviyo-abonnementen. Controleer of je account een betaald abonnement heeft en zoek daarna naar HTML onder Blokken toevoegen in de formuliereditor.

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 kan ik niet-ondersteunde HTML niet opslaan?
Klaviyo weigert niet-ondersteunde HTML om je sitebezoekers te beschermen tegen schadelijke code. Verwijder niet-ondersteunde tags en attributen, zoals scripts en eventhandlers, en vervang onveilige URL's voordat je doorgaat. Bekijk de voorbeelden van niet-ondersteunde HTML hierboven.

Kan ik een <script> of andere JavaScript aan mijn formulier toevoegen?
Nee. Scripts en kenmerken voor event handlers zijn niet toegestaan, en HTML die deze bevat kan niet worden opgeslagen. Deze beperking beschermt je websitebezoekers en 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.