Form Customization

Overview

Make your forms truly yours with OpnForm’s extensive customization options. Control every aspect of appearance from colors and fonts to layouts and themes.

Brand Colors

Apply your brand’s color scheme

Custom Fonts

Use any Google Font

Themes

Choose from multiple design themes

Layouts

Control form width and structure

Accessing Customization

Open Form Editor

Navigate to your form and click Edit

Go to Design Tab

Click the Design or Customize tab

Adjust Settings

Configure appearance options

Preview Changes

See updates in real-time preview

Save & Publish

Save changes and publish your form

Source: client/components/open/forms/components/form-components/FormCustomization.vue:1

Basic Appearance

Presentation Style

Classic Mode
Focused Mode

Traditional scrollable formAll fields visible on one page (or split with page breaks).Best for:

Multi-column layouts
Forms with many fields
Professional/business contexts
Embedded forms

Customization options:

Form width (centered or full)
Field spacing
Section grouping
Multi-column layouts

Source: client/components/open/forms/components/form-components/FormCustomization.vue:9

Form Themes

Choose from pre-designed themes:

Default Theme

Clean, modern design with subtle shadows and rounded corners.Characteristics:

Soft shadows
Rounded corners
Good contrast
Professional appearance

Notion Theme

Inspired by Notion’s clean interface.Characteristics:

Minimal styling
Clean lines
Ample white space
Modern aesthetic

Simple Theme

No shadows for a flatter look.Characteristics:

Flat design
No shadows
Crisp borders
Straightforward

Minimal Theme

Extremely minimal with maximum simplicity.Characteristics:

Minimal borders
Lots of white space
Very clean
Focus on content

Transparent Theme

See-through backgrounds for overlaying on images.Characteristics:

Transparent backgrounds
Subtle borders
Works with background images
Modern and airy

Source: client/components/open/forms/components/form-components/FormCustomization.vue:12

Color Customization

Accent Color

Set your primary brand color:

{
  "color": "#3B82F6",  // Your brand color
  "dark_mode": "auto",
  "theme": "default"
}

Accent color affects:

Submit buttons
Progress bars
Focus states
Links
Selected options
Checkbox/radio selections

Source: client/components/open/forms/components/form-components/FormCustomization.vue:25

Color Modes

Auto (System)
Light Mode
Dark Mode

Follow system preferenceAutomatically switches between light and dark based on user’s device settings.

{"dark_mode": "auto"}

Best for: Modern, user-friendly experience

Always light themeForm always displays with light background.

{"dark_mode": "light"}

Best for: Traditional forms, high readability

Always dark themeForm always displays with dark background.

{"dark_mode": "dark"}

Best for: Modern apps, reducing eye strain

Source: client/components/open/forms/components/form-components/FormCustomization.vue:40

Typography

Font Family

OpnForm integrates with Google Fonts, giving you access to hundreds of professional fonts.

Setting a custom font:

Open Font Picker

Click on the font family button in customization panel

Search Fonts

Browse or search Google Fonts library

Preview Font

See how the font looks with your content

Apply Font

Click apply to use the selected font

// Font configuration
form.font_family = 'Inter'
// or
form.font_family = 'Roboto'
// or
form.font_family = 'Playfair Display'

Source: client/components/open/forms/components/form-components/FormCustomization.vue:59

Text Options

Language Selection

Multi-language supportOpnForm supports multiple languages for form UI elements:

English
Spanish
French
German
Portuguese
And more…

{"language": "es"}  // Spanish

Source: client/components/open/forms/components/form-components/FormCustomization.vue:79

Right-to-Left Layout

RTL support for Arabic, Hebrew, etc.Enable right-to-left text direction:

{"layout_rtl": true}

Affects:

Text alignment
Form layout direction
Icon positions
Navigation flow

Source: client/components/open/forms/components/form-components/FormCustomization.vue:91

Uppercase Labels

Transform field labels to uppercase

{"uppercase_labels": true}

Gives a more formal, structured appearance.Source: client/components/open/forms/components/form-components/FormCustomization.vue:96

Layout & Sizing

Input Size

Control the size of form inputs:

Small (S)
Medium (M)
Large (L)

Compact inputs

{"size": "sm"}

Best for: Dense forms, tables, embedded contexts

Standard size (default)

{"size": "md"}

Best for: Most forms, balanced appearance

Larger, easier to tap

{"size": "lg"}

Best for: Mobile-first, accessibility, public forms

Source: client/components/open/forms/components/form-components/FormCustomization.vue:107

Border Radius

Control the roundness of corners:

None (Square)
Small (Rounded)
Full (Pill)

Sharp corners

{"border_radius": "none"}

Modern, geometric look

Subtle rounding

{"border_radius": "small"}

Soft, friendly appearance

Maximum roundness

{"border_radius": "full"}

Playful, modern aesthetic

Border radius option not available for transparent theme.

Source: client/components/open/forms/components/form-components/FormCustomization.vue:122

Form Width

Centered
Full Width

Constrained width, centered

{"width": "centered"}

Benefits:

Better readability
Professional look
Works on all screen sizes
Focus on content

Typical max-width: 640-800px

Edge-to-edge layout

{"width": "full"}

Benefits:

Maximum space usage
Multi-column layouts
Embedded contexts
Dashboard integration

Width setting only available in Classic Mode. Focused Mode is always centered.

Source: client/components/open/forms/components/form-components/FormCustomization.vue:140

Advanced Customization

Custom SEO

Optimize your form for search engines:

Meta Title

Custom page title for SEO:

<title>Contact Us - Acme Corp</title>

Meta Description

Description shown in search results:

<meta name="description" content="Get in touch with our team...">

Open Graph Tags

Social media preview customization:

<meta property="og:title" content="...">
<meta property="og:image" content="...">

Custom Code

Custom code requires a custom domain (cloud) or enabled feature (self-hosted).

Add custom HTML, CSS, or JavaScript:

<style>
  /* Override form styles */
  .form-container {
    background: linear-gradient(to right, #667eea, #764ba2);
  }
  
  .submit-button {
    border-radius: 25px;
    text-transform: uppercase;
  }
</style>

Source: client/components/open/forms/components/form-components/FormCustomCode.vue:1

Custom Domain

Use your own domain for forms: Benefits:

Professional branding
Better SEO
Custom SSL
White-label experience
Required for custom code

Setup:

Configure DNS records
Add domain in workspace settings
Verify ownership
Forms available at your domain

Form-Specific Elements

Submit Button

Customize the submit button:

button_text

string

default:"Submit"

Custom button text

button_position

string

default:"center"

Button alignment (left, center, right)

show_progress_bar

boolean

default:true

Display progress indicator (focused mode)

Success Message

Customize what users see after submission:

{
  "submission_confirmation": {
    "type": "message",
    "title": "Thank You!",
    "message": "We've received your submission.",
    "show_social_links": true
  }
}

Or redirect to URL:

{
  "submission_confirmation": {
    "type": "redirect",
    "redirect_url": "https://example.com/thank-you"
  }
}

Branding

Add Logo
Remove OpnForm Branding

Display your logoUpload logo image to appear at top of form.Recommended:

Format: PNG with transparency
Max height: 80px
Optimal: 200-400px wide

Background Customization

Background Options

Solid Color

Use a solid color background:

{
  "background_color": "#f3f4f6"
}

Gradient

Apply gradient backgrounds:

{
  "background": "linear-gradient(to right, #667eea, #764ba2)"
}

Image

Use background image:

{
  "background_image": "https://example.com/bg.jpg",
  "background_overlay": 0.5
}

Tips:

Use high-res images
Add overlay for readability
Optimize file size

Responsive Design

Mobile Optimization

All customizations are automatically mobile-responsive:

Adaptive Layouts

Forms automatically adapt to screen size

Touch-Friendly

All elements optimized for touch

Readable Text

Fonts scale appropriately

Fast Loading

Optimized for mobile networks

Testing Responsive Design

Always test your customized forms on:

Mobile phones (iOS and Android)
Tablets
Desktop browsers
Different orientations (portrait/landscape)

Best Practices

Brand Consistency

Use your exact brand colors and fonts

Contrast

Ensure good contrast for readability

Mobile First

Design for mobile, then enhance for desktop

Test Thoroughly

Test on multiple devices and browsers

Keep It Simple

Don’t over-customize - clarity is key

Accessibility

Maintain good color contrast and font sizes

Customization Limits

Some customization features vary by plan:Free Plan:

Basic themes
Accent color
Standard fonts

Pro Plan:

All themes
Custom fonts
Custom domain
Remove branding

Enterprise:

Everything in Pro
Custom code
Advanced customization
White-label

Next Steps

Form Builder

Build your form structure first

Templates

Start with pre-styled templates

Analytics

Track how design changes affect conversions

Get Started

Core Features

Deployment

Configuration

Integrations

​Overview

Brand Colors

Custom Fonts

Themes

Layouts

​Accessing Customization

​Basic Appearance

​Presentation Style

​Form Themes

​Color Customization

​Accent Color

​Color Modes

​Typography

​Font Family

​Text Options

​Layout & Sizing

​Input Size

​Border Radius

​Form Width

​Advanced Customization

​Custom SEO

​Custom Code

​Custom Domain

​Form-Specific Elements

​Submit Button

​Success Message

​Branding

​Background Customization

​Background Options

​Responsive Design

​Mobile Optimization

Adaptive Layouts

Touch-Friendly

Readable Text

Fast Loading

​Testing Responsive Design

​Best Practices

Brand Consistency

Contrast

Mobile First

Test Thoroughly

Keep It Simple

Accessibility

​Customization Limits

​Next Steps

Form Builder

Templates

Analytics

Build docs developers (and LLMs) love

Overview

Accessing Customization

Basic Appearance

Presentation Style

Form Themes

Color Customization

Accent Color

Color Modes

Typography

Font Family

Text Options

Layout & Sizing

Input Size

Border Radius

Form Width

Advanced Customization

Custom SEO

Custom Code

Custom Domain

Form-Specific Elements

Submit Button

Success Message

Branding

Background Customization

Background Options

Responsive Design

Mobile Optimization

Testing Responsive Design

Best Practices

Customization Limits

Next Steps