Design your form

Open the Design tabCopy Anchor Link

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.

Set the theme and coloursCopy Anchor Link

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.

Choose your fontsCopy Anchor Link

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.

Set the progress indicator and page animationCopy Anchor Link

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.

Add your logo and nameCopy Anchor Link

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.

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.