How to use custom HTML block in sign-up forms

You will learn

Learn how to use the custom HTML block to add your own markup to Klaviyo sign-up forms, beyond the blocks available in the forms editor. The HTML block gives you fine-grained control over content and layout — custom headings, formatted text, lists, tables, images, and links — so your forms can match your brand and messaging exactly.

For security, the HTML block only supports a specific set of tags and attributes. Anything outside that set is removed automatically when your form renders, so not all HTML you write will appear onsite. The sections below list which tags and attributes are supported and which are always removed.

Before you begin

Note the following before using custom HTML:

• Custom HTML block is available on paid Klaviyo plans only. This feature is rolling out gradually, so you may not see it in your account yet.
• Your HTML is automatically sanitized for security. The HTML block keeps only supported tags and attributes and removes everything else — including scripts and event handlers — when your form renders. This protects your site visitors from malicious code. As a result, some of the HTML you write may not appear onsite if it isn't supported. Please see the support list of tags below.
• Custom HTML block adds new content only. The HTML block lets you add your own elements to a form. You cannot use it to edit the HTML of your form's existing blocks.
• Klaviyo Support cannot troubleshoot custom code. Issues caused by custom HTML (e.g., broken layouts, content that doesn't render, styling problems) are your responsibility to debug and fix. If a form with custom HTML isn't displaying or behaving correctly, remove the HTML block first to check whether your code is the cause.
• Test before you publish. Custom HTML can affect form layout and usability. Always preview and test your form on both desktop and mobile before publishing.

Add an HTML block to your form

To add custom HTML to a form:

1. Navigate to Sign-up forms and open your form in the editor.
2. In the blocks panel, find the HTML block and drag it onto your form where you want the custom content to appear.

3. Select the HTML block to open its settings. A code editor appears in the block's sidebar.

The HTML block works like any other block in the forms editor — you can add more than one, reposition them, and delete them. Custom HTML is contained within its block, so it doesn't affect the rest of your form's structure.

Write your HTML

The code editor starts empty. Enter your HTML directly, using only supported tags and attributes. Unsupported tags and attributes are removed automatically when your form renders.

Example

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

To style your HTML, add your own class names to elements and target them with custom CSS. For example, set class="promo-heading" on your heading, then style .promo-heading in the custom CSS editor. See How to use custom CSS in sign-up forms for how to enable and write custom CSS.

Supported HTML tags and attributes

For security, the HTML block supports the following tags and attributes. Any tag or attribute not on this list is removed when your form renders.

Global attributes — these are allowed on every supported tag: id, class, dir, lang, role, and aria-* (accessibility attributes).

The tables below list additional attributes allowed on specific tags, beyond the global attributes above.

Text and formatting

Headings

Lists

Tables

Media and links

Allowed URL schemes

Links (href) and image sources (src) may use only these URL schemes: http, https, mailto, tel, and relative paths or #fragment anchors. URLs using any other scheme (such as javascript: or data:) are removed. When a link uses target="_blank", rel="noopener noreferrer" is applied automatically to keep the link secure.

Tags and attributes removed for security

To protect your site and your visitors, the HTML block automatically removes anything that could run code or hijack your form — a class of attack known as cross-site scripting (XSS). The following are always removed, even though they're common in HTML:

• Scripts: <script> and <noscript>
• Event handler attributes: any attribute whose name starts with on (for example, onclick, onload, onerror, onmouseover)
• Frames and embeds: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Vector and markup-language tags: <svg>, <math>
• Document and resource tags: <base>, <meta>, <link>, and the <style> tag
• Dangerous URL schemes in links or sources: javascript:, vbscript:, data:, filesystem:
• Form-submission override attributes: formaction, formmethod, formtarget, formenctype
• Legacy or deprecated tags: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

If part of your code disappears when the form renders, it most likely used a tag or attribute that isn't on the supported list above.

Preview and publish

After writing your HTML:

1. Use the editor preview to check your form's appearance.
2. Verify your form on both desktop and mobile, since custom HTML can affect each differently.
3. Publish your form on a non-public-facing page to validate how it shows up onsite.
4. Submit a test signup on your published form to confirm all inputs and buttons still work.
5. Publish your form publicly.

Edit or remove custom HTML

To edit your HTML, select the HTML block and update the code in its settings.

To remove custom HTML, select the HTML block and delete it. This removes the block and its content from your form; the rest of your form is unaffected. Removing the block is also the fastest way to check whether a display issue is caused by your custom code.

Troubleshooting

Some of my HTML doesn't appear.
The HTML block removes any tag or attribute that isn't supported when your form renders. Check your code against the supported tags and attributes above, and confirm you aren't using a tag or attribute that's removed for security.

My form looks broken.
Review your HTML for unclosed or mismatched tags and layout rules that reposition or overlap other blocks. Because your code lives in its own block, you can delete the HTML block to confirm it's the cause, then re-add it and test smaller changes.

My styling isn't applying to my HTML.
Confirm the class names in your HTML match the selectors in your custom CSS, that custom CSS is toggled on, and that you've published the latest version of the form. See How to use custom CSS in sign-up forms.

I don't see the HTML block.
Custom HTML is only available on paid plans and is rolling out gradually. If you're on a paid plan and don't see it yet, check back soon.

Frequently asked questions

Can I edit the HTML of my form's existing blocks?
No. The HTML block lets you add new custom content to a form. It does not change the HTML of your form's existing blocks.

Why was some of my code removed?
For security, the HTML block keeps only supported tags and attributes and strips everything else — such as scripts and event handlers — to prevent malicious code from running on your site. See the list of tags and attributes removed for security above.

Can I add a <script> or other JavaScript to my form?
No. Scripts and event handler attributes are always removed to protect your site visitors. This cannot be turned off.

Can I style my HTML block?
Yes. Add your own class names to your HTML elements and target them with custom CSS. See How to use custom CSS in sign-up forms.

Will Klaviyo Support help me write or fix my HTML?
No. Klaviyo Support can't write, review, or troubleshoot custom code. If a form with custom HTML has an issue, you'll be asked to remove the HTML block to rule it out before Support can investigate further.