> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/sa-request-a-quote/quote-form/build-standard-form.md). # Build a standard form Build your quote form from a template — the questions you ask, where the form appears, and how it looks. This walks through the whole form, in the order the editor presents it. {% stepper %} {% step %} ### Open the Customize editor Go to **Quote settings**. On the **Request a Quote** page, find the **Customize** card and click **Customize**. The editor opens full screen. {% endstep %} {% step %} ### Open the Quote form tab The editor has four tabs — **Button & widget**, **Quote form**, **Quote cart page** and **Success message**. Open **Quote form**. {% endstep %} {% step %} ### Start from a template **Form template** shows the template your form is built on, with a short description of who it suits. Click **Change**. A picker opens, headed **Choose a form template**, with the note "Select a starting point. The form fields will change only after you confirm." There are three:

Template	How the app describes it	Tagged
Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

Pick the one whose description matches the work you quote for, then click **Use this template** to confirm. **Cancel** leaves your current form alone. Do this now, before you start editing fields.

Start from a template rather than an empty form.

{% hint style="warning" %} Picking a different template **replaces the current field list**. The sections and fields on screen are swapped for the new template's own, so any section you added, any field you renamed and anything you removed goes with them. Choose the template first, customise afterwards. {% endhint %} {% endstep %} {% step %} ### Decide whether the form shows on product pages Under **Product page form display** — "Show the quote form directly on product pages" — tick **Enable product page form display** if you want customers to fill the form in without leaving the product. Ticking it reveals **Form position on product page**, a dropdown with three choices:

Position	Where the form lands
Below Add to Cart button	High on the page, right under the buy buttons — the most visible option.
Below product description	After the sales copy, for a buyer who has read it.
Below product information	At the end of the product information block.

**Toggle off this setting** if you would rather customers build a quote cart first. {% endstep %} {% step %} ### Work through the Form builder The **Form builder** — "Manage sections, rows, fields, and validation with the visual form builder" — holds your questions, grouped into sections. Which sections are there depends on the template you just chose:

Template	Sections in the builder
Simple quote form	Contact information · Extra info
Detailed quote form	Contact information · Shipping address · Extra info
B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

Three things you can do to a section: * **Switch it on or off.** Open the section's settings and tick or untick **Enable**. A disabled section is not shown to the customer, however many fields it holds. * **Rename it.** The same settings panel has a **Label** — change it to whatever your buyers would call it. * **Move it.** Drag the section by its handle to reorder the form. Expand a section with its chevron to see the fields inside it, and use **Add element** to add another field to that section. Contact and address fields are covered in [Customer information fields](/sa-request-a-quote/quote-form/customer-info-fields.md); company, billing and payment terms in [Build a B2B form](/sa-request-a-quote/quote-form/build-b2b-form.md). {% hint style="info" %} Greyed-out builder controls with a padlock line reading "🔐 This feature is available on …" mean the feature sits on a higher plan. Nothing is broken — open **Pricing plans** in the app to see what yours includes. {% endhint %} {% endstep %} {% step %} ### Edit a field Click any field in the builder and its own settings open, headed with the field's name and "Customize how this field appears on the form."

Setting	What it does
Label	The wording the customer reads. This is the setting merchants change most.
Hide label	Keeps the field but drops the label above it.
Placeholder	The grey example text inside the empty box. Use it for the format you want — "e.g. 500 units" beats a blank box.
Help text	A line under the field, for anything too long for a placeholder.
Type	What kind of field it is, and what the customer can type into it.
Required	The form will not submit without it. Ask for as few required fields as you can live with.
Options / Add option	The choices on a select, radio group or checkbox group.
Choose default value	What the field starts with when the form loads.
Limit characters	Turns on Min characters and Max characters.
Column width	How much of the row the field takes, so two short fields can sit side by side.
Custom HTML class	A class name for your own CSS — see custom-css.md.
Remove	Deletes the field. It is on your own fields only: the built-in contact and address fields are protected and have no Remove.

Click on each element and set up further (if needed)

Finish with **Save changes** in the field panel, or **Cancel** to drop the edit. {% hint style="warning" %} **Limit characters** is validated as you type: **Min characters** and **Max characters** must each be a whole number of 0 or more, and the minimum cannot be greater than the maximum. Get it wrong and the editor blocks the save. {% endhint %} {% endstep %} {% step %} ### Put the fields in the order you want them Fields are reordered by dragging. Grab a field by the drag handle at the left-hand end of its row and drop it where you want it. Sections carry their own drag handle and move the same way. Order matters more than it looks: a form that asks for a delivery postcode before it asks for a name reads like a database, not a conversation.

Drag and drop the element to change its position/order in the quote form

{% endstep %} {% step %} ### Add your own questions **Extra info** starts with whatever your template puts there, and that differs by template. The **Simple quote form** arrives with **Quantity** and **Upload files**; the **Detailed quote form** with **Project detail** and **Delivery service**; the **B2B customer form** with **Message**. Use **Add element** to add anything else you need — lead time, delivery date, project reference. If a group of questions belongs together and doesn't fit an existing section, use **Add section** to create a new one. {% hint style="danger" %} One field is not optional: the form must contain an element whose **name** contains the word *email*. The app blocks the save and tells you so — *Add an element whose name contains "email". Otherwise, customers won't receive the quote email.* Without it, nothing you quote ever reaches the customer. {% endhint %}

Click Add element to add more custom fields to the quote form

{% endstep %} {% step %} ### Style the form **Style** shows the preset your form is using, with a **Change** button that opens the rest of them. The presets are **Material filled**, **Classic**, **Flat**, **Flat round**, **Classic round**, **Line**, **Line round** and **Material outlined** — each shown as a small picture of the input, so pick by eye rather than by name. Beside it is **Match theme styling if possible**. Tick it and the form borrows your theme's own fonts and inputs instead, which is usually the shortest route to a form that does not look bolted on. The app notes that "Theme styling applies on your storefront and is not shown in this preview", so judge that one on the storefront, not here. **Customize text** sets the **Font style**, the **Title bar font size** and the **Title bar font weight**. **Customize form color** sets the individual colours — **Title bar color**, **Title bar background**, **Color**, **Background color**, **Border color**, **Button color**, **Button background color**, **Button border** and **Quote popup primary color**.

Full detail: [Match your theme style](/sa-request-a-quote/quote-form/match-theme-style.md). {% endstep %} {% step %} ### Read the form back in Preview The **Preview** panel sits beside the editor and redraws as you work. Two controls on its toolbar are worth using before you save: * The customer-state button, which switches the preview between **Guest** and **Logged-in** — they see different forms. * The desktop / mobile toggle, because a long form is a different thing on a phone. {% endstep %} {% step %} ### Save and test it yourself Change anything and Shopify's save bar appears with **Save** and **Discard changes**. Click **Save**. If a field still has a validation error the editor refuses and says "Please resolve validation errors before saving." — fix the field it names and save again. Then go to your storefront and submit a real test request. Check it arrives in **Quote list** with everything you expected.

Storefront Request a Quote page with the Products selection, Contact information and Review information steps above the Quote Cart — The form on the storefront, with **Quote form appearance** set to **Multiple step**.

{% endstep %} {% endstepper %} {% hint style="info" %} The template sets your starting point, not your ceiling. Anything the template brings in can be edited or removed, and anything it leaves out can be added with **Add element** or **Add section**. Just remember that switching template later is a restart rather than an edit — it replaces the field list you have built. {% endhint %} {% hint style="warning" %} Always submit one test request yourself before going live. It's the only way to confirm the fields, the email and the quote record all line up. {% endhint %} ## Where the rest of the settings live The **Quote form** tab is only the questions. Several things merchants come looking for here are on the other tabs of the same editor:

What you want	Tab	What you will find
The form as one page or as steps	Quote cart page	Quote form appearance — "Controls how the quote form looks on the quote cart page" — set to Multiple step or Single page.
What the product rows show	Quote cart page	Product list columns — "The product details shown as columns in the customer's quote cart" — see product-group.md.
Letting customers group products	Quote cart page	Enable Quote Sections — "Lets customers group the products in their quote cart into named sections" — see product-group.md.
The button's wording and placement	Button & widget	Button text, click action, button position and who can see it.
What happens after submitting	Success message	The thank-you wording and Redirect to custom URL.

{% hint style="info" %} The editor warns you about this itself if you try to move between tabs mid-edit: "Save your changes before switching tabs to avoid losing them." {% endhint %} ## Next steps * [Customer information fields](/sa-request-a-quote/quote-form/customer-info-fields.md) — fine-tune what you ask for * [Quoted product group](/sa-request-a-quote/quote-form/product-group.md) — product columns and quote sections on the quote cart page * [Add reCAPTCHA](/sa-request-a-quote/quote-form/recaptcha.md) — protect the form from spam * [Build a B2B form](/sa-request-a-quote/quote-form/build-b2b-form.md) — the template for trade buyers --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.samita.io/sa-request-a-quote/quote-form/build-standard-form.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.