Appearance and styling

#Design and styling

Every form you build can be styled to match your store's branding. The Design tab in the form builder gives you control over layout, input style, typography, colors, and backgrounds. This guide covers every option so you can make your forms look exactly right.

To access design settings, open any form in the form builder, then click the Design tab in the right panel.

#Layout types

The layout determines how your form appears on the page. Choose the one that fits best for where and how you want customers to interact with the form.

#Default

The form is embedded inline wherever you place it on the page. It flows naturally with the rest of your page content. This is the most common layout for contact forms, registration forms, and any form that lives as part of a page.

Best for: Contact forms, order forms, surveys, any form that should be part of the page content.

#Boxed

The form is displayed inside a contained box with a defined boundary. It gives the form a card-like appearance that visually separates it from surrounding page content.

Best for: Forms that need to stand out from the page content, lead capture sections, forms on busy pages.

#Float

A floating button appears at the edge of the screen. When a customer clicks it, the form slides open in a panel. The button stays visible as the customer browses, giving them easy access to the form at any time.

You can configure the button's position on the screen (see the Position settings section below).

Best for: Contact forms you want always accessible, feedback forms, support request forms, any form that should be one click away.

#Popup

The form appears as a modal overlay on top of the page. It can be triggered by scroll depth, time delay, or exit intent, making it great for capturing attention at the right moment.

You can configure the popup's position on screen and the trigger conditions.

Best for: Lead capture, newsletter signups, promotional offers, exit-intent surveys.

#Input styles

The input style controls how form fields (text inputs, dropdowns, etc.) look. Each style gives a different visual feel. All styles come in a standard and rounded variant.

#Classic / Classic Rounded

Traditional form inputs with a full border around each field. This is the most recognizable form style and works well with virtually any store design.

• Classic — Sharp corners
• Classic Rounded — Softly rounded corners

#Material Filled / Material Outlined

Inspired by Google's Material Design. Clean and modern.

• Material Filled — Fields have a subtle filled background with a bottom border
• Material Outlined — Fields have a thin outline border with the label floating above

#Line / Line Rounded

Minimal style with only a bottom border line under each field. Gives the form a sleek, understated look.

• Line — Straight bottom border
• Line Rounded — Bottom border with rounded field shape

#Flat / Flat Rounded

Fields with no visible border or background, blending seamlessly into the page. The most minimalist option.

• Flat — No borders, sharp layout
• Flat Rounded — No borders, rounded field shape

#Position settings

Position settings are available when using the Float or Popup layout. They determine where the floating button or popup appears on screen.

You can choose from 9 positions:

For Float layouts, this controls where the floating button sits on the screen. The most common positions are bottom-right and bottom-left.

For Popup layouts, this controls where the modal dialog appears.

#Width

Set the maximum width of your form in pixels. The default is 750px. Adjust this based on where the form appears:

• For full-width page sections, use a wider value (900px-1200px)
• For sidebar placement or narrow columns, use a narrower value (400px-600px)
• The default 750px works well for most standard page layouts

The form will never exceed the width of its container, so even a wide setting will behave responsively on smaller screens.

#Font family

Choose a font for all text in your form — labels, placeholders, buttons, and content. Form Builder supports popular Google Fonts:

• Inter — Clean and modern, great readability
• Roboto — Google's signature font, versatile and neutral
• Poppins — Geometric and friendly, slightly rounded
• Montserrat — Bold and professional, great for headings
• Open Sans — Highly readable, classic web font
• Lato — Warm and approachable
• Nunito — Rounded and friendly
• Raleway — Elegant and thin
• Plus Jakarta Sans — Contemporary geometric font
• And more options available in the dropdown

Pick a font that matches your store's typography. If your store uses Poppins, using Poppins in your forms will create a seamless experience.

#Font size

Control the base text size across your entire form:

The font size applies to labels, input text, placeholders, descriptions, and button text proportionally.

#Colors

Customize the colors used throughout your form. Each color setting controls a specific part of the form's appearance:

#Tips for choosing colors

• Match your store's brand — Use the same primary and accent colors from your Shopify theme.
• Ensure contrast — Make sure text is easy to read against the background. Light text on a dark background or dark text on a light background.
• Button visibility — The submit button should stand out. Use your brand's accent color or a high-contrast color.
• Keep it consistent — If your store uses dark mode, style your form to match. If your store is light and airy, keep the form light too.

#Background images

Instead of a solid background color, you can upload a background image for your form. This is great for adding texture, branding, or a decorative element behind the form fields.

To add a background image:

1. In the Design tab, find the Background section.
2. Click to upload an image.
3. The image will be set as the form's background.

#Tips for background images

• Use subtle textures or patterns — busy images can make form fields hard to read.
• Ensure there is enough contrast between the background and your text/field colors.
• Consider using a semi-transparent overlay color on top of the image for better readability.
• Test how the form looks on both desktop and mobile — background images may crop differently on smaller screens.

#Putting it all together

Here are a few style combinations to get you started:

Clean and modern:

• Layout: Default
• Style: Material Outlined
• Font: Inter, Medium
• Colors: White background, dark gray text, blue buttons

Bold and branded:

• Layout: Boxed
• Style: Classic Rounded
• Font: Poppins, Large
• Colors: Brand background color, white text, accent-color buttons

Minimal and sleek:

• Layout: Default
• Style: Line
• Font: Raleway, Small
• Colors: Transparent background, dark text, subtle outline

Lead capture popup:

• Layout: Popup
• Style: Flat Rounded
• Font: Montserrat, Medium
• Colors: Dark background, white text, bright CTA button

Experiment with different combinations in the form builder — the live preview updates in real time so you can see your changes immediately.