# Design your form

Set your form's theme, colours, fonts, progress indicator and logo on the form builder's Design tab, and watch the preview change as you go.

The **Design** tab of the form builder sets how your form looks to customers: its theme and colours, its fonts, the progress indicator, how pages change, and your logo and name. The workspace owner and the project's Admins can change it. Hiding the "Powered by" badge is on Pro, Premium and Business; the rest of the tab is on every plan.

1. **Open the Design tab**

   In your project, open **Forms** under **Collect** in the sidebar and click your form. In the form builder, click **Design**.

   The preview beside the sidebar shows your form as customers will see it, and it redraws with every change you make on this tab. Click through it to check each page. The buttons above it switch between desktop, tablet and mobile sizes.

2. **Set the theme and colours**

   Under **Appearance**:

   - **Theme**: **Light**, **Dark** or **Auto (System)**. **Dark** puts the form on a dark card with light text. **Auto (System)** follows each customer's device: dark when the device is in dark mode, light otherwise. The preview follows your own device.
   - **Primary Color**: the colour of the form's main buttons and of the progress dots or steps. Click the swatch to pick a colour, or type a hex code in the box beside it. The buttons' labels stay white, so pick a colour dark enough to read them on. The reset arrow brings back the colour a new form starts with.
   - **Background Color (optional)**: the colour of the page around the form's card. Leave the box empty to keep the theme's own background.
   - **Border Radius**: how rounded the buttons and text boxes are, from **None** to **Full**.

3. **Choose your fonts**

   Under **Typography**, **Body Font** applies to the whole form and **Heading Font** to its titles. Each picker has a search box and lists your project's fonts, a few system fonts and Google fonts, and shows a sample line under it. Until you pick a font, the form keeps its standard one, and the reset arrow beside a picker takes you back to it.

   To add fonts to the list, including your own font files, see [Use your own fonts](/help/account/use-your-own-fonts).

4. **Set the progress indicator and page animation**

   Under **Progress**:

   - **Show Progress Bar** shows or hides the indicator at the top of the form, under your logo. Turn it off to hide the dots.
   - **Progress Style** appears while the switch is on. **Dots** is a row of dots, one for each step. **Progress Bar** is a single bar that fills up. **Steps** shows numbered circles joined by a line, with a tick on the steps already done; in a form of more than ten steps it becomes a row of plain segments.
   - **Show Page Numbers** adds a line such as "Step 1 of 5". It works with or without the indicator.

   Under **Animation**, **Animation Style** sets how each page arrives: **Fade**, **Slide** or **None**. Click through the preview to see it. Customers whose device is set to reduce motion see no animation.

5. **Add your logo and name**

   Under **Branding**:

   - **Form Logo**: a form uses your project's logo until you give it one of its own, and the thumbnail is labelled **Project logo** while that's the case. Click **Override** to upload a JPEG, PNG, WebP or GIF image for this form, or **Library** to choose an image already in the project's files. **Use project logo** takes you back. If neither the form nor the project has a logo, drop an image on the box or click **Choose from library**; until you do, the form shows the first letter of your project's name on a square of your primary colour.
   - **Brand Name (optional)**: a name shown under the logo.
   - **Branding**: the switch for the "Powered by" badge at the bottom of the form. On plans that can't hide the badge, it's locked on. See [Remove ReTestimonial branding](/help/account/remove-retestimonial-branding).

   The form shows the logo in a small rounded square and crops a wider image to fill it, so a square image works best. To change the logo on every form that uses the project's, change **Project Logo** in your [project settings](/help/account/project-settings).

## What happens next

The builder saves as you work, and the top bar shows when it last saved. While the form is **Active**, the top bar reads **Live — changes are public**: anyone who opens the form from then on sees the new design, on its link and in every embed. The undo and redo buttons in the top bar step back and forward through your changes.

To try a new look without touching the live form, open **More options** in the top bar and choose **Duplicate**. The copy keeps the design, opens in the builder and stays offline until you activate it. It counts as one more form on your plan.

- [Build a collection form](/help/collect/build-a-collection-form)
- [Set up your form's welcome page](/help/collect/welcome-page-and-social-proof)
- [Set up your form's Thank You page](/help/collect/thank-you-page)
- [Share or embed your form](/help/collect/share-your-form)
- [Use your own fonts](/help/account/use-your-own-fonts)