Putting a form on a page

To show a form you built under Modules, use the Form element: drop it on a page, tell it which form to show, and style it once so every form on the site matches.

The element and the form are two different things. The element decides where the form sits and what it looks like; the fields, the destination address and the thank-you message all live under Modules → Forms. See Building a form.

Adding it

The Modules group in the component list only lists a module that's switched on, so if Form isn't there, turn the forms module on under Manage → Settings → Enabled modules.

Select the parent you want it in (a Column is the usual answer) and drag Form across, or double-click it. The element arrives with three child components already inside it: Form label, Form input and Form submit button. Those aren't fields; they're the styling handles for every field the form renders.

Then select the Form element and set its properties:

Override default mail to is what lets one form serve several pages: the same questions on /contact and on /bookings, with the answers landing in two different inboxes. Leave it empty and the form's own address is used. It changes nothing else. The fields, the confirmation text and the database setting all stay as the form defines them.

What gets rendered

Each field becomes a row with the label on the left and the input on the right, roughly a third and two thirds. Below the fields comes the confirmation tick-box, if the form has one, and then the send button.

Two consequences:

• A form with no fields renders nothing at all: no heading, no button, no empty box. So does a form whose fields are all unticked, and so does a Form element with no form chosen. If your page has a suspicious gap where a form should be, that's the first thing to check.
• A Title field is a real row. It's the only field type without an input, and it's how you get a heading inside the form rather than above it.

Required fields get a * after the label. A field's Comment appears as small text under its label, and its Placeholder as grey text inside the empty input.

Styling it

Select the Form element itself for the box around everything: Background, Border, Border radius, Padding and Gap (the space between rows). It also has a Breakpoint: the screen width below which each label stops sitting beside its input and moves above it. On a narrow column, raise it; on a wide one, leave it low.

The three children each style one part of every field:

The Hover state on the input is what gives a form the small lift people expect when they move through it; the Active state on the button is what it looks like while being pressed.

The submit button accepts the same display sets as an ordinary Button, so the fastest way to make a form look like the rest of the site is to give it the button display set you already use elsewhere. If you have more than one form, give the input and the label a display set of their own. See Display sets.

After someone sends it

The visitor sees the form replaced by your Send feedback message, or a plain thank-you if you left that empty. Nothing else changes on the page and there's no redirect to a separate thank-you page. If you want one, link to it from inside the feedback message.

Where the submission goes is set on the form, not here: emailed, stored, or both. See Building a form and Reading what people sent you.

Common issues