Design Customization Guide

​

Accessing Design Settings

1. Open your form in the Form Builder
2. Click the “Design” button in the top toolbar
3. Design panel slides in from the right side
4. Changes preview in real-time

​

Quick Themes

Pre-built color schemes for instant styling:

​

Available Themes

Emerald (Default)

• Primary: Emerald green (#10B981)
• Text: Dark gray (#111827)
• Accent: Light emerald (#6EE7B7)
• Best for: Modern, fresh, professional

Teal

• Primary: Teal blue (#14B8A6)
• Text: Dark gray (#111827)
• Accent: Light teal (#5EEAD4)
• Best for: Tech, healthcare, wellness

Indigo

• Primary: Indigo blue (#6366F1)
• Text: Dark gray (#111827)
• Accent: Light indigo (#A5B4FC)
• Best for: Corporate, professional, trustworthy

Rose

• Primary: Rose pink (#F43F5E)
• Text: Dark gray (#111827)
• Accent: Light rose (#FDA4AF)
• Best for: Creative, feminine, energetic

Amber

• Primary: Amber orange (#F59E0B)
• Text: Dark gray (#111827)
• Accent: Light amber (#FCD34D)
• Best for: Warm, friendly, attention-grabbing

Minimal

• Primary: Dark gray (#111827)
• Text: Medium gray (#6B7280)
• Accent: Light gray (#D1D5DB)
• Best for: Clean, professional, simple

​

Applying a Theme

1. Click theme button in “Quick Themes” section
2. All colors update instantly
3. Preview shows changes in real-time
4. Customize further if needed

​

Color Customization

​

Primary Color

What it affects:

• Button backgrounds
• Progress bar
• Question numbers
• Links
• Selected states
• Focus indicators

How to change:

1. Click color picker circle
2. Select color from palette, OR
3. Type hex code (e.g., #3B82F6), OR
4. Click preset color swatches below

Preset Colors:

• Blue: #3B82F6
• Purple: #8B5CF6
• Pink: #EC4899
• Green: #10B981
• Orange: #F59E0B
• Red: #EF4444

Tips:

• Use your brand color
• Ensure good contrast with white/light backgrounds
• Test on mobile devices
• Avoid very light colors (hard to see)

​

Text Color

What it affects:

• Question text
• Description text
• Answer text
• Labels

How to change:

• Same as primary color
• Recommended: Dark grays (#111827, #1F2937, #374151)

Tips:

• Dark text on light background (high contrast)
• Ensure readability
• Don’t use pure black (#000000) - too harsh
• Test with long question text

​

Background Color

What it affects:

• Form background
• Behind all questions
• Overall form appearance

How to change:

• Color picker or hex input
• Recommended: Light colors or white

Options:

• White: #FFFFFF (clean, professional)
• Light Gray: #F9FAFB (softer, easier on eyes)
• Off-White: #FEFEFE (subtle, warm)
• Cream: #FFFEF9 (warm, friendly)

Tips:

• Light backgrounds work best
• Avoid dark backgrounds (harder to read)
• Ensure contrast with text color
• Test on different devices

​

Input Background Color

What it affects:

• Text input fields
• Dropdowns
• Textareas
• Number inputs

How to change:

• Color picker or hex input
• Usually white or light gray

Tips:

• Should contrast with form background
• White (#FFFFFF) is standard
• Light gray (#F9FAFB) for subtle difference

​

Button Color

What it affects:

• “Next” and “Submit” buttons
• Action buttons
• CTA elements

How to change:

• Color picker or hex input
• Often same as primary color

Tips:

• Make buttons stand out
• Use contrasting color to form background
• Ensure button text is readable
• Test hover states

​

Button Text Color

What it affects:

• Text inside buttons
• Button labels

How to change:

• Color picker or hex input
• Usually white for colored buttons

Tips:

• High contrast with button background
• White (#FFFFFF) for dark buttons
• Dark for light buttons
• Test readability

​

Typography

​

Font Family

Available Fonts:

• Inter (Default) - Modern, professional, clean
• Roboto - Friendly, readable, versatile
• Open Sans - Neutral, clean, accessible
• Lato - Elegant, professional, readable
• Poppins - Modern, geometric, bold
• Montserrat - Urban, stylish, contemporary
• Merriweather - Serif, classic, elegant

How to change:

1. Select from “Font Family” dropdown
2. Font updates instantly in preview
3. Applies to all text in form

Tips:

• Use web-safe fonts
• Sans-serif fonts better for screens
• Serif fonts for formal/traditional brands
• Test with long question text
• Ensure readability at different sizes

​

Font Size

What it controls:

• Question text size
• Answer text size
• Button text size

Available Sizes:

• Small: Compact, more questions visible
• Medium (Default): Balanced, readable
• Large: Big, accessible, fewer questions visible

Tips:

• Medium is best for most forms
• Large for accessibility/elderly audiences
• Small for data-heavy forms
• Test on mobile (looks larger)

​

Layout & Spacing

​

Input Radius (Border Radius)

What it affects:

• Input field corners
• Button corners
• Card corners

Options:

• None (0px): Sharp, modern, geometric
• Small (4px): Subtle, professional
• Medium (8px): Standard, balanced
• Large (12px): Rounded, friendly
• Full (999px): Pill-shaped, very rounded

Tips:

• Match your brand style
• Medium (8px) is versatile
• Full radius for modern, playful forms
• None for corporate, serious forms

​

Show Question Numbers

Toggle on/off:

• Shows “1, 2, 3…” before questions
• Helps users track progress
• Circular badges with primary color

When to enable:

• Long forms (10+ questions)
• Survey-style forms
• Forms with logic/branching

When to disable:

• Short forms (< 5 questions)
• Single-page forms
• Minimal design preference

​

Progress Bar

Toggle on/off:

• Shows completion percentage
• Located at top of form
• Updates as user progresses

When to enable:

• Long forms (helps motivation)
• Multi-step processes
• Surveys

When to disable:

• Short forms
• Single-question forms
• When you don’t want to show form length

​

Background Image

Add a custom background image to your form:

​

Uploading Background

1. Go to “Background” section in design panel
2. Click “Upload Image” or drag & drop
3. Image uploads and applies instantly
4. Preview shows with image

Supported Formats:

• JPG/JPEG
• PNG
• WebP
• SVG

Recommended:

• Size: 1920x1080px or larger
• File size: < 2MB
• Resolution: 72-150 DPI
• Aspect ratio: 16:9 or 4:3

​

Background Image Settings

Position:

• Center: Image centered in viewport
• Top: Image aligned to top
• Bottom: Image aligned to bottom
• Left: Image aligned to left
• Right: Image aligned to right

Size:

• Cover: Image covers entire area (may crop)
• Contain: Entire image visible (may have gaps)
• Auto: Original size

Repeat:

• No Repeat: Image shows once
• Repeat: Image tiles (for patterns)
• Repeat-X: Repeat horizontally
• Repeat-Y: Repeat vertically

Overlay:

• Adds semi-transparent color over image
• Improves text readability
• Adjust opacity (0-100%)
• Choose overlay color

Tips:

• Use subtle, non-distracting images
• Add overlay for better text readability
• Avoid busy/complex backgrounds
• Test on mobile (images may crop differently)
• Optimize image size for fast loading

​

Removing Background Image

1. Go to “Background” section
2. Click “Remove Image” button
3. Reverts to background color

​

Logo

Add your company logo to the form:

​

Uploading Logo

1. Go to “Branding” section
2. Click “Upload Logo” or drag & drop
3. Logo appears at top of form

Supported Formats:

• PNG (transparent backgrounds recommended)
• SVG (vector, best quality)
• JPG

Recommended:

• Size: 200x60px to 400x120px
• File size: < 500KB
• Transparent background (PNG)
• Horizontal logo works best

​

Logo Settings

Position:

• Left: Left-aligned (default)
• Center: Centered
• Right: Right-aligned

Size:

• Small: Compact, subtle
• Medium: Standard (default)
• Large: Prominent, eye-catching

Link URL:

• Optional: Make logo clickable
• Links to your website
• Opens in new tab

Tips:

• Use high-resolution logo
• Transparent background looks best
• Keep file size small for fast loading
• Test on mobile (logos shrink on small screens)

​

Removing Logo

1. Go to “Branding” section
2. Click “Remove Logo” button
3. Logo removed from form

​

Welcome Screen Customization

​

Welcome Screen Settings

Icon/Emoji:

• Choose emoji to display (e.g., 👋, 🎉, 📝)
• Large, centered at top
• Sets tone for form

Title:

• Main welcome message
• Large, bold text
• Example: “Welcome!”, “Let’s get started”

Description:

• Subtitle or instructions
• Smaller text below title
• Example: “This survey takes 5 minutes”

Button Text:

• Label for start button
• Default: “Start”
• Custom: “Begin”, “Let’s go”, “Continue”

Colors:

• Inherits from main form design
• Title uses text color
• Button uses primary color

Tips:

• Keep welcome screen short and inviting
• Set expectations (time, purpose)
• Use friendly, encouraging tone
• Match brand voice

​

Thank You Page Customization

​

Thank You Page Settings

Icon/Emoji:

• Choose emoji (e.g., 🎉, ✅, 💝, 🙏)
• Celebratory feel
• Large, centered

Title:

• Thank you message
• Large, bold
• Example: “Thank you!”, “Submission received”

Description:

• Additional message or next steps
• Example: “We’ll be in touch soon”

Redirect URL (optional):

• Auto-redirect after X seconds
• Sends user to your website
• Example: Redirect to /thank-you page after 3 seconds

Colors:

• Inherits from main form design
• Uses same color scheme

Tips:

• Show appreciation
• Provide next steps or timeline
• Include contact info if needed
• Consider redirect to your website

​

Mobile Responsiveness

All design changes are mobile-responsive: Automatic Adjustments:

• Fonts scale down on mobile
• Images resize proportionally
• Buttons become full-width
• Spacing adjusts for small screens
• Logo shrinks to fit

Testing Mobile:

1. Use device preview in builder (Desktop/Tablet/Mobile)
2. Or preview on actual mobile device
3. Check text readability
4. Verify button sizing
5. Test background image cropping

Mobile Tips:

• Avoid very small fonts
• Ensure buttons are tap-friendly (min 44px height)
• Test background images (may crop on mobile)
• Keep logo simple (detailed logos hard to see on small screens)

​

Saving Design Changes

Auto-Save:

• Changes save automatically after 800ms
• “Unsaved” badge appears during edits
• “Saved” confirmation when complete

Manual Save:

• Click “Save Changes” button at bottom
• Applies all design settings
• Confirmation message appears

Discarding Changes:

• Click “X” to close panel without saving
• Confirmation prompt if unsaved changes
• Changes revert to last saved state

​

Design Best Practices

​

Color

Do:

• Use your brand colors
• Ensure high contrast (text vs background)
• Test for colorblind accessibility
• Stick to 2-3 main colors

Don’t:

• Use too many colors (confusing)
• Use low-contrast combinations (hard to read)
• Use bright colors for backgrounds (eye strain)
• Forget to test on mobile

​

Typography

Do:

• Use readable font sizes
• Stick to 1-2 font families
• Ensure good line height
• Test with long text

Don’t:

• Mix too many fonts
• Use decorative fonts for body text
• Make text too small (< 14px)
• Use all caps for long text

​

Images

Do:

• Optimize image file sizes
• Use subtle backgrounds
• Add overlay for readability
• Test on different screen sizes

Don’t:

• Use busy/distracting images
• Upload huge files (slow loading)
• Forget mobile cropping
• Use images with important text (may crop)

​

Branding

Do:

• Add your logo
• Use brand colors consistently
• Match your website style
• Include brand voice in text

Don’t:

• Overdo branding (distracting)
• Use low-quality logos
• Forget white-label option (Pro)
• Ignore mobile logo sizing

​

Accessibility

Do:

• Use high-contrast colors
• Choose readable fonts
• Make buttons large enough (44px min)
• Test with screen readers (coming soon)

Don’t:

• Rely only on color to convey information
• Use colors that clash
• Make text too small
• Forget keyboard navigation

​

Previewing Design

Preview Options:

• Desktop preview (in builder)
• Tablet preview (in builder)
• Mobile preview (in builder)
• Full preview (new tab)

How to Preview:

1. Click device icons in builder, OR
2. Click “Preview” button (opens new tab)
3. Test form as respondent would see it
4. Verify all design elements

What to Check:

• Text readability
• Button visibility
• Logo sizing
• Background display
• Color contrast
• Mobile responsiveness

​

Resetting Design

Reset to Default:

1. Go to Design Settings
2. Scroll to bottom
3. Click “Reset to Defaults” button
4. Confirmation prompt
5. All design settings revert to defaults

What Resets:

• All colors (back to Emerald theme)
• Fonts (back to Inter, Medium)
• Background (back to white)
• Logo (removed)
• Background image (removed)

What Doesn’t Reset:

• Form structure
• Questions
• Settings
• Submissions

​

Copying Design to Another Form

Export Design:

1. Open source form
2. Go to Design Settings
3. Click “Copy Design” button
4. Design copied to clipboard

Import Design:

1. Open target form
2. Go to Design Settings
3. Click “Paste Design” button
4. All design settings applied

What Copies:

• All colors
• Fonts
• Layout settings
• Background image/color
• Logo

What Doesn’t Copy:

• Questions
• Form settings
• Submissions

​

Next Steps

• Form Settings - Configure form behavior
• Branding Guide - Complete branding tips
• White Label Option - Remove TopFormBuilder branding (Pro)
• Custom Domains - Use your own domain (Pro)

---

Need help? Contact [email protected]