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.
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:
- Replace the URL in the embed code or link with the custom domain
- Add &embed=1 to the form URL in order to keep the custom styles you've applied.