Add custom styles or scripts with code injection

 
Do you want to fully customize your form or add scripts (Hotjar, Intercom, Buy Me a Coffee, or others)? This can be done using the code injection block.
 
To inject custom code, you need to connect your form to a custom domain, which is a Tally Pro feature. This feature also requires coding skills.
 
Portfolio page made with Tally: filipminev.com
Portfolio page made with Tally: filipminev.com
 

CSS classes

These CSS classes can be overridden with custom CSS.
⚠️
Don’t use class names which aren’t defined in the table below. For example, class names which look like styled__ContentH3-sc-aw1rsf-4, cwaPRn, etc - those are auto-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
Submit button
.tally-submit-button
Back button
.tally-back-button
Required question indicator
.tally-required-indicator
Validation error
.tally-validation-error
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
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
Checkboxes block
.tally-block-checkbox
Checkbox option
.tally-checkbox
Selected checkbox option
.tally-checkbox-selected
Dropdown block
.tally-block-dropdown
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
 
 

How to customize your form with code injection

To inject custom code, you need a custom domain. You'll find the code injection box in the general settings of your custom domain. Insert the code snippets below into the code injection box to customize the style and font of your form.
 
Change fonts
This is an example of how to replace Tally's default font with a Google font (Roboto).
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
body {
  font-family: 'Roboto', sans-serif !important;
}
</style>
Change text color
This code snippet will make the text color white, but you can change the #fff to any hex color you like.
<style>
body {
  color: #fff !important;
}
</style>
Change link color
This code snippet will make the link color red, but you can change the #f00 to any hex color you like.
<style>
.tally-block-text a {
  color: #f00 !important;
  border-bottom-color: #f00 !important;
}

.tally-block-text a:hover {
  color: #f00 !important;
  border-bottom-color: #f00 !important;
}
</style>
Change background color
This code snippet will make your form background black, but you can change the #000 to any hex color you like.
<style>
html, .tally-app {
  background-color: #000 !important;
}
</style>
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.
<style>
.tally-multiple-choice-option-selected > div {
  box-shadow: #f00 0px 0px 0px 2px !important;
}

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

.tally-multiple-choice-option-selected > div > div > div {
  background-color: #f00 !important;
}
</style>
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.
<style>
.tally-checkbox-selected > div > div > div {
  background-color: #f00 !important;
  box-shadow: #f00 0px 0px 0px 2px !important;
}

.tally-checkbox-selected > div > div > div:focus-within {
  box-shadow: #f00 0px 0px 0px 2px !important;
}
</style>
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.
<style>
.tally-block-linear-scale .tally-linear-scale-option-selected {
  color: #f00 !important;
  box-shadow: #f00 0px 0px 0px 2px !important;
}

.tally-block-linear-scale .tally-linear-scale-option-selected:focus-within {
  box-shadow: #f00 0px 0px 0px 2px !important;
}
</style>
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.
<style>
.tally-block-dropdown select:focus {
  box-shadow: #f00 0px 0px 0px 2px !important;
}
</style>
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.
<style>
.tally-block input:focus, .tally-block textarea:focus {
  box-shadow: #f00 0px 0px 0px 2px !important;
}
</style>
Change the color of the submit button
This code snippet will make the button background color black (#000), and the text color white (#fff).
<style>
.tally-submit-button button {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}
</style>
Hide submit button
Hide the submit button if you want to create a one-pager without a call-to-action.
<style>
.tally-submit-button {
  display: none !important;
}
</style>
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.
<style>
form {
    display: flex !important;
}
h1 {
    display: none !important;
}
.tally-block {
    padding: 0 !important;
}
.tally-block > div {
    padding: 0 !important;
}
.tally-submit-button {
    margin: 0 !important;
    margin-top: 1px !important;
    margin-left: 8px !important;
}
.tally-submit-button button {
    height: 36px !important;
}
</style>

Embedding a form with custom CSS

If you want to embed a form that is hosted on a custom domain, you need to:
  1. Replace the URL in the embed code or link with the custom domain
  1. Add &embed=1 to the form URL in order to keep the custom styles you've applied.
Help