Skip to main content
The Form section puts a form you’ve built on a page, such as a contact form, a quote request or an event sign-up. You build the form once in the Forms manager, then place it on as many pages as you like. Who can do this: anyone who can edit the page. The CSS tab is for Admins and Owners.
Parker's contact form as visitors see it: a raised card with eyebrow, heading "Send us a message", an intro line, the fields Your name, Email address, Phone (optional).Parker's contact form as visitors see it: a raised card with eyebrow, heading "Send us a message", an intro line, the fields Your name, Email address, Phone (optional).

A contact form placed on a page.

When to use it

  • To let visitors contact you from your Contact Us page.
  • To collect quote requests, bookings or event RSVPs.
  • To repeat the same form on several pages, such as a short inquiry form on each service page.

Before you start: build the form

The Form section shows a form but doesn’t build one. Create the form first in the Forms manager, from a template or a blank form. See Build a form. A new site already has a Contact Us form on its Contact Us page, ready to use.

Add it to a page

1

Open the page

Sign in, open the page on your site, and choose Edit in the edit bar at the top.
2

Find the spot

Select the section next to where the new one should go. A round + button appears on its top and bottom edges. On an empty page, choose Add Content in the middle.
3

Choose the section

The Add Content menu opens with its groups. Choose the section, then select it and choose Edit in its side toolbar to make it yours.
For the full walkthrough, see Add, move and remove sections. Choose Add Content → Conversion → Form. Then choose Edit, and on the Form tab pick the form to show under Form. Until you pick a form, visitors don’t see the section. You see a short note in its place.

What you can change

Select the form section on the page and choose Edit. The editor opens beside the page, so you see each change as you make it. It has 5 tabs. Your changes go into the page’s draft. Visitors see them once the page is published with Update in the edit bar (Publish on a page never published). The form’s fields, its thank-you message and where its submissions go all belong to the form itself. Change them in the Forms manager, and every page that shows the form updates.
The Form section editor open on the Form tab beside the live contact form, with the three tabs (Form, Styling, CSS) and the Form picker, set to Contact Us, ringed.The Form section editor open on the Form tab beside the live contact form, with the three tabs (Form, Styling, CSS) and the Form picker, set to Contact Us, ringed.

Pick which form this section shows.

  • Form: the form to show here. It’s required. To build or change the form itself, open the Forms manager.
By default, a form looks the way it was styled in the Forms manager, on every page. To give it a different look on this page only, turn on Restyle for this placement.When it’s on, these options replace the form’s own styling here:
  • Show eyebrow and Eyebrow: a short line above the heading.
  • Heading: the form’s title. It starts as “Send us a message”.
  • Intro: one short sentence under the heading.
  • Band style: Plain, Raised (card) or Accent (solid band). For an accent band, you can choose its Band color.
  • Header alignment: Center or Left.
  • Content width: Narrow, Normal or Wide.
  • Label spacing: the space between each field’s label and its box, from Compact to Spacious.
Turning this on can change your words, not just the look. The options start from their defaults, not from the form’s own styling. So the eyebrow shows “Get in touch”, the heading “Send us a message”, the intro a sample sentence, and the button on the Button tab “Submit”. Re-enter your own heading, intro, eyebrow and button label here. The form’s fields and its other pages don’t change.
Give the section its own background color, from your site’s palette or a custom color. These options appear once Restyle for this placement is on. See What every section shares.
The look of the send button, and its Button label. It starts as “Submit”. These options appear once Restyle for this placement is on. See Buttons and card styles.
Custom styles for this form on this page only. Admins and Owners can change this tab. See Custom CSS.

Looks you can make

The same contact form as a solid accent band, left-aligned, wide, with the heading "Questions about your first visit?".The same contact form as a solid accent band, left-aligned, wide, with the heading "Questions about your first visit?".

The same form, restyled as a bold band on one page.

A bold band on one page. Turn on Restyle for this placement, set Band style to Accent (solid band), Header alignment to Left, and Content width to Wide.
A short quote request form on a plain background, narrow and centered, with Roomy label spacing.A short quote request form on a plain background, narrow and centered, with Roomy label spacing.

A quiet, narrow form that sits on the page.

A quiet form. Turn on Restyle for this placement, set Band style to Plain, Content width to Narrow, and Label spacing to Roomy.

What visitors see

While the form sends, a status message in the form reads “Submitting…”. Then the form is replaced by its thank-you message, which you set on the form in the Forms manager. If a field needs fixing, the visitor sees what’s wrong next to it. Every submission is saved in the CMS. The form’s own settings decide who else gets it, such as an email to your team. See Form submissions and Email notifications.
The contact form after a visitor sent it: the form replaced by the thank-you heading and message.The contact form after a visitor sent it: the form replaced by the thank-you heading and message.

Visitors see your thank-you message once the form is sent.

Good to know

  • Publish the form first. Visitors can only send a form that’s published. A form made from a template starts as a draft.
  • A form needs at least one field. Until it has one, visitors don’t see it.
  • Test it signed out. Sign out, or use a private window, to send a test submission as a visitor.
  • Forms need JavaScript. Visitors who have JavaScript turned off in their browser don’t see the form.
  • Where it fits. The Form section is full width. It isn’t offered inside columns or in a blog post’s body, but you can add it after a post.

Appearance options

Most sections also share a few tabs that work the same everywhere:
  • Background: set the color behind the section, separately for the dark and light themes.
  • Fonts: use a different typeface for parts of this section only.
  • CSS: add custom styles to this section. Admins and Owners can change it.
See What every section shares for every option.

Build a form

create the form, its fields and its thank-you message.

Form submissions

read and export what visitors send.

Email notifications

get an email for each submission.

Spam protection

keep bots out of your forms.