Custom Themes and Branding for Forms

A form that looks generic feels generic. When someone encounters your lead capture form, support ticket, or registration page, the visual experience tells them something about your brand before they read a single word. A polished, on-brand form says "this organization pays attention to details." A default-styled form says "we didn't bother."

Instaform's theming system gives you control over every visual aspect of your forms — colors, fonts, backgrounds, buttons, borders, spacing, covers, and label positioning. You can start with a preset theme and tweak it, or build a completely custom look from scratch.

Theme Presets: Light, Dark, and Custom

Every form starts with a theme selection. You have three options.

Light is the default. White backgrounds, dark text, clean and professional. It works on any website, matches most brand guidelines, and is the safest choice when you're unsure. Light themes have the highest readability across devices and screen conditions, including outdoor use on mobile phones.

Dark inverts the palette. Dark backgrounds with light text. This works well for brands with dark aesthetics — gaming companies, nightlife venues, creative agencies, tech products with dark UI. Dark themes also look striking when embedded on dark-themed websites, avoiding the jarring white rectangle that a light form creates on a dark page.

Custom removes all presets and gives you full control. Every color, every element, every detail is yours to set. This is where brand-specific forms live. If your brand uses a specific shade of blue, a particular font, and a defined button style, Custom mode lets you match exactly.

Most users start with Light or Dark and then adjust individual settings. This gives you a solid foundation without needing to configure every property from zero.

Colors

Color is the most immediate branding element. Instaform lets you set colors for the following areas.

Primary color defines the accent — buttons, active states, progress indicators, links, and interactive elements all pull from this. Set it to your brand's primary color, and the entire form feels like yours. This single setting has the highest visual impact of any customization.

Background color controls the form canvas. White is the default, but you can set it to any color. Light gray creates a softer feel. A very light tint of your brand color (like a pale blue or warm cream) adds subtle branding without affecting readability.

Text color controls field labels, descriptions, and static text. Dark gray or black for light backgrounds. White or light gray for dark backgrounds. Avoid full black (#000000) on full white (#FFFFFF) — it creates harsh contrast. A dark gray like #333333 on white is more comfortable to read.

Field colors control the input areas — the background and border of text fields, dropdowns, and other input elements. Most brands leave these as white or very light gray, but some dark themes benefit from slightly tinted field backgrounds.

Backgrounds: Beyond Solid Colors

The form background goes beyond a flat color. Instaform offers four background modes.

None gives you a transparent background. The form inherits whatever is behind it — useful when embedding on a website where the page background should show through.

Solid is a single color fill. Simple, clean, and predictable. This is the most common choice for standalone forms and embedded forms that need to look self-contained.

Gradient adds depth with a color transition. You define two colors and the direction, and the background smoothly transitions between them. Gradients work well for marketing forms, event registrations, and anywhere you want the form itself to feel more dynamic. A subtle gradient — like white to very light blue — adds sophistication without distraction. A bold gradient — like deep purple to electric blue — makes a statement.

Image lets you set a background image behind the form. This is powerful for event forms (use a venue photo), real estate forms (use a property photo), or seasonal promotions (use themed imagery). The image fills the background, and the form content overlays it. Use images with enough contrast that form fields remain readable, or apply an overlay tint to darken the image behind the form content.

Font Family

Typography is brand identity in text form. Instaform lets you select from a curated set of font families that cover the major typographic styles.

Sans-serif fonts (like Inter, Open Sans, or similar) are the default for web forms. Clean, modern, and highly readable at all sizes. If your brand uses a sans-serif typeface, match it here.

Serif fonts (like Georgia, Times, or similar) convey tradition, authority, and formality. Law firms, financial services, academic institutions, and luxury brands often prefer serif typography.

Monospace fonts (like Courier or similar) are unconventional for forms but work for tech brands, developer tools, and anything with a technical aesthetic.

The font you choose affects readability, perceived personality, and brand consistency. When in doubt, match the font your website uses. If your website uses Inter, your forms should use Inter. Consistency between the page and the embedded form makes the experience seamless rather than jarring.

Button Styles

The submit button is the most important interactive element on the form. It's where the respondent commits. Instaform offers six button style presets.

Default is a neutral, subtle button. It works everywhere and doesn't compete with the rest of the form design.

Primary uses your primary brand color as the button background. This is the most common choice — it makes the submit button visually prominent and on-brand.

Success uses a green tone. This creates a positive, affirming feel — "go ahead, submit, this is the right action." Effective for forms where you want to reduce hesitation, like free trial signups or newsletter subscriptions.

Warning uses a yellow or amber tone. Unusual for forms, but useful for confirmation steps or forms where the submission triggers something significant, like cancellation forms or escalation requests.

Danger uses a red tone. Appropriate for forms that involve irreversible actions — account deletion requests, contract termination, or formal complaints. The red signals "think before you click."

Info uses a blue tone. Informational and neutral, appropriate for forms that collect data without triggering an immediate action — surveys, feedback forms, research questionnaires.

Cover Styles

The cover sits at the top of the form, above the first field. It's the visual hero — the first thing respondents see. Instaform offers four cover styles.

None skips the cover entirely. The form starts directly with the first field. This is clean and efficient, best for short forms and embedded forms where the surrounding page provides enough context.

Gradient creates a colorful banner at the top. Similar to background gradients, you pick colors and direction. This adds visual interest without requiring an image. Good for forms that need to look polished but don't have specific imagery to use.

Solid fills the cover with a single color — typically your brand color. Simple and effective. A deep blue cover with white title text and a white form body below creates a classic, professional look.

Image lets you upload a cover photo. Event forms benefit from event imagery. Product forms benefit from product photos. Real estate forms benefit from property shots. A well-chosen cover image transforms a generic form into a branded experience. Make sure the image works at different aspect ratios since the cover adapts to screen sizes.

Border Radius

Border radius controls the roundness of corners — on the form container, on input fields, on buttons, and on cards. This seems like a small detail, but it significantly affects the perceived personality of the form.

Sharp corners (low border radius) feel formal, technical, and precise. Think financial applications, enterprise software, and B2B forms.

Rounded corners (medium border radius) feel friendly, modern, and approachable. This is the current web design standard and works for most brands.

Fully rounded (high border radius) feel playful, informal, and consumer-oriented. Think consumer apps, creative brands, and forms targeting younger audiences.

Match the border radius to your website's design language. If your site uses sharp corners, your forms should too. Visual consistency reinforces brand trust.

Field Spacing

Field spacing controls the vertical distance between form fields. This affects density, readability, and the overall feel of the form.

Tight spacing fits more fields on screen, reducing scrolling. This works for data-heavy forms — registration forms with many required fields, admin intake forms, detailed surveys. The tradeoff is a denser, more intense appearance.

Standard spacing balances density and breathing room. Most forms should use this. It's readable without being wasteful.

Generous spacing gives each field room to breathe. This works for short, high-conversion forms — lead captures, newsletter signups, contact forms with three to five fields. The whitespace draws attention to each field and makes the form feel effortless.

Label Position

Field labels can sit in different positions relative to their input fields.

Top labels sit above the field. This is the most common position and works best for most forms. It's natural to read top-to-bottom, and top labels leave full horizontal space for the input.

Left labels sit beside the field. This creates a more compact form but requires wider screens. Left labels work well for desktop-first data-entry forms but can break on mobile screens where horizontal space is limited.

Floating labels sit inside the field and float up when the field receives focus. This looks modern and saves vertical space but can cause accessibility issues if not implemented carefully. Instaform's implementation maintains accessibility by keeping the label visible at all times, even after the field is filled.

Putting It All Together

The best-themed forms make intentional choices across every setting to create a cohesive visual identity.

A corporate lead form might use: Light theme, brand primary color, solid white background, sans-serif font, Primary button style, Solid cover in brand color, medium border radius, standard spacing, and top labels.

A creative agency contact form might use: Dark theme, accent color for primary, gradient background, modern sans-serif font, Default button style, Image cover with portfolio work, fully rounded borders, generous spacing, and top labels.

A event registration form might use: Custom theme, event brand colors, image background with venue photo, serif font for elegance, Success button style, Image cover with event photography, medium radius, standard spacing, and top labels.

Start with the theme preset closest to your vision, then adjust the individual settings. Preview your form on both desktop and mobile to verify that your design choices work across screen sizes. And remember that the best theme is one your audience doesn't consciously notice — it just feels right, feels professional, and feels like your brand.

For more on building forms, see the drag-and-drop builder guide. To embed your beautifully themed form on your website, check out embed options.