Customize Appearance
The Customize Appearance feature lets you personalize the visual presentation of your forms. You can adjust the theme, font sizes, colors, and background to match your brand identity or create a unique user experience.
Key Features
- Real-time preview: See changes instantly in a non-functional form preview
- Basic Mode: Quick customization options for desktop forms
- Advanced Mode: Detailed control over desktop and mobile presentation
- Image integration: Use Unsplash images or upload your own
- Multi-device support: Separate customization for desktop and mobile devices
Getting Started
Enabling Customization
- Open your form editor
- Go to the Settings tab and click on
- Click the
button on the introduction screen
Interface Overview
- Left Panel: Live preview of the form (non-functional)
- Right Panel: Customization controls
- Header: Save/Cancel buttons and customization toggle
- Mode Selector: Switch between Basic and Advanced modes
Basic Mode
Basic mode provides quick access to the most common customization options for desktop forms.
Form Background
Choose how the form background appears:
- White: Solid white background
- Transparent: Fully transparent (shows screen background)
- Transparent Light: Semi-transparent with light overlay
- Transparent Dark: Semi-transparent with dark overlay
How to change:
- Select the "Responses Panel" section
- Click the "Form Background" dropdown
- Choose your preferred option
Form Alignment
Position your form on the screen:
- Start: Aligns form to the left
- Center: Centers form on the screen
- End: Aligns form to the right
How to change:
- Select the "Responses Panel" section
- Click the "Form Alignment" dropdown
- Choose your alignment
Form Width
Adjust the form width (desktop only):
- Use the number input with +/- buttons
- Default width adapts to content
- Custom values allow precise control
How to change:
- Select the "Responses Panel" section
- Adjust the "Form Width" field
- Use +/- buttons or type a value directly
Margins
Add spacing around your form:
- Left Margin: Available when alignment is "Start"
- Right Margin: Available when alignment is "End"
- Measured in pixels
How to change:
- Set alignment to "Start" or "End"
- Adjust the margin field
- Changes apply immediately
Controls Color
Set the primary color for form controls (buttons, inputs, etc.):
How to change:
- Select the "Theme Panel" section
- Click the color picker
- Choose your brand color
- All interactive elements will adopt this color
Background Image
Add a background image to the entire form screen or specific sections.
How to add or change an image:
- Select the desired section ("Theme Panel" in Basic Mode or the corresponding panel in Advanced Mode)
- Click the upload area (cloud icon or dashed rectangle)
- You will see two options:
- Search in gallery: Opens your personal library of previously uploaded images in the system. Ideal for reusing logos, company photos, or frequently used images.
- Search on Unsplash: Direct integration with Unsplash (millions of free professional photos). Just type keywords and pick the desired image — it will be downloaded and applied automatically.
- Select the image you want and click “Use image” (or equivalent)
How to replace the image:
- Click directly on the applied image to reopen the two options (gallery or Unsplash).
How to remove the image:
- Click the trash icon that appears over the applied image.
Tip:
- The gallery keeps all images you’ve previously uploaded, making reuse easy.
- Unsplash is perfect for quickly finding high-quality photos without leaving the tool.
Advanced Mode
Advanced mode offers detailed control over form presentation on both desktop and mobile.
Desktop Customization
The desktop tab contains all customization options for web-based viewing:
Form Settings
Configure general form appearance:
- Form Background: Same options as Basic mode
- Form Width: Adjust container width
- Controls Color: Set the primary theme color
- Border Radius: Round the container corners
- Show Progress Bar: Toggle progress indicator visibility
- Show Title: Toggle form title visibility
Header and Footer
Add custom header/footer sections to your form:
How to enable:
- Expand the "Form" panel
- Check the "Header" or "Footer" boxes
- Configure section-specific settings (see below)
Mobile Customization
Create a separate appearance for mobile devices:
How to enable mobile customization:
- Click the "Mobile" tab (phone icon)
- Toggle the "Enable Environment" switch
- Configure mobile-specific settings
Form Settings
Available in both desktop and mobile:
| Setting | Description | Desktop | Mobile |
|---|---|---|---|
| Form Background | Background style | ✓ | ✓ |
| Form Width | Container width | ✓ | ✗ |
| Controls Color | Primary theme color | ✓ | ✓ |
| Border Radius | Corner rounding | ✓ | ✓ |
| Show Progress Bar | Display progress | ✓ | ✓ |
| Show Title | Display form title | ✓ | ✓ |
Screen Sections
Customize specific regions of the screen around your form:
Available Sections
- All: Applies settings to the entire screen background
- Header: Top section of the screen
- Footer: Bottom section of the screen
- Top: Upper area (full width)
- Top Left: Upper-left corner
- Top Center: Upper-center area
- Top Right: Upper-right corner
- Bottom: Lower area (full width)
- Bottom Left: Lower-left corner
- Bottom Center: Lower-center area
- Bottom Right: Lower-right corner
- Left: Left side (full height)
- Right: Right side (full height)
How to select sections:
- Expand the "Screen" panel
- Check the sections you want to customize
- Each selected section will appear as an expandable accordion below
Section-Specific Customization
Once sections are selected, customize each individually:
Text Options
- Text: Custom text for the section
- Font Color: Text color picker
Background Options
- Background Color: Section background color
- Use the color picker for custom colors
- Click the "Transparent" button for transparent background
Image Options
- Image: Upload or select background image
- Click the upload area to add
- Click the current image to replace
- Click the trash icon to remove
- Repeat Image: Enable to tile the image
Layout Options
- Margin Top: Top spacing
- Margin Left: Left spacing
- Margin Right: Right spacing
- Margin Bottom: Bottom spacing
- Height: Section height in pixels
- Width: Section width in pixels
- Alignment: Content alignment (start, center, end)
- Border Radius: Corner rounding
- Full Screen Width: Expand section to full W width
Note: Available options vary by section type. Not all options apply to every section.
Form Position (Desktop Only)
Fine-tune form placement on the screen:
- Form Alignment: Left, center, or right
- Margin Top: Space from top
- Margin Left: Space from left (when aligned to start)
- Margin Right: Space from right (when aligned to end)
- Margin Bottom: Space from bottom
Managing Customizations
Saving Changes
- Make your desired changes
- Changes are previewed in real time
- Click the "Save" button in the header
- Customizations will be applied to the live form
Note: The Save button only appears when there are unsaved changes.
Canceling Changes
- Click the "Cancel" button to discard unsaved changes
- The form will revert to the last saved state
Disabling Customization
To temporarily disable without losing settings:
- Toggle off the "Customization Enabled" switch in the header
- The form will revert to default appearance
- Toggle back on to re-enable your customizations
Removing Customization
To permanently delete all customizations:
- Click the "Remove Customization" button
- Confirm the action
- All settings will be deleted
- The form will return to default appearance
Images
- Resolution: Use high-quality images (minimum 1920x1080 for backgrounds)
- File Size: Optimize images to reduce load time (< 500KB recommended)
- Format: JPEG for photos, PNG for graphics with transparency
- Content: Ensure images don’t distract from form content
Colors
- Contrast: Ensure sufficient contrast between text and background
- Consistency: Use your brand colors consistently
- Accessibility: Test colors for color-blind accessibility
- Controls Color: Choose a color that stands out against backgrounds
Layout
- Alignment: Center alignment works best for most forms
- Width: Keep form width between 600-800px for readability
- Margins: Use consistent spacing throughout
- Mobile: Always test mobile customization on real devices
Performance
- Sections: Enable only the sections you really need
- Images: Compress images before uploading
- Testing: Preview your form on different devices and browsers
Frequently Asked Questions
Q: Can I have different appearances for desktop and mobile?
A: Yes! Use Advanced Mode and customize each environment separately. Enable mobile customization in the Mobile tab.
Q: Do customizations affect form functionality?
A: No, customizations are purely visual and do not affect logic, validation, or data collection.
Q: Can I undo changes after saving?
A: Yes, you can modify or remove customizations at any time. There is no built-in undo history, so document your settings if needed.
Q: What happens if I disable mobile customization?
A: The desktop theme will be used on mobile devices.
Q: Can I copy customizations from one form to another?
A: This feature is not currently available. You’ll need to recreate customizations manually for each form.
Q: How do I know which image size to use?
A: For full-screen backgrounds, use at least 1920x1080. For sections, size depends on the section dimensions you set.
Q: Why don’t I see some customization options?
A: Some options are only available in Advanced Mode or for specific section types. Switch to Advanced Mode for full control.
Q: Can I use custom CSS?
A: Direct CSS customization is not available in this interface. Use the provided controls for visual adjustments.
Q: What’s the difference between "Transparent" and transparent background color?
A: The "Transparent" form background option offers different transparency levels. The transparent button in section customization sets the background to fully transparent (#00000000).
Q: How do I create a branded experience?
A:
- Use your brand colors for Controls Color
- Add your logo/brand image to the Header section
- Use brand-appropriate background images
- Maintain consistent spacing and alignment
- Test on all devices