Customize your design
Learn how to customize your form design, apply your branding, and create professional-looking forms.
Your form's design builds trust and boosts completion rates. We'll show you how to apply your brand in minutes.
You'll need a published form to customize. If you haven't created one yet, visit Create your first form.
1. Apply a theme
Open your form in the builder.
Find the Customization panel on the right side.
Click Design to see available themes, then click one to apply it instantly. All colors, fonts, and spacing update automatically.
Theme categories:
- Professional Business — clean, corporate styling with high contrast
- Creative and Modern — bold colors and contemporary fonts
- Minimalist Clean — simplified elements with white space
- Industry-Specific — healthcare, technology, creative, finance
After applying a theme, you can override individual settings while keeping the overall style.
2. Customize colors and fonts
Update your colors
Essential color elements:
- Text colors — questions, descriptions, help text
- Interactive elements — buttons, input fields, focus states
- Background — form backdrop and section backgrounds
Click Appearance in the customization panel.
Update the primary brand color for buttons and key elements.
Set a secondary color for accents and highlights.
Choose neutral colors for text and backgrounds.
Use your logo colors as the primary palette. Test colors for accessibility with a contrast checker.
Choose fonts
Click Typography in the customization panel.
Select a font family (Source Sans 3, system fonts, or Google Fonts).
Adjust text sizes if needed.
Readability guidelines:
- Minimum 16px for body text
- High contrast between text and background
- Match your website's fonts when possible
- Test on mobile devices
3. Add your logo and images
Click Add cover or Add logo in the customization panel.
Upload your image.
Adjust positioning and size.
| Image Type | Recommended Size | Format |
|---|---|---|
| Logo | 512×512px | PNG with transparency |
| Cover image | 1200×630px | JPG or PNG |
| Social preview | 1200×630px | JPG or PNG |
Optimize images for web to ensure fast loading times.
4. Style buttons and inputs
Go to Button settings in customization.
Choose background and text colors.
Select a border style (rounded, square).
Set button size and padding.
Mobile positioning:
- Sticky at bottom (recommended) — always visible, higher completion rates
- Normal position — traditional placement after form content
Button text best practices:
- Action-oriented: "Submit Survey" vs "Submit"
- Value-focused: "Get My Free Report" vs "Download"
- Clear expectations: "Send Feedback" vs "Click Here"
5. Test your design
Preview on desktop.
Test on mobile devices.
Check the tablet view.
Try different browsers.
What to check:
- Text is readable at all sizes
- Buttons are easy to tap on mobile
- Colors have sufficient contrast
- Images load quickly
- Form fits the screen width
Complete the form yourself on mobile to ensure a smooth experience.
Advanced styling with CSS
Custom CSS is perfect for matching exact brand guidelines, creating unique visual effects, fine-tuning spacing, and advanced hover states.
/* Custom button hover effect */
.mf-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* Brand-specific font */
.mf-survey-main {
font-family: 'Your Brand Font', sans-serif;
}Test CSS changes on multiple screen sizes and browsers before publishing.
Common design issues
Still having trouble?
Check the browser console for errors (F12 → Console), try applying a different theme first, clear your browser cache and refresh, or contact support with screenshots of the issue.