Building a Form

Forms are how you collect information from visitors: contact requests, quote inquiries, booking questions, whatever you need. In StoutStack, building a form is a two-part job: first you create the form in the Forms area, then you place it on a page using the Form section. This article covers the first part, designing the form itself and choosing its fields. (For putting it on a page, see "After Submit & Placing Your Form on a Page.")

How forms are structured

A form is simply a stack of fields, the individual boxes and questions your visitor fills in. You add fields one at a time, arrange them in the order you want, and set how each one behaves. There's no limit to how simple or detailed you make it: a bare-bones contact form might be just Name, Email, and Message, while a quote request might ask for project type, budget range, and a preferred callback time.

Creating a new form

1. Go to the Forms area in your admin.
2. Click to create a new form and give it a clear name (for example, "Contact Us" or "Free Quote Request"). This name is just for you. It's how you'll find the form later when you place it on a page.
3. Add your fields (see below), set your submit button label, and save.

You can build as many forms as you like and reuse any of them on multiple pages.

The field types you can add

Each field you add has a type that controls what the visitor sees and how their answer is collected. Here are the types available:

Field type	What it's for
Text	A single line of text: names, company, subject line, city, and so on.
Text Area	A larger, multi-line box for longer answers like a message or project description.
Select	A dropdown menu the visitor picks from. You supply the choices yourself as label/value pairs (see below).
Email	An email address box that automatically checks the entry looks like a real email before the form will submit.
Checkbox	A single tick-box, great for "Yes, sign me up" or "I agree to be contacted." Includes an option to have it checked by default.
Number	A box that only accepts numbers, useful for quantities, party size, budget, and similar.

Setting up a Select (dropdown)

The Select field is the one that needs a little extra thought. For each choice in the dropdown you provide two things:

• A label: the wording the visitor reads (for example, Brand identity).
• A value: the answer that gets recorded when they pick it. Often this is the same as the label, but you can keep it shorter or tidier if you prefer (for example, label Brand identity with value brand).

Add one label/value pair per option, and they'll appear in the dropdown in the order you list them.

The Select field also has its own Placeholder setting: the faint default prompt shown at the top of the dropdown before anyone chooses (for example, "Choose one..."). This is the one field type where placeholder text applies; the other types don't offer it.

Settings for every field

Whatever type you choose, each field has a handful of settings you can adjust:

• Field key: the internal name for the field. Use lowercase letters, numbers, and dashes only (for example, first-name or phone). Visitors never see this. It's how you refer to the answer later, especially when writing email notifications that pull in what someone typed. Give each field a clear, unique key.
• Label: the wording shown above or beside the field (for example, "Your name" or "What can we help with?"). This is what the visitor actually reads.
• Required: turn this on if the visitor must fill in this field before they can submit. Leave it off for optional fields.
• Field width: a percentage you may see on each field. In practice your published form renders every field full-width, one per row, so this setting won't place two fields side by side. The one exception is the first name / last name pairing in the Split layout (see below), which happens on its own.
• Default value: a starting answer that's pre-filled when the form loads. Handy for a checkbox you want ticked to begin with, or a dropdown you want set to the most common choice. It's available on most field types, though not on the Email field.

The submit button

Every form has a Submit button label you can set, the wording on the button people click to send the form. Swap the generic "Submit" for something warmer and more specific, like "Send my message," "Get my free quote," or "Book a call." A clear, action-focused button tends to get more people over the line.

You can also override this button wording separately for each place you use the form. See "After Submit & Placing Your Form on a Page."

Good to know

First name and last name sit side by side automatically

If you name two fields firstName and lastName (using those field keys), StoutStack automatically places them side by side on a single row when your form is shown in the Split layout. It's a small polish that makes the classic name pairing look right without any extra fiddling.

Important: the "Message" field type won't appear on your live form

You may notice a field type called Message in the list. This one is a bit of a trap: despite the name, it is not a place for visitors to type a message, and it does not display on your published form at all. If you want a real multi-line message box, use the Text Area type instead.

And if what you're really after is a line of intro copy (a sentence or two explaining the form or reassuring people), don't try to add it as a Message field. Instead, put that wording in the Form section's heading and subheading when you place the form on your page. That's the proper spot for descriptive text around a form, and it'll actually show up for your visitors.

A sensible starting point

If you're not sure where to begin, a reliable contact form looks like this:

1. First name and Last name: two Text fields using keys firstName and lastName, which pair up on one row automatically in the Split layout.
2. Email: an Email field, marked Required.
3. Phone: a Text field, optional.
4. How can we help? A Text Area field, marked Required.
5. Submit button labelled something like "Send my message."

From there you can add a Select for "What service are you interested in?", a checkbox for "Add me to your newsletter," or anything else your business needs.