Customizing Form Themes

A well-designed form builds trust and improves completion rates. WittyForm's theme editor lets you customize every visual aspect of your form so it looks professional and on-brand.

Opening the Theme Editor

To access the theme editor, open your form in the editor and click the Theme tab in the right panel (or click the palette icon in the toolbar). The theme editor shows a live preview of your changes as you make them.

Colors

The color section lets you define the visual palette for your form. You can customize:

• Primary color: Used for buttons, active states, and accents. This is the main brand color that drives the overall feel of your form.
• Background color: The color behind the form content. Choose white for a clean look, or match your website's background.
• Text color: The color used for labels, descriptions, and body text.
• Input background: The fill color inside text inputs, dropdowns, and other interactive fields.
• Input border: The outline color around input fields.
• Error color: The color used for validation error messages and field highlights when a required field is missed.

Click on any color swatch to open a color picker. You can also enter a hex code directly for precise control.

Fonts

Choose a font family for your form text. WittyForm provides a curated list of web-safe and Google Fonts options:

• Heading font: Applied to the form title and section headings.
• Body font: Applied to labels, descriptions, placeholder text, and response inputs.

You can also adjust the base font size to make text larger or smaller overall. This setting scales all text proportionally.

Border Radius

Control the roundness of corners across your form. The border radius setting affects buttons, input fields, cards, and containers. Options range from sharp (0px) for a geometric look to fully rounded for a soft, modern feel. Drag the slider or enter a specific pixel value.

Spacing

Adjust the amount of space between fields and sections. More spacing creates a relaxed, airy layout, while less spacing makes the form compact. This is especially useful when balancing between showing more fields on screen and keeping the form easy to read.

Background Images

Add a background image to your form for a more immersive experience. You can:

• Upload an image file (JPG, PNG, or WebP).
• Choose how the image is displayed: cover, contain, or tiled.
• Adjust the overlay opacity to ensure text remains readable over the image.

Background images work best for landing-page-style forms and event registrations where visual impact matters.

Logo

Add your company or project logo to the top of your form. Upload an image and choose its alignment (left, center, or right). The logo appears above the form title and reinforces your brand identity. On the Pro plan with white-label enabled, you can remove the WittyForm branding entirely.

Custom CSS

When the design options aren't enough, write your own CSS. In the Design panel, open Customize, scroll to Custom CSS and click Add CSS. The editing canvas shows your CSS as you type, and the editor points out any problem by line. Click Apply to publish it.

Some common uses:

• Pill-shaped buttons or a different look for the submit button.
• A highlighted style for the answer a visitor picked.
• A different style for one question or one question type.
• Spacing and sizes tuned for phones.

To style a single question, select it, switch the Design panel to This field and click Style this question. The full list of selectors, rules and limits is in the Custom CSS reference.

Note: Custom CSS is included in the Pro and Enterprise plans. It shows on your form link, your custom domains and every embed.

Saving and Reusing Themes

After customizing your theme, you can save it for reuse across multiple forms:

1. Click Save Theme at the bottom of the theme editor.
2. Give your theme a name (e.g., "Company Brand" or "Event Theme").
3. Click Save.

Saved themes appear in the My Themes section of the theme editor. To apply a saved theme to any form, select it from the list and all visual settings will be applied instantly.

Applying Themes Across Forms

When you want all your forms to look consistent, apply the same saved theme to each one. Open any form, go to the theme editor, and select your saved theme. Changes to a saved theme do not automatically propagate to forms already using it: you will need to re-apply the theme to update existing forms.

Tips for Great Form Design

• Use high-contrast colors between text and background for readability.
• Stick to 1-2 fonts maximum to maintain a clean, professional look.
• Match your form's primary color to your brand for a consistent experience.
• Test your theme on both desktop and mobile before publishing.
• Use background images sparingly: they can be distracting if overused.