Sign In
My Account

Choosing a Form Layout

View Categories

1 min read

Applies to: Core, Advanced, Enterprise

Quote & Cut includes three frontend form layouts.

You can choose the layout from:

Quote & Cut → Styles → Frontend Form Style

The available layouts are:

  • Classic.
  • Studio.
  • Workbench.

Classic #

Classic is the original stacked form layout.

It displays the quote form in a simple vertical structure.

Use Classic if:

  • You want the simplest layout.
  • Your page has a narrow content area.
  • Your theme works better with stacked forms.
  • You want a more traditional form layout.
  • You do not need the newer two-column or accordion-style experience.

Classic is a good fallback if a complex page builder or theme layout does not suit the newer designs.

Studio #

Studio is a two-column quote builder.

It shows the parts list on the left and keeps the live summary, progress area, and pricing actions pinned on the right.

Use Studio if:

  • You want the most modern frontend experience.
  • You want a guided quote-builder feel.
  • You expect customers to upload multiple parts.
  • You want the quote summary visible while the customer works.
  • Your page has enough width for a two-column layout.

Studio is the default layout.

Workbench #

Workbench is an accordion-style quote builder.

It shows the parts list in a more compact builder format, with the summary and actions below the parts list.

Use Workbench if:

  • You want a structured production-style layout.
  • You want part rows to feel more compact.
  • You prefer the summary and quote actions below the part list.
  • You expect customers to review multiple parts in sequence.

Which layout should you choose? #

For most sites, start with Studio.

Choose Classic if you want a simple stacked form or need maximum theme compatibility.

Choose Workbench if you want a more compact multi-part workflow.

Layout and mobile behaviour #

Always test the selected layout on:

  • Desktop.
  • Tablet.
  • Mobile.

The form is responsive, but your WordPress theme, page builder, content width, and sidebar settings can affect the final layout.

Layout and custom CSS #

The selected layout adds a layout class to the main form container.

The main form wrapper is:

#quoteandcut-container

Depending on the selected layout, the container also has one of these classes:

.quoteandcut-form-style-classic
.quoteandcut-form-style-studio
.quoteandcut-form-style-workbench

This is useful if you want custom CSS to apply only to one layout.

Example:

#quoteandcut-container.quoteandcut-form-style-studio {
  max-width: 1200px;
}

Saving the layout #

After selecting a layout, click:

Save Styles

Then open the page containing the [quoteandcut] shortcode and check the result.

Continue to: Customising Colours.