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. You'll find it in the general settings of your custom domain tab (available to Tally Pro users).

Portfolio page made with Tally: filipminev.com

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.