Visual Branding

WittyForm lets you fully customize the look and feel of your forms to match your brand. From colors and fonts to logos and loading screens, every visual element can be tailored so your forms feel like a natural extension of your website and brand identity.

Customizing Colors

Navigate to Settings > Branding > Colors to configure your brand color palette. You can set four key colors:

• Primary: Used for buttons, links, progress bars, and interactive elements. Choose a color that matches your main brand color.
• Background: The background color of your form pages. You can use white for a clean look or a brand-specific shade.
• Text: The primary text color for questions, descriptions, and labels. Ensure sufficient contrast against your background for readability.
• Accent: Used for highlights, hover states, and secondary interactive elements. This adds visual depth alongside your primary color.

Use the color picker or enter hex codes directly. A live preview updates as you make changes so you can see the result instantly.

Fonts

Under Settings > Branding > Fonts, you can select separate fonts for headings and body text:

• Heading font: Applied to form titles, section headers, and question labels. Bold, distinctive fonts work well here.
• Body font: Applied to descriptions, helper text, option labels, and input fields. Choose a highly readable font for body text.

WittyForm includes a curated library of Google Fonts. Select from the dropdown or search by name. Your chosen fonts are automatically loaded when the form is displayed.

Logo Upload

Upload your logo in Settings > Branding > Logo. You can provide two versions:

• Light mode logo: Displayed when the form uses a light background. Typically a dark-colored version of your logo.
• Dark mode logo: Displayed when the form uses a dark background. Typically a white or light-colored version.

Recommended formats are PNG or SVG with a transparent background. The logo appears at the top of your form and in the form header.

Favicon

Upload a custom favicon that appears in the browser tab when someone opens your form. Go to Settings > Branding > Favicon and upload a square image (at least 32x32 pixels). PNG and ICO formats are supported.

Custom Loading Screen

When a form loads, respondents briefly see a loading screen. By default this shows the WittyForm logo. You can replace it with your own logo and brand colors so the loading experience is fully branded. Configure this in Settings > Branding > Loading Screen.

Applying Brand Across All Forms

Your brand settings apply globally to every form in your workspace by default. When you update a color, font, or logo, the change is reflected across all forms automatically. If you need a specific form to use different branding, you can override the global settings at the form level in the form's Design tab.