Style your form with custom CSS

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.

Injecting custom CSS is a Tally Pro feature.

How to inject custom CSS CSS classes Code snippets Layout & colors Inputs Buttons Custom CSS not working?

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.

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.

CSS classes

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

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.

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
Title block	.tally-block-title
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
“Other” option’s input	.tally-other-option-input
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 into the CSS or code injection box.

Layout & colors

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 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;
}

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;
}

Use a Google Font

Choose a Google Font and replace the import URL and font family name below.


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

* {
	font-family: "Roboto", sans-serif !important;
}

Use multiple fonts

To apply multiple fonts, use the code snippet below and replace the import URLs and font family names below.


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap');

* {
	font-family: "Roboto", sans-serif !important;
}

h3 {
  font-family: "Oswald", sans-serif !important;
}

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;
}

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 view.


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

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

Change the form cover’s height

Use this code snippet to change the height of your form cover. Replace the number 50 with any numerical value to fit the cover to your form’s design.


.tally-form-cover img {
  height: 50px !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). You can change the color to any hex color code.


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

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

Center images

This code snippet centers images horizontally in the middle of your form page.


.tally-block-image {
	display: flex;
	justify-content: center;
}

Change the form’s page width

This code snippet increases the form page width to 1000px.


.tally-page {
	max-width: 1000px;
}

Follow light or dark color code


:root { color-scheme: light dark; }

Inputs

Change question title font size

Use this code snippet to change your title font size in pixels.


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

Change the text input color

This code snippet will change the text color inside the input field to red. You can change the color to any hex color code.


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

Change the placeholder text color

This code snippet will change the placeholder text color to green. You can change the color to any hex color code.


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

Change focused input field's 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 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 the 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 the 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 the 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 the input color of the date block

The first rule will change the color of the selected date, the second rule will change the color of the placeholder text. You can change the colors to any hex color codes you like.


input {
  color: red !important;
}

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

Full-width inputs

Input fields are 320px wide by default. This CSS snippet will make the input fields fit the full witdh of the form container.


div[class*=' tally-block-input'] > div > div,
.tally-block-payment > div,
.tally-block-dropdown > div > div,
.tally-block-multiple-choice-option > div > div,
.tally-block-checkbox > div > div,
.tally-block-multi-select > div > div {
	min-width: 100%;
}

Inputs without a border radius


div[class*=' tally-block-input'] input {
	border-radius: 0;
}

Buttons

Center submit button

This code snippet centers the submit button horizontally in the middle of your form page.


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

Hide submit button

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


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

Hide back button

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


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

Change the color of the submit button

This code snippet will make the button background color black (#000), and the text color white (#fff). You can change the color codes to any hex color you like.


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

Hide the button arrow

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


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

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;
}

Button without a border radius


.tally-submit-button button {
  border-radius: 0;
}

Full width button


.tally-submit-button > div > div,
.tally-submit-button > div,
.tally-submit-button button {
 flex: 1;
 width: 100%;
}

Custom CSS not working?

There may be situations where the CSS code you added doesn’t show in your form editor.

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.