Skip to main content

Using Custom CSS in the Builder

Updated over a week ago

Where your CSS applies

  • Add CSS in the CSS editor of your site/form.

  • If Sync website & form theme is enabled, your CSS applies to both (where relevant).


Targeting with Autocomplete (how it works)

  1. Click into the CSS editor.

  2. Type [ and begin typing data….

  3. Use the dropdown to select a target:

    • Block IDs — e.g., [data-block-id="0196a250-9d65-714b-b7a7-52f57501c430"]

    • Block types — e.g., Hero, Image (applies to all blocks of that type)

    • Data fields — e.g., title, description (targets content areas inside blocks)


Best Practices

  • Prefer specific targets. Use Block ID when you only mean to affect a single spot.

  • Avoid overly broad selectors. Targeting a whole block type (e.g., every Hero) can have wide-ranging effects.

  • Mobile & accessibility. Large font/spacing changes, low color contrast, or hiding elements can impact readability and responsiveness—validate on multiple screen sizes.

Did this answer your question?