Customize your form

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 colors Apply a theme Create your own custom theme Reuse your custom theme Change fonts Inject custom CSS Format text Add a logo Add a cover image Use headings Insert dividers Edit buttons Create columns Insert images Activate 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.

insert screenshot

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.