How to use custom CSS in sign-up forms

Learn how to use custom CSS to style your Klaviyo sign-up forms beyond what's available in the forms editor. Custom CSS gives you fine-grained control over properties like line height, letter spacing, and element spacing, so your forms can match your brand exactly.

Before you begin

Note the following before using custom CSS:

• Custom CSS is available on paid Klaviyo plans only.
• Klaviyo Support cannot troubleshoot custom code. Issues caused by custom CSS (e.g., broken layouts, hidden fields, rendering problems) are your responsibility to debug and fix. If a form with custom CSS isn't displaying or behaving correctly, disable custom CSS first to check whether your code is the cause.
• Custom CSS applies styling only. You cannot add or edit the HTML of your form or its blocks through this feature.
• Test before you publish. Custom CSS can affect form usability (e.g., accidentally hiding a required field can prevent signups). Always preview and test your form before publishing.

Enable custom CSS

To enable custom CSS on a form:

1. Navigate to Sign-up forms. Open the form's Actions menu (3 dots) and select Edit.
2. Select Edit styles in the left sidebar.
3. Scroll to the Custom CSS section at the bottom of the panel.
4. Turn on Enable custom CSS.
5. Review the warning message. By enabling custom CSS, you acknowledge that Klaviyo Support cannot assist with issues caused by your custom code.

Once enabled, a CSS editor appears where you can write custom CSS for your form. Custom CSS is enabled per form; toggling it on for one form does not affect your other forms.

Set class names on form components

When custom CSS is enabled, each component has a Class name field under CSS classes. The default name is based on the component type, so components of the same type share it.

1. Select the component in the form preview.
2. Under CSS classes, enter a unique name in Class name, such as form-headline. Enter the name without a leading period.

Use these class names as selectors in your CSS. Setting your own class names is the most reliable way to target form elements, because they stay stable and readable.

If you later disable custom CSS, your class names are kept and will reappear if you re-enable it.

Write your CSS

The CSS editor starts empty — it does not show your form's current styles, because those are generated when the form renders on your site. After setting your class names, select Edit styles and enter your rules in Custom CSS code. To target elements, use either of these approaches:

• Use your class names. Reference the class names you've set on your form components (recommended).
• Inspect your live form. Open your published form on your website, then use your browser's developer tools (right-click > Inspect) to identify the selectors you want to target.

Avoid targeting Klaviyo's auto-generated class names. These are internal, may include hashed values, and can change without notice — which would silently break your CSS. Use your own class names instead.

Example

For text blocks, target the text inside the block as well as its outer wrapper. The !important declaration below overrides inline line-height styling on the text.

Suppose you set the class name form-headline on your headline block and email-input on your email input block:

.form-headline,
.form-headline * {
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Custom CSS also allows styling that isn't available in the editor, such as right-to-left text. This example overrides inline text alignment on the headline:

.form-headline,
.form-headline * {
  direction: rtl;
  text-align: right !important;
}

Preview and publish

If your form is already live, publishing test-page targeting will temporarily stop it from appearing on its usual pages. Restore your intended targeting after testing.

After writing your CSS:

1. Use the editor preview to check your form's appearance.
2. Verify your form on both desktop and mobile, since custom CSS can affect each differently.
3. Limit the form to a non-public-facing test page before publishing. For URL targeting, select Targeting & behavior > Targeting. Under URLs, turn on Only show on certain URLs, select Exactly matching, and enter the full test-page URL, including https://. For a form opened by a custom trigger, trigger it on the test page instead.
4. Select Publish or schedule, choose Publish now, then click Publish now. Resolve any blocking alerts before publishing.
5. Submit a test signup on your published form to confirm all inputs and buttons still work.
6. Once testing succeeds, restore your intended targeting settings and publish again using Publish or schedule > Publish now. If you use a custom trigger, make the form available through your intended trigger.

Disable custom CSS

To remove custom styling, select Edit styles and turn off Enable custom CSS. Your form preview returns to its standard editor styling. This is also the fastest way to check whether a display issue is caused by your custom code. To apply the change on your website, select Publish or schedule, choose Publish now, then click Publish now. Your CSS code and component class names are saved if you choose to turn custom CSS back on.

Troubleshooting

My CSS isn't applying.
Confirm that custom CSS is toggled on, your selectors match the class names set on your components, and you've published the latest version of the form. Styles on your website can also conflict with or override form styles; use your browser's developer tools to check which rules are winning.

My form looks broken or stopped collecting signups.
Disable custom CSS to check the form preview, then review your code. To check the change on your website, publish the form again. Check especially for rules that hide or reposition inputs and buttons.

I don't see the Custom CSS section.
Custom CSS is available on paid Klaviyo plans. Open your form in the editor, select Edit styles, and scroll to Custom CSS.

Typography styles on a custom class aren’t applying.

If layout styles like margin work but text styles like letter-spacing or line-height do not, the custom class is likely attached to the outer wrapper while the visible text is rendered in a nested child element. In that case, target the child elements too, for example: .form-headline, .form-headline * { ... }. If the child element has an inline style for the same property, targeting it alone will not override that style. Add !important only to the property you need to override, as in the examples above.

Frequently asked questions

Can I add custom HTML to my form?
Yes. On a paid Klaviyo plan, you can add an HTML block for custom content. This is separate from custom CSS and does not let you edit the HTML of existing blocks. Learn how to use a custom HTML block.

Does custom CSS work on all my forms?
Custom CSS is enabled per form, for forms displayed on your website. Enable it individually on each form you want to customize.

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

What happens to my CSS if I disable the feature?
Your form preview reverts to standard styling. Publish the change to apply it on your website. Your CSS code and component class names are saved and restored if you re-enable custom CSS.