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 the general settings of your custom domain tab (available to Tally Pro users).
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>Change fonts
This is an example of how to replace Tally's default font by 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.