Style your form with custom CSS

Style your forms with custom CSS code.

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 that are not available in the default design options.

⚡

Injecting custom CSS is a Tally Pro feature.

How to inject custom CSS CSS classes Code snippets Custom CSS not working?

How to inject custom CSS

There are 2 ways to 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 form and domain level.

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 with future updates to our platform.

CSS classes

These CSS classes can be overridden with custom CSS.

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, it is recommended to test them in Preview mode, which replicates the same HTML structure as published forms.

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.

Description	CSS Class
Full page	.tally-app
Form logo	.tally-form-logo
Form cover	.tally-form-cover
Form page	.tally-page
Form page number	.tally-page-1, .tally-page-2, .tally-page-3, etc.
Form ‘Thank you' page	.tally-page-thank-you
Submit button	.tally-submit-button
Back button	.tally-back-button
Required question indicator	.tally-required-indicator
Validation error	.tally-validation-error
Column list	.tally-column-list
Column	.tally-column
Tally block	.tally-block
Form title block	.tally-block-form-title
Text block	.tally-block-text
Label block	.tally-block-label
Heading 1 block	.tally-block-heading-1
Heading 2 block	.tally-block-heading-2
Heading 3 block	.tally-block-heading-3
Divider block	.tally-block-divider
Image block	.tally-block-image
Image caption	.tally-image-caption
Embed block	.tally-block-embed
Embed video block	.tally-block-embed-video
Embed audio block	.tally-block-embed-audio
Multiple choice block	.tally-block-multiple-choice-option
Multiple choice option	.tally-multiple-choice-option
Selected multiple choice option	.tally-multiple-choice-option-selected
Multiple choice badge	.tally-enumeration-badge
Multiple choice letter badge	.tally-alphabet-badge
Multiple choice number badge	.tally-number-badge
Checkboxes block	.tally-block-checkbox
Checkbox option	.tally-checkbox
Selected checkbox option	.tally-checkbox-selected
Multi-select block	.tally-block-multi-select
Multi-select selected options container	.tally-multi-select-selected-options
Multi-select selected option pill	.tally-multi-select-selected-option-pill
Multi-select available options container	.tally-multi-select-list-options
Multi-select available option	.tally-multi-select-list-option
Multi-select available option pill	.tally-multi-select-list-option-pill
Dropdown block	.tally-block-dropdown
Ranking option block	.tally-block-ranking-option
Ranked option	.tally-ranking-option-ranked
Ranked option at position	.tally-ranking-option-ranked-1, .tally-ranking-option-ranked-2, .tally-ranking-option-ranked-3, etc.
Ranking badge	.tally-rank-badge
Short answer block	.tally-block-input-text
Number block	.tally-block-input-number
Email block	.tally-block-input-email
Link block	.tally-block-input-link
Phone number block	.tally-block-input-phone-number
Date block	.tally-block-input-date
Time block	.tally-block-input-time
Long answer block	.tally-block-textarea
File upload block	.tally-block-file-upload
Linear scale block	.tally-block-linear-scale
Linear scale option	.tally-linear-scale-option
Selected linear scale option	.tally-linear-scale-option-selected
Linear scale label	.tally-linear-scale-label
Rating block	.tally-block-rating
Payment block	.tally-block-payment
Signature block	.tally-block-signature
reCAPTCHA block	.tally-block-captcha
Matrix container	.tally-matrix
Matrix column block	.tally-block-matrix-column
Matrix row block	.tally-block-matrix-row
Tally block by UUID (Universal Unique Identifier)	.tally-block-[UUID] (example: .tally-block-2e9cd30c-28e1-4c56-a1ef-d8e945ac103e)

💌

Didn’t find the class you’re looking for? Let us know!

Code snippets

Not familiar with Custom CSS? We prepared a set of pre-made code snippets for you, which you can simply copy and paste in the CSS or code injection box.

Add a background image

This code snippet will add a background image to your form. Replace the URL with the link of your background image.


.tally-app {
  background: url(https://images.unsplash.com/photo-1643916861337-1e13c6f09b72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80) no-repeat center center fixed;
  background-size: cover;
}

Preserve column layout on mobile

This code snippet will keep the columns on mobile.


@media (max-width: 576px) {
  .tally-column-list {
    flex-direction: row;
  }

  .tally-column {
    width: auto;
    padding: initial;
  }
}

Place the button next to an input field

This code snippet will make the button appear on the right of your input field instead of below.


form {
    display: flex;
}
h1 {
    display: none;
}
.tally-block {
    padding: 0;
}
.tally-block > div {
    padding: 0;
}
.tally-submit-button {
    margin: 0;
    margin-top: 1px;
    margin-left: 8px;
}
.tally-submit-button button {
    height: 36px;
}

Hide submit button

Hide the submit button if you want to create a one-pager without a call-to-action.


.tally-submit-button {
  display: none;
}

Center submit button


.tally-submit-button {
  justify-content: center
}

Hide back button

Hide the back button if you don’t want the respondents to be able to go back to the previous pages.


.tally-back-button {
  display: none;
}

Change selected multiple choice color

This code snippet will make the selected multiple choice option red, but you can change the #f00 to any hex color you like.


.tally-multiple-choice-option-selected > div {
  box-shadow: #f00 0px 0px 0px 2px;
}

.tally-multiple-choice-option-selected > div:focus-within {
  box-shadow: #f00 0px 0px 0px 2px;
}

.tally-multiple-choice-option-selected > div > div > div {
  background-color: #f00;
}

Change selected checkbox color

This code snippet will make the selected checkbox red, but you can change the #f00 to any hex color you like.


.tally-checkbox-selected > div > div > div {
  background-color: #f00;
  box-shadow: #f00 0px 0px 0px 2px;
}

.tally-checkbox-selected > div > div > div:focus-within {
  box-shadow: #f00 0px 0px 0px 2px;
}

Change selected linear scale color

This code snippet will make the selected linear scale option red, but you can change the #f00 to any hex color you like.


.tally-block-linear-scale .tally-linear-scale-option-selected {
  color: #f00;
  box-shadow: #f00 0px 0px 0px 2px;
}

.tally-block-linear-scale .tally-linear-scale-option-selected:focus-within {
  box-shadow: #f00 0px 0px 0px 2px;
}

Change focused dropdown color

This code snippet will make the focused dropdown red, but you can change the #f00 to any hex color you like.


.tally-block-dropdown input:focus {
  box-shadow: #f00 0px 0px 0px 2px;
}

Change focused input fields color

This code snippet will make the focused inputs red, but you can change the #f00 to any hex color you like.


.tally-block input:focus, .tally-block textarea:focus {
  box-shadow: #f00 0px 0px 0px 2px;
}

Change the color of the submit button

This code snippet will make the button background color black (#000), and the text color white (#fff).


.tally-submit-button button {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
}

Change text color

This code snippet will make the text color white, but you can change the #fff to any hex color you like.


body {
  color: #fff;
}

Change question title font size


.tally-block-heading-3 h3 {
  font-size: 100px;
}

Change link color

This code snippet will make the link color red, but you can change the #f00 to any hex color you like.


.tally-block-text a {
  color: #f00;
  border-bottom-color: #f00;
}

.tally-block-text a:hover {
  color: #f00;
  border-bottom-color: #f00;
}

Change background color

This code snippet will make your form background black, but you can change the #000 to any hex color you like.


html, .tally-app {
  background-color: #000;
}

Hide the button arrow

This code snippet will hide the arrow icon in the form buttons.


.tally-submit-button svg {
  display: none;
}

Use a custom font

To apply your own font, use the code snippet below and replace the font-family and URLs with links to your own font.


@font-face {
    font-family: 'MY-FONT';
    src: url('https://..../fonts/....eot');
    src: url('https://..../fonts/....woff2');
    src: url('https://..../fonts/....woff');
    src: url('https://..../fonts/....ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'MY-FONT' !important;
}

Change the text input color

This code snippet will change the text color inside the input field into red.


input[type="text"] {
  color: red !important;
}

Change the placeholder text color


input[type="text"]::placeholder {
 color: green !important;
}

Change the color of the progress bar

The first rule will change the background color of the progress bar segments (empty state), the second rule will change the color of the filled-in segments (filled-in state).


.tally-progress-bar-item {
  background-color: pink;
}

.tally-progress-bar-item::after {
  background-color: red;
}

Change the input color of the date block

The first rule will change the selected date, the second rule will change the placeholder text.


input {
  color: red !important;
}

input::placeholder {
 color: green !important;
}

Change form cover’s height


.tally-form-cover img {
  height: 50px !important;
}

Custom CSS not working?

Try to add !important on every line before ;

Some CSS rules only work in Preview and published mode. You will not see the changes in the form editor.