Customize your Tally form to fit your style or brand seamlessly. With Tally, you can change form colors, fonts, format text, add your logo, and more. Discover how to uplift the design of your forms below.
Customize your form
Customization is available for free and doesn’t require any coding skills. Read on below ↓
Inject custom styles
Fully control the design of your form with custom CSS.
Learn more →
Change colorsApply a theme Create your own custom themeReuse your custom themeChange fontsInject custom CSSFormat text Add a logoAdd a cover imageUse headingsInsert dividersEdit buttonsCreate columnsInsert imagesActivate the progress bar
Change colors
Apply a theme
Click the
Design
button above your form title to open the customization options. You can choose between a light and dark theme or create a custom one.Create your own custom theme
Click
Custom
to create your own theme. You can change the color of the form background, text, button, and accents (links, selected options, and focussed inputs) and select a font. To change colors, click on the colored square of one of the options. You can use the color palette to browse colors or type in a HEX code for a particular one.
Reuse your custom theme
If you want to reuse a custom theme, you'll need to save it as a form template first. This allows you to re-apply the same design choices to multiple forms. Themes themselves can't be saved independently yet.
Looking for design inspiration? Check out Happy Hues or UI Colors for different color themes.
Change fonts
You can choose any font from the Google Fonts library (900+ fonts) to use in your Tally forms. Simply select one from the
Font
dropdown.You can upload your own custom font by using custom CSS or code injection.
Inject custom CSS
Injecting custom CSS codes allows you to fully control the design of your form beyond the default design options. For example, you can change the color of input fields or add a background image.
Click
+
to open the Custom CSS
box and paste your code snippets.Tally will automatically display any design changes in the form builder. If this doesn’t happen, click
Preview
.Click here for an overview of all CSS classes and code snippets. Custom CSS is a Tally Pro feature.
Format text
Highlight text to open the formatting options. You can change the text color, add highlight color, make text bold, italic, underlined, or add links. You can find our formatting shortcuts here.
To remove any highlight color and reset it back to default, select the text, open the
Highlight color
window, and press the Tx
button.You can inject custom styles to format text beyond the default options.
Pro
Add a logo
To add a logo, hover over your form title and click
Add logo
. You can upload an image or a link to an image URL.The recommended logo size is 200x200 pixels.
Add a cover image
Add a cover image by hovering over your form title and selecting
Add cover
. You can upload your own image, link to an image URL, select a default color, or choose an image from the Unsplash library. Images from the Unsplash library are royalty-free — you can use them for private and public forms.The recommended cover image size is a minimum of 1500 pixels wide.
Use headings
Use different sizes of headings to add structure and context to your form. You can pick from three sizes of headings. Type
/heading
to see all heading options, or type /h1
, /h2
, or /h3
to instantly add one of the heading sizes. Insert dividers
Type
/
divider
to break up content in your form with a horizontal line. You can drag the line to move it. Edit buttons
Hover over your form title and click
Design
to edit the button colors. You will need to select the Custom
tab to open button design options.To edit button text, click the
⚙️
icon left of the button.Create columns
You can display content next to each other by using columns. Click
⋮⋮
and drag and drop form blocks next to each other to create columns.Insert images
Add images by simply typing
/image
. You can upload your own image, link to an image URL, or choose from the Unsplash library. Click on
⋮⋮
left of an image to open image options. These let you hide the image block and add a caption, image link, or Alt text. You can also delete or duplicate the image.Did you know you can also add images to your multiple-choice options? Click
⋮⋮
to open the block settings to insert images. Scroll down to enable the Image
toggle. Then, press Add image
and upload your own, link to an image URL, or choose one from the Unsplash image library.Activate the progress bar
The progress bar provides a clear way for respondents to understand how much of the form they have completed and encourages them to continue until the end. The progress bar only works for multi-page forms.
To enable it, click the
⚙️
icon in the top navigation menu of your form editor to open the Settings
page. Navigate to the General
section and turn on the Progress bar
toggle. Don’t forget to click Save changes
.To avoid confusion for your respondents, we advise you to disable the progress bar if your form contains multiple page jumps.