Forms

Form and form fields

The Form block holds fields and a button. It either works with Ghost, to sign readers up as members or send them a sign-in link, or sends what people type to a URL you give it, such as a form service for a contact form. You find it in the Forms group of the block picker, with three ready versions: Newsletter form, Contact form and Sign-in form. It goes in a Section, or inside a Group or a Collection.

Contact form under the heading Write to the editors, with Name, Email and Message fields and a red Send message button

For step-by-step setups, see Add a newsletter signup form, Let readers choose their newsletters and Add a contact form.

General

Setting What it does
Send to Where the form goes. Subscribe (the default), Sign up and Sign in work with Ghost members. Custom URL sends the form to an address you enter. The table below compares them.
URL Shows with Custom URL. The address that receives the form, from your form service, starting with https://.
Success message The line that shows under the form once it is sent, with a check mark. Ghost forms start with "Please check your inbox and click the confirmation link."
Layout Stack (the default) puts the fields under each other at the full width of the form. Row puts them side by side and moves them to a new line when the row is full.
Send to What happens when someone sends it
Subscribe Ghost emails a link. When the reader clicks it, they become a free member and get your newsletters.
Sign up Works as Subscribe does. The reader becomes a free member after clicking the link in Ghost's email. Only the wording of Ghost's email differs.
Sign in Ghost emails a sign-in link to someone who is already a member.
Custom URL The form sends every field to the URL without leaving the page, then shows the success message.

What a Ghost form keeps

A Ghost form is a form whose Send to is Subscribe, Sign up or Sign in. It passes on only what Ghost takes for a member:

  • The email, from an Input of the type Email. Every Ghost form needs one, so its Required switch stays on, with the note "Ghost needs the email to sign people up".
  • The name, from an Input of the type Name.
  • The newsletters a reader picks, from the options of a Radio or a Checkbox, as the next part describes.
  • Labels for the new member, from a Hidden field.

Ghost does not store any other field, such as a phone number or a message. Use Custom URL for those.

Newsletter choices

In a Ghost form, every option of a Radio or a Checkbox stands for a newsletter. The option's text must match the newsletter's name in Ghost Admin's newsletter settings exactly, such as "Weekly digest".

  • In a Checkbox, each option the reader ticks signs them up to that newsletter.
  • In a Radio, the reader picks one newsletter.
  • A Checkbox option with Required on, such as "I agree to receive emails.", must be ticked before the form sends. It joins no newsletter.

Custom URL forms

A form set to Custom URL sends each field under a name. The name comes from the field's label, such as your-company for the label "Your company". A field without a label takes the name of its type: email, name, text, phone, number, url, date, message for a Textarea, choice for a Select or a Radio, choices for a Checkbox, and source for a Hidden field. Two fields with the same name get -2, -3 and so on after the second. To set a name yourself, enter it in the field's Field name, which shows only in a Custom URL form.

The form has a hidden spam trap, a field that people never see. When a bot fills it in, the form shows the success message but sends nothing.

When the URL answers with an error, the form shows "Something went wrong. Please try again." in red under the fields. Some services refuse to answer a form sent from another site in the background. Then the browser leaves your page and sends the form to the URL directly, and the visitor sees the service's own page.

Fields and blocks inside a form

A Form holds Inputs, Textareas, Selects, Radios, Checkboxes, Hidden fields, Buttons, Paragraphs and Groups. Add them with the + beside the Form in the sidebar. A Button inside a form sends it, whatever its own click setting. Inputs, Textareas and Selects show Variant at the top of their panel, with the looks Filled and Outline. You change those looks in the Forms group of the Blocks panel, as How block variants and formats work explains.

Input

A one-line field.

Setting What it does
Type Email (the default), Name, Text, Phone, Number, Link or Date. On phones, Phone, Number and Email open the matching keyboard. The browser checks that an email or a link is valid before the form sends.
Label Shows a label above the field, which you type on the canvas. Without it, the placeholder names the field.
Placeholder The gray text inside the empty field. Left empty, it matches the type, such as "Type your email..." or "Your name". A Date field has none.
Required The form sends only when the field is filled. A required field's label gets a red asterisk.
Field name Shows in a Custom URL form. See the part above.

Textarea

A field of several lines, such as a message. Its Label, Placeholder ("Your message" by default), Required and Field name work as for an Input. Lines sets how many lines show before it scrolls, 4 by default. The Contact form starts with an empty placeholder. Visitors can drag its corner to make it taller.

Select

A dropdown list to pick one choice from. Choices takes one choice per line. Placeholder ("Choose one" by default) shows until a choice is picked, and cannot be picked itself. Label, Required and Field name work as for an Input.

Radio

Options of which a visitor picks one, under a label that reads "Pick one" at first.

Setting What it does
Label Shows the label above the options. You type it on the canvas.
Field name Shows in a Custom URL form.
Required One option must be picked before the form sends.
Layout Stack (the default) lists the options under each other, Row side by side.

Checkbox

Options of which a visitor ticks any number, or one they must tick, such as consent. A new Checkbox holds one option, "I agree to receive emails.", with Required on. It has Label, Field name and Layout, as a Radio has.

Option

One option of a Radio or a Checkbox, from 1 to 25 in each. Add one with the + beside the Radio or Checkbox in the sidebar, and type its text on the canvas. In a Checkbox, an option has Required, described under Newsletter choices. An option also has Link color under Colors, for a link in its text, such as to your privacy policy.

Hidden

A value the form sends that visitors never see. Value is website by default. In a Ghost form, it is a label Ghost gives every member who signs up with this form, so you can tell where they came from. In a Custom URL form, it is sent under its Field name, source by default. On the canvas it shows as a small chip, such as "Label: website".

Label

The label of a field, which you turn on with the field's Label switch and type on the canvas. In a Radio or a Checkbox, it is the title above the options. A Label has its own Typography group, Text color and Link color under Colors, and Padding and Margin under Spacing, so you can style one label apart from the others. Link color sets how a link you add to the label's text looks, as Colors and appearance settings describes.

Shared settings

The Form also has the Colors and appearance settings, from Color Scheme to Border, Corners and Shadow, Gap, Padding and Margin in the Spacing group, Width, Align and Min Height from the Layout settings, the Display settings and the Advanced settings. The fields have their own typography, colors and spacing, as the Typography settings describe.

Was this article helpful?