Style & Design

This page covers how the form looks. Two scopes:

• Per-field Style tab — width, label position, text alignment for the selected field
• Form Designer (right panel when no field selected) — colors, styles, themes, templates that apply to the whole form

Per-Field Style​

Click any field on the canvas, then click the Style tab in the right panel.

Field Width​

Width	Behavior
Full	Spans the entire form width
1/2	Half the width — pairs side-by-side with another half-width field
1/3	A third of the width — three side-by-side per row

When at least one field has width less than Full, the form switches to a 6-column grid:

• Full = col-span-6
• 1/2 = col-span-3
• 1/3 = col-span-2

Adjacent half/third fields automatically pack into the same row.

Label Position​

Position	Behavior
Top (default)	Label above the input
Left	Label fixed-width on the left, input column on the right; help text and inline errors stack under the input
Hidden	Label rendered but visually hidden (still announced by screen readers)

If you don't set a per-field Label Position, the form-level Default Label Position applies.

Text Alignment​

Sets the input's text alignment. Mostly useful for Number inputs (right-align currencies) or center-aligned single-letter codes.

Align	Behavior
Left (default)	Standard left-to-right text
Center	Centered
Right	Right-aligned

Form Designer​

When no field is selected on the canvas, the right panel shows the Form Designer. Click anywhere empty in the canvas (or hit Esc) to deselect. The Designer has five tabs.

COLORS​

Color knobs for the form chrome:

Setting	What It Colors
Color presets (top row)	One-click application — pink, gold, earth, teal, blue, green, purple, dark
Page Color	The full-page background behind the form card
Page Image	Optional background image instead of solid color
Form Color	The card's background
Form Image	Optional background image for the card
Font Color	Default text color
Input Background	Background color of input fields (note: live form keeps inputs white for readability)
Button Color	Submit button background
Button Text Color	Submit button text color

STYLES​

Layout and typography knobs:

Setting	What It Does
Form Logo	Logo image rendered at the top of the form card
Logo Alignment	Left / Center / Right
Logo Max Height	Pixel height cap
Logo Link	Optional URL the logo links to (e.g. your homepage)
Form Width	Maximum card width in pixels
Question Spacing	Vertical gap between fields
Font Family	Type face for the whole form
Font Size	Base font size in pixels
Label Width	Width of the label column when label position is "left"
Field Width	Default field width (overridden per-field via Style → Field Width)
Button Style	Pre-built button styles — pill-dark, simple, simple-border, flat, primary, outline, red, teal, gradient

THEMES​

A grid of complete pre-built design themes — each one applies a coordinated set of colors, fonts, and button styles. Hover to preview, click to apply.

When you click a theme, every Color and Style setting updates at once. You can still individually tweak any setting afterwards via the COLORS or STYLES tabs.

TEMPLATES​

Starter forms for common use cases — Contact Form, User Sign Up, Event Registration, Job Application, Order Form, Appointment Booking, Support Ticket, Course Enrollment, Bug Report, Donation Form, etc.

Clicking a template replaces all current fields with the template's fields. Use this on a fresh form to bootstrap, not on an existing form you've customized.

Each form type (Premium / Conversational / Popup) has its own filtered template list — only relevant templates are shown.

SETTINGS​

Form-level behavior — submit button text, success message, redirect URL, required indicator style, progress bar, default label position. See Form Settings for the full breakdown.

Worked Example: Two Half-Width Fields Side-by-Side​

Goal: First Name and Last Name should sit on the same row.

Steps:

1. Drop a First Name field on the canvas.
2. Click it, click Style, set Field Width to 1/2.
3. Drop a Last Name field below it.
4. Click it, set its Field Width to 1/2 too.

The form switches to 6-column grid mode and the two fields render side-by-side.

To pack three fields on one row (e.g. City, State, Zip), set each to 1/3.

Worked Example: Apply a Theme + Override a Color​

Goal: Use the "Nature" theme but with a custom green button.

Steps:

1. Click empty canvas to open the Form Designer.
2. Click THEMES. Click the Nature theme card.
3. Click COLORS. Override Button Color with #10b981 (a custom emerald).
4. Save.

The rest of the Nature theme stays applied; only the button color is overridden.

---

Next Steps​

• Form Settings — Submit button, success message, redirect, progress bar
• Field Properties — Per-field options
• Publish & Embed — Share and embed your styled form