Form Styling and Customization

Customize the look and feel of your FormRobin forms using the built-in Style Editor. Choose from theme presets, change fonts, adjust colors, and style buttons -- all with a live preview.

Overview

FormRobin includes a full Style Editor that lets you customize the visual appearance of your forms. You can:

  • Apply theme presets -- choose from 10 ready-made themes for instant styling
  • Change fonts -- pick from 11 font families including serif and sans-serif options
  • Adjust font size -- set the base font size from 12px to 24px
  • Customize colors -- use 7 color pickers to control text, background, input, and button colors
  • Style input fields -- adjust border color and width
  • Style buttons -- change button colors and border radius
  • Preview changes live -- see your changes applied instantly as you make them

The Style Editor is available on all plans, including the Free plan. Free users see a small upgrade banner inside the editor, but all styling features work without restrictions.

Accessing the Style Editor

  1. Open any form in the form editor
  2. In the editor toolbar at the top, click the Styles button (the Palette icon)
  3. The Style Editor panel opens on the right side of the screen

Keyboard shortcut: Press Ctrl+Shift+S (or Cmd+Shift+S on Mac) to toggle the Style Editor open and closed.

To close the Style Editor, click the X button in the top-right corner of the panel, press the keyboard shortcut again, or click anywhere outside the panel.

Theme Presets

Theme presets let you apply a complete color scheme and styling to your form with a single click. Select a preset from the Theme Presets dropdown at the top of the Style Editor.

FormRobin includes 10 theme presets:

  • Default -- FormRobin default styling (black text on white, black button)
  • Random -- AI-generated color combination using color theory (generates a new unique theme each time you select it)
  • Clean Blue -- Professional and trustworthy look with blue accents
  • Elegant Purple -- Sophisticated and premium feel with purple accents
  • Warm Orange -- Friendly and approachable design with warm orange tones
  • Success Green -- Professional and growth-oriented with green accents
  • Sunny Yellow -- Cheerful and engaging with yellow highlights
  • Corporate Blue -- Business-focused design with corporate blue tones
  • Research Blue -- Clean and analytical look with light blue accents
  • Commerce Pink -- Modern and commerce-ready with pink accents

After selecting a preset, you can further customize any individual setting. When you manually change a setting, the preset selection clears to indicate you are using a custom configuration.

Custom Settings

Below the theme presets, the Custom Settings section gives you fine-grained control over every aspect of your form's appearance.

Font Family

Choose from 11 font families. Fonts are loaded from Google Fonts when selected and include both serif and sans-serif options:

  • Geize (default)
  • Roboto
  • Montserrat
  • Domine
  • Nunito Sans
  • Quicksand
  • Bona Nova
  • Libre Baskerville
  • Noto Serif
  • Arvo
  • Solway

Font Size

Set the base font size for your form. The slider ranges from 12px to 24px, with a default of 16px. This controls the size of field labels, placeholder text, and other form text.

Colors

The Style Editor provides 7 color pickers organized into three groups:

General colors:

  • Text color -- controls the color of form labels and general text
  • Background color -- sets the overall form background color

Field style colors:

  • Text color (input) -- controls the color of text typed into form fields
  • Background color (input) -- sets the background color of input fields
  • Border color -- sets the color of input field borders

Button style colors:

  • Primary color -- controls the button text color (labeled "Primary color" in the editor)
  • Secondary color -- controls the button background color (labeled "Secondary color" in the editor)

Click any color picker to open the browser's native color selection tool. Choose your desired color and the form preview updates immediately.

Field Style

In addition to field colors, you can customize:

  • Border color -- set the color of input field borders using the color picker
  • Border width -- adjust from 0px to 10px (default: 1px). Set to 0 for borderless inputs.

Button Style

In addition to button colors, you can customize:

  • Border radius -- adjust from 0px to 100px (default: 4px). Use 0 for sharp corners or higher values for rounded buttons. Values above 20px create pill-shaped buttons.

Live Preview

All changes in the Style Editor apply immediately to the form preview in the editor. There is no need to save and reload -- you can see exactly how your form will look as you adjust each setting.

Your styles are saved when you save the form. They persist on the published version of your form, including when embedded on external websites when embedded on external websites.

Resetting Styles

To return all styles to the FormRobin defaults:

  1. Select the Default theme from the Theme Presets dropdown
  2. This resets all colors, fonts, and sizing to the original default values

A confirmation dialog appears before resetting to prevent accidental changes.

Troubleshooting

Issue: Style Editor panel does not open

Fix: Make sure you are in the form editor (editing mode). The Styles button only appears when the form is in edit mode, not preview mode.

Issue: Font does not change after selection

Fix: Fonts are loaded dynamically from Google Fonts. If you have a slow connection, the font may take a moment to appear. If it still does not load, try selecting a different font and switching back.

Issue: Colors look different on the published form

Fix: Ensure your browser's color profile settings are not altering colors. The published form uses the exact same color values set in the editor.

Issue: Styles do not appear on the embedded form

Fix: Make sure you save the form after making style changes. Styles are stored with the form data and automatically applied when the form loads, including in iframe embeds.

FAQ

Q: Can I change form colors and fonts?
A: Yes. The Style Editor lets you customize fonts, colors, and button styles. Open it by clicking the Styles button (Palette icon) in the form editor toolbar.

Q: Is the Style Editor available on the Free plan?
A: Yes. All styling features work on the Free plan. Free users see an informational upgrade banner inside the editor, but no features are restricted.

Q: Can I inject custom CSS into my forms?
A: No. FormRobin does not support raw CSS injection, custom CSS code, logo uploads within forms, or background images. Use the built-in Style Editor controls for all visual customization.

Q: Do styles persist when I publish or embed my form?
A: Yes. All style settings are saved with the form and automatically applied on published and embedded forms.


Need help styling your forms? Contact support for guidance!

Related Articles