Skip to Help content

Change my form's design

Style your form

Outcome: Start with a theme, then refine shared components or individual blocks while keeping text readable.

Start broad

Open the builder's Appearance tab. Begin with the Clean, Soft, or Bold starting style, or choose a preset from the theme gallery, then set the form-wide palette, typography, background, width, and spacing. The current gallery groups designs as Bold, Calm, Playful, Elegant, Minimal, Dark, and Seasonal; use the gallery rather than relying on an older preset-name list.

Preview both desktop and phone widths. On a phone, use the Design / Preview switch so the settings and live preview remain available.

Appearance search understands control names and descriptive terms such as rounded, focus, shadow, and muted. The current-form preview uses the form's title and products, and All components exposes states the form may not currently use.

Refine only what needs it

Style from broadest to most specific:

  1. Set global primary and accent colors, page and form-card colors, text colors, typography, background, form width, and section spacing.
  2. Use Components for section boxes, inputs, field labels, the submit button, product cards and their title, description, price and category bars, decorative effects, dividers, shipping choices, and the cart summary.
  3. Select one block when that block needs an intentional exception.
  4. Turn off a component or block override to make it inherit the broader style again.

Form Header, Heading, and Text Box blocks also provide a compact inline toolbar. Use the gear control for the full properties panel. Agreement formatting is managed in its properties panel in the current builder.

Use per-block formatting

Most blocks expose font, text size, weight, alignment, letter spacing, line height, font color, background color, text decoration, and opacity. The current font picker contains these 28 choices:

  • Sans-serif: Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Raleway, Source Sans 3, DM Sans, Quicksand, and Rubik.
  • Serif: Playfair Display, Merriweather, Lora, Georgia, PT Serif, Crimson Text, and EB Garamond.
  • Display: Bebas Neue, Oswald, and Abril Fatface.
  • Handwriting: Pacifico, Dancing Script, Caveat, and Sacramento.
  • Monospace: JetBrains Mono and Fira Code.

Text size has 15 presets spanning 10 through 64 pixels. The current weight control offers Default or Bold; the older Regular, Medium, Semi-bold, and Bold list is no longer present. Alignment includes left, center, and right; line height includes compact through double. Text decoration offers None, Underline, Strikethrough, or Italic, and opacity runs from 10% through 100%.

Use per-block formatting as an exception. If every block needs the same change, set it at the form or component level so later edits stay consistent.

Configure form-wide components

  • Background keeps the solid base color, generated gradient, pattern or texture, and uploaded image as distinct layers. Image display modes are Cover, Contain, Centered, and Tile; Tile also provides a size control. Generated textures include Velvet Depth, Soft Suede, Carved Marble, Black Marble, Frosted Glass, Hammered Metal, Raised Plaster, Leather Grain, Quilted Satin, Embossed Paper, Pearl Sheen, Deep Water, Smoky Resin, Clouded Wax, Gemstone Glow, and Ceramic Glaze, plus newer geometric and scenic choices; they do not require an uploaded image.
  • Typography sets the form family. Header text can additionally use Shadow, Letterpress, Ink Stamp, Outline, Neon, Foil, or Prism display effects, but body text should remain readable.
  • Buttons and inputs control backgrounds, text or border color, corner shape, input focus ring, and optional button border.
  • Section boxes and product cards control their backgrounds, borders, widths or styles where available, corner roundness, and shadow. Product category bars have separate background, text, border, width, and corner controls.
  • Layout provides narrow, medium, standard, wide, and full-width form choices plus compact, normal, relaxed, and spacious section spacing.
  • Page frame provides a desktop border with color, width, Solid, Double, Dashed, Dotted, Groove, or Ridge line style, and corner treatment.
  • Dividers, cart, and shipping provide separate divider style, cart colors, shipping amount color, and selected-shipping background. Resetting the selected background lets it follow the section-box color again.
  • Saved designs reuse theme settings across forms. Uploaded background and header images remain attached to their original form and are not bundled into the saved design.

Keep the result readable

  • Check text against every background layer and image.
  • Keep body text at a comfortable size and reserve display effects for headings.
  • Make buttons and focus rings easy to distinguish.
  • Test long product names, validation messages, and the final order summary.
  • Preview at a narrow phone width before publishing.

If a solid page color seems hidden, open Background and choose Solid Color, or reset the background. Saving a solid color clears older gradient/pattern layers instead of leaving them above the color. When the design is ready, use Publish and share a form for a signed-out buyer check.