Themes

Creating Custom Themes

Design reusable themes with custom colors, fonts, and logos. Apply themes across multiple forms for consistency.

What Are Themes?

Themes are reusable design templates that you can apply to multiple forms. Instead of customizing colors, fonts, and logos for each form individually, you can create a theme once and apply it to any form. This ensures brand consistency across all your forms and saves time when creating new forms.

Theme Components:

  • Colors: Header color, submit button color, text colors, and background colors
  • Font Family: Choose from Arial, Georgia, Helvetica, or Times New Roman
  • Logo: Optional logo URL that appears in the form header

💡 Benefits of Using Themes:

  • Brand Consistency: Ensure all forms use the same colors, fonts, and logo
  • Time Savings: Create a theme once and apply it to multiple forms instantly
  • Easy Updates: Update a theme once to change all forms using it
  • Organization: Create different themes for different clients, projects, or brands

Creating a Theme

Create a new theme from the Themes page in your dashboard. You'll configure all the visual elements that make up your theme.

Step-by-Step:

  1. 1Go to Themes in your dashboard
  2. 2Click + Create New
  3. 3Enter a Theme Name (e.g., "Company Theme", "Client A", "Brand Colors")
  4. 4Select a Font Family from the dropdown (Arial, Georgia, Helvetica, or Times New Roman)
  5. 5Configure Colors using the color pickers (see Color Configuration below)
  6. 6Optionally add a Logo URL (see Logo Configuration below)
  7. 7Click Create Theme

Color Configuration

Themes include five color settings that control the visual appearance of your forms. Use the color picker or enter hex color codes directly.

Required Colors:

  • 1
    Header Color: The background color for the form header. This is typically your brand's primary color.
  • 2
    Submit Button Color: The background color for the submit button. Often a contrasting or accent color to make the button stand out.
  • 3
    Form Primary Text Color: The main text color used for field labels, headings, and form content. Typically dark (e.g., #111827 or #000000).
  • 4
    Form Background Color: The background color for the form container. Usually white (#FFFFFF) or a light color.
  • 5
    Page Background Color: The background color for the page around the form. Often a light gray (#F9FAFB) or white.

✅ Color Best Practices:

  • Use your brand's color palette for consistency
  • Ensure sufficient contrast between text and background colors for accessibility
  • Use hex color codes (e.g., #6D28D9) for precise color matching
  • Test colors on both light and dark backgrounds if you support dark mode

Font Family Selection

Choose a font family that matches your brand. The selected font will be applied to all text in forms using this theme.

Available Font Families:

  • Arial: A clean, modern sans-serif font. Great for professional forms and general use.
  • Georgia: A serif font with excellent readability. Perfect for formal documents and traditional brands.
  • Helvetica: A classic sans-serif font. Widely used in professional and corporate settings.
  • Times New Roman: A traditional serif font. Best for formal or academic forms.

Logo Configuration

Add a logo to your theme to display in the form header. Logos are optional but recommended for brand recognition.

Adding a Logo:

  1. 1Host your logo image on a publicly accessible URL (e.g., your website, CDN, or image hosting service)
  2. 2Copy the full URL to your logo image (must include http:// or https://)
  3. 3Paste the URL into the Logo URL field
  4. 4A preview will appear showing how your logo will look

Logo Best Practices

  • Recommended size: 200-300px wide
  • Format: PNG or SVG with transparent background works best
  • Readability: Ensure logo is readable at small sizes
  • Accessibility: Use HTTPS URLs for secure image loading

Managing Themes

Once created, you can view, edit, and delete themes from the Themes page.

Viewing Themes

Each theme card shows:

  • Theme name and creation date
  • Color swatches showing all configured colors
  • Font family
  • Logo preview (if added)
  • Number of forms using the theme

Editing Themes

Update any aspect of a theme:

  1. 1Click the Edit button (pencil icon) on the theme card
  2. 2Modify any colors, font, or logo URL
  3. 3Click Update Theme
  4. 4Changes will automatically apply to all forms using this theme

Deleting Themes

Remove themes that are no longer needed:

  1. 1Click the Delete button (trash icon) on the theme card
  2. 2Confirm the deletion
  3. 3Note: Forms using the deleted theme will revert to default styling

Applying Themes to Forms

Once you've created a theme, apply it to any form in the Form Builder. You can also override individual theme settings on a per-form basis if needed.

How to Apply a Theme:

  1. 1Open a form in the Form Builder
  2. 2Scroll to the Themes section in the settings panel
  3. 3Select a theme from the Select Theme dropdown
  4. 4All theme colors, fonts, and logo will be applied automatically
  5. 5You can still customize individual colors if needed (overrides theme)
  6. 6Click Save Form to apply changes

Best Practices

  • Use Descriptive Names: Name your themes clearly (e.g., "Company Brand", "Client A Theme", "Holiday Campaign") to easily identify their purpose.
  • Create Multiple Themes: Create separate themes for different clients, projects, or campaigns. This keeps branding organized and makes it easy to switch between styles.
  • Test Before Applying: Preview your theme in the Form Builder before applying it to ensure colors and fonts look good together.
  • Update Themes Carefully: Remember that updating a theme affects all forms using it. Test changes on a single form first if you're unsure.
  • Monitor Usage: Check which forms are using each theme before deleting it. Forms will revert to default styling if their theme is deleted.

Related Articles

Form Branding & Themes

Learn about form branding and applying themes

How to Build Forms

Complete guide to form creation