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.

CSS classes

These CSS classes can be overridden with custom CSS.

⚠️

Don't use class names that are not defined in the table below. For example, class names like styled__ContentH3-sc-aw1rsf-4, cwaPRn, etc. - these are automatically generated and can change at any time, which will break your CSS rules.

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 letter badge	.tally-alphabet-badge
Checkboxes block	.tally-block-checkbox
Checkbox option	.tally-checkbox
Selected checkbox option	.tally-checkbox-selected
Multi-select block	.tally-block-multi-select
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
Tally block by UUID (Universal Unique Identifier)	.tally-block-[UUID] (example: .tally-block-2e9cd30c-28e1-4c56-a1ef-d8e945ac103e)
Matrix container	.tally-matrix
Matrix column block	.tally-block-matrix-column
Matrix row block	.tally-block-matrix-row

💌

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.