Help center
Create your first form
Publishing and sharing
View your first responses
Customize your design
Start with a template
Fair Use Policy
Server Mcp

Customize your design

Your form's design builds trust and boosts completion rates. We'll show you how to apply your brand in minutes.
Note: You'll need a published form to customize. If you haven't created one yet, visit
Create your first form.

1. Apply a theme

Access the design panel

  1. Open your form in the builder
  1. Look for the Customization panel on the right side
  1. Click Design to see available themes

Choose and apply

  1. Browse pre-built themes
  1. Preview themes on your form content
  1. Click to apply instantly
  1. 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
Tip: 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
Applying brand colors:
  1. Click Appearance in the customization panel
  1. Update primary brand color for buttons and key elements
  1. Set secondary color for accents and highlights
  1. Choose neutral colors for text and backgrounds
Tip: Use your logo colors as the primary palette. Test colors for accessibility with a contrast checker.

Choose fonts

  1. Click Typography in customization panel
  1. Select font family (Source Sans 3, system fonts, or Google Fonts)
  1. 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

Upload your logo

  1. Click Add cover or Add logo in the customization panel
  1. Upload your image
  1. Adjust positioning and size
Image specifications:
Image Type
Recommended Size
Format
Logo
512x512px
PNG with transparency
Cover image
1200x630px
JPG or PNG
Social preview
1200x630px
JPG or PNG
Tip: Optimize images for web to ensure fast loading times.

4. Style buttons and inputs

Button customization

  1. Go to Button settings in customization
  1. Choose background and text colors
  1. Select border style (rounded, square)
  1. 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

Multi-device testing

  1. Preview on desktop
  1. Test on mobile devices
  1. Check tablet view
  1. 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 screen width
Tip: Complete the form yourself on mobile to ensure a smooth experience.

Advanced styling with CSS

When to use custom CSS

Perfect for:
  • Matching exact brand guidelines
  • Creating unique visual effects
  • Fine-tuning spacing and positioning
  • Advanced hover states

Example CSS snippets

Note: Test CSS changes on multiple screen sizes and browsers before publishing.

Common design issues

"Colors don't have enough contrast"

Solutions:
  • Aim for WCAG AA compliance (4.5:1 ratio for text)
  • Test in high-contrast mode
  • Darken text or lighten backgrounds

"Form doesn't look good on mobile"

Solutions:
  • Use sticky button positioning
  • Increase text size to minimum 16px
  • Test touch targets (buttons should be 44x44px minimum)
  • Reduce image sizes for faster loading

"My logo looks blurry"

Solutions:
  • Upload higher resolution image (512x512px minimum)
  • Use PNG format with transparency
  • Check image isn't being stretched
  • Ensure you uploaded to the correct field

Still having trouble?

If design issues persist:
  • Check browser console for errors (F12 → Console)
  • Try applying a different theme first
  • Clear your browser cache and refresh
  • Contact support with screenshots of the issue

What's next

Cumplimiento RGPD
©2025 Hecho con ❤️ por Mokaform
logo_footer
Hecho en París. 🇫🇷