Form Layouts and Themes
The visual presentation of your form impacts completion rates. WittyForm provides flexible layout options and a comprehensive theming system so your forms match your brand and provide the best possible experience for respondents.
How Forms Are Presented
WittyForm forms use a single, focused presentation: respondents see one question per screen, with a smooth transition to the next. This conversational flow feels like a guided interview and keeps attention on the current question, which tends to lift completion rates compared with long scrolling forms.
- Best for: surveys, quizzes, lead qualification, and high value forms.
- Why it works: a focused experience, low cognitive load, and elegant transitions.
- Keep in mind: respondents move forward one step at a time and cannot jump ahead to a question they have not reached.
Grouping Questions on One Screen
When you want several related questions to appear together (for example, first name, last name, and email side by side), add a Multi Question field and place the questions inside it. That group renders on a single screen, while the rest of the form continues one question at a time.
Theme System
Every form has a theme that controls its visual appearance. Open the theme editor from the Design panel in the builder. The editor has three tabs: Colors, Typography, and Logo. Changes preview live as you make them.
Colors
The Colors tab lets you set five colors:
- Background: The overall form background.
- Text: Labels, questions, descriptions, and body text.
- Primary: Accent color used for active states, progress, and links.
- Button: The fill color of the primary action buttons.
- Button text: The text color shown on those buttons.
Typography
The Typography tab provides a single font family selector. Choose from a curated list of web fonts:
- Inter
- Roboto
- Open Sans
- Lato
- Montserrat
- Poppins
- Playfair Display
- Merriweather
- Raleway
- Nunito
The selected font applies to the whole form.
Logo
Upload a logo in the Logo tab and choose where it sits at the top of the form:
- Position: top left or top center.
Note: On the Pro plan, you can remove the "Powered by WittyForm" branding entirely for a fully white-labeled experience.
Responsive Behavior
All WittyForm themes are responsive by default. The form automatically adapts to the respondent's screen size:
- Desktop: Form displays at a comfortable reading width, centered on the page.
- Tablet: Form stretches to fill available width with adjusted padding.
- Mobile: Full-width layout with stacked fields, larger touch targets, and optimized input sizes for on-screen keyboards.
You can preview each breakpoint using the device toggle buttons in the top toolbar of the builder. No additional configuration is needed for responsive behavior.
Saving and Reusing Themes
After configuring a theme, click Save as Theme to store it for reuse across other forms. Saved themes appear in the theme picker when creating or editing any form in your workspace.