Form Customization

Formify provides powerful customization options that allow you to design forms that perfectly match your brand identity. This guide covers all the ways you can personalize your forms.

Visual Styling

Themes

Formify offers several pre-designed themes that provide a cohesive design with just one click:

  • Classic: A clean, professional design suitable for business contexts
  • Minimal: Stripped-back styling for a focused experience
  • Vibrant: Bold colors and modern elements for engaging forms
  • Elegant: Refined styling with subtle animations and typography

To apply a theme:

  1. Go to Form Settings > Appearance
  2. Select a theme from the dropdown
  3. Customize individual elements as needed

Colors

Formify gives you complete control over your form's color scheme:

  • Primary Color: Used for buttons, selected items, and accents
  • Secondary Color: Used for secondary elements and hover states
  • Background Color: Main form background
  • Text Color: Primary text color
  • Error Color: Used for validation errors and alerts
  • Success Color: Used for success messages and confirmations

You can also create custom color schemes by:

  1. Going to Form Settings > Appearance > Colors
  2. Selecting "Custom" from the color scheme dropdown
  3. Setting each color individually or entering hex codes

Typography

Customize the text appearance throughout your form:

  • Font Family: Choose from 20+ web-safe fonts or use your own custom fonts
  • Font Size: Set base size for all text elements
  • Font Weight: Adjust boldness for different text elements
  • Line Height: Control spacing between lines
  • Text Alignment: Left, center, or right alignment

For advanced typography settings:

  1. Go to Form Settings > Appearance > Typography
  2. Expand "Advanced Typography Settings"
  3. Customize specific elements like headings, labels, and help text

Layout and Spacing

Control the layout and spacing of your form:

  • Form Width: Set a maximum width or use full width
  • Padding: Control internal spacing
  • Element Spacing: Adjust vertical space between elements
  • Column Layout: Create multi-column sections for related fields
  • Responsive Breakpoints: Customize how your form adapts to different screen sizes

Backgrounds

Add visual interest with custom backgrounds:

  • Solid Colors: Simple one-color backgrounds
  • Gradients: Smooth transitions between colors
  • Images: Upload custom background images
  • Patterns: Apply subtle textures or patterns
  • Opacity Control: Adjust transparency of backgrounds

Form Elements Styling

Input Fields

Customize the appearance of input fields:

  • Border Style: None, solid, dashed, or dotted
  • Border Width: Control thickness of borders
  • Border Radius: Create rounded corners
  • Input Height: Control vertical size of fields
  • Focus Effects: Customize how fields look when selected
  • Placeholder Text: Style the placeholder text separately

Buttons

Design eye-catching buttons:

  • Button Style: Filled, outlined, flat, or custom
  • Button Size: Small, medium, large, or custom dimensions
  • Button Alignment: Left, center, or right
  • Hover Effects: Change appearance on hover
  • Icon Support: Add icons to buttons
  • Custom Text: Change "Submit" to any text

Progress Indicators

For multi-page forms, customize how progress is displayed:

  • Progress Bar Style: Linear, circles, numbers, or text
  • Progress Bar Position: Top, bottom, or floating
  • Progress Bar Colors: Style each state (active, completed, upcoming)
  • Show/Hide Page Titles: Include page names in the progress display

Branding Elements

Logo

Add your brand identity:

  • Logo Upload: Add your company logo
  • Logo Position: Place your logo at the top, bottom, or custom position
  • Logo Size: Control the dimensions
  • Link Logo: Make your logo clickable (optional)

Header and Footer

Add branded header and footer sections:

  • Header/Footer Background: Different from main form background
  • Header/Footer Content: Add text, images, or HTML
  • Height Control: Adjust vertical size
  • Sticky Options: Make headers or footers stay visible while scrolling

Form Behavior Customization

Navigation

Customize how users move through your form:

  • Button Text: Change "Next", "Previous", "Submit", etc.
  • Navigation Style: Buttons, links, or auto-advance
  • Keyboard Navigation: Enable/disable tab and enter key functions
  • Save Progress: Allow users to save and continue later

Animations and Transitions

Add polish with subtle animations:

  • Page Transitions: How multi-page forms transition between pages
  • Element Appearance: Fade, slide, or other entrance animations
  • Hover Effects: Interactive elements' behavior on hover
  • Completion Effects: Special animations for successful submissions

Submission Behavior

Customize what happens when a form is submitted:

  • Success Message: Customize text, styling, and animations
  • Redirect Options: Send users to a specific URL after submission
  • Show/Hide Elements: Control which elements remain visible
  • Social Sharing: Add buttons to share completion

Advanced Customization

Custom CSS

For developers, Formify allows complete control with custom CSS:

  1. Go to Form Settings > Appearance > Advanced
  2. Add your CSS in the Custom CSS editor
  3. Use CSS to override any default styling

Custom JavaScript

Add custom behaviors and integrations:

  1. Go to Form Settings > Advanced > JavaScript
  2. Add code in the Custom JavaScript editor
  3. Use the Formify JavaScript API to interact with form data and events

HTML Embedding

Customize how your form appears when embedded:

  • Container Styling: Control the wrapper when embedded
  • Responsive Behavior: How the embedded form adapts to container size
  • Scroll Behavior: Control scrolling within embedded forms

White Labeling

For Business and Enterprise plans, remove Formify branding:

  • Remove "Powered by Formify": Present forms as your own
  • Custom Domain: Host forms on your own domain
  • Custom Email Notifications: Brand automated emails

Save and Reuse Customizations

Templates

Save your customizations as reusable templates:

  1. Create and customize a form
  2. Go to Form Settings > Save as Template
  3. Give your template a name and description
  4. Access your templates when creating new forms

Style Sets

Save just the styling for reuse across forms:

  1. Customize your form appearance
  2. Go to Form Settings > Appearance > Save Style Set
  3. Apply this style set to other forms

Mobile-Specific Customization

Responsive Design Controls

Optimize your forms for mobile devices:

  • Mobile Layout Adjustments: Change column layouts on small screens
  • Touch-Friendly Elements: Automatically adjust element sizes for touch
  • Mobile Preview: Test your form on different device sizes

Best Practices

  • Maintain consistency: Use the same styling across all your forms
  • Prioritize readability: Ensure text is easy to read on all devices
  • Test on multiple devices: Check your customizations on phones, tablets, and desktops
  • Consider accessibility: Choose colors with sufficient contrast
  • Keep it simple: Avoid over-designing or adding unnecessary elements

For more inspiration, check out our template gallery for examples of beautifully customized forms.

Need help with customization? Contact our support team for assistance.