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

For advanced customization beyond what the visual editor offers, you can write custom CSS. Click Custom CSS at the bottom of the theme editor to open a code editor. Here you can target specific elements and override any default styles.

Some common use cases for custom CSS:

• Custom hover effects on buttons.
• Different styles for specific field types.
• Animations or transitions.
• Fine-tuning responsive behavior on specific screen sizes.

Note: Custom CSS is available on the Pro plan. Changes are applied in real-time so you can see the effect immediately.

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.