Tally empowers form creators to design their forms without writing a single line of code. However, a tiny sprinkle of code can add that extra finishing touch to your form.

Injecting custom CSS allows you to style your form in ways not available in the default design options.

<aside> <img src="/icons/flash_pink.svg" alt="/icons/flash_pink.svg" width="40px" /> Injecting custom CSS is a Tally Pro feature.

</aside>

How to inject custom CSS

There are two ways you can customize your forms using custom CSS:

1️⃣ Open the design options in the form builder and inject custom CSS into the CSS block.

2️⃣ ****Forms with a custom domain can use the code injection box on the form and domain level.

<aside> <img src="/icons/exclamation-mark_red.svg" alt="/icons/exclamation-mark_red.svg" width="40px" /> Custom CSS requires coding skills and falls outside the scope of our support.

This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Tally. This includes how it functions with our responsive design or future platform updates.

</aside>

CSS classes

These CSS classes can be overridden with custom CSS applied to your form.

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Custom styles may not always work seamlessly in the form builder because the HTML structure of blocks may differ in the editor. To ensure that your custom styles are correctly applied, we recommend testing them in Preview mode, which replicates the same HTML structure as published forms.

</aside>

<aside> <img src="/icons/exclamation-mark_red.svg" alt="/icons/exclamation-mark_red.svg" width="40px" /> Avoid using class names that are not listed in the table below. For instance, class names such as sc-a3e5684a-0, styled__ContentH3-sc-aw1rsf-4, cwaPRn, etc., are automatically generated and subject to change, potentially causing your CSS rules to break.

</aside>