If you want to add custom styles (e.g. change color or fonts) or scripts (e.g. add Google Analytics tracking code, Hotjar, Intercom, Buy Me a Coffee, or others) to your Tally form, this can be done using the code injection block.

To inject custom code, you need a custom domain. you'll find the code injection box in the general settings of your custom domain tab (available to Tally Pro users).

Portfolio page made with Tally: filipminev.com

CSS classes

These CSS classes can be overridden with custom CSS.

Description CSS Class
Full page .tally-app
Form logo .tally-form-logo
Form cover .tally-form-cover
Text block .tally-text
Checkboxes block .tally-checkboxes
Checkbox option .tally-checkbox
Multiple choice block .tally-multiple-choice
Multiple choice option .tally-multiple-choice-option
Required question indicator .tally-required-indicator
Validation error .tally-validation-error
Submit button .tally-submit-button
Back button .tally-back-button

Code snippets

Insert the code snippets below into the code injection box to customize the style and font of your form.

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

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>

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>

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

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>

Want to know more?

Want to know more about code injection? Don't hesitate to reach out via hello@tally.so or feel free to join our Slack channel for immediate support.