Form

Displays a form.

Frontmatter

blocks:
  - type: form
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    name: '' # string, the form name (optional)
    submit: '' # string, the submit button label (optional)
    items: []
      label: '' # string
      type: '' # [checkbox, email, file, hidden, radio, select, switch, tel, text, textarea, url]
      name: '' # string, defaults to the slugified label (optional)
      options: [] # if type is select
        title: '' # string
        value: '' # string (optional, defaults to title)
      value: '' # string (optional)
      placeholder: '' # string (optional)
      accept: '' # string, accepted file types if type is file (optional)
      pattern: '' # string, a validation regexp (optional)
      required: false # boolean (optional)
      full: false # boolean, the field takes the whole row (optional)
      autocomplete: '' # autocomplete value like postal-code, email… (optional)
    ui: {} # (optional)
      theme: '' # [accent, black, dark, highlight, light, neutral, white] (optional)
      grid: '' # [xsmall, small, medium, large, container, full] (optional)
      offset: '' # [start, center, end] (optional)
      align: '' # [start, center, end] (optional)

A tel, email, url, accept or pattern field gets a matching hint paragraph, wired through aria-describedby. One required field anywhere in the form adds the legend explaining the asterisk.

See Common keys for heading, footing and the full ui reference.

Params

/config/_default/params.yaml

Where the form posts, and whether it posts over AJAX.

params:
  form:
    netlify: false # boolean, adds the Netlify Forms attributes and a honeypot
    action: '' # url, the endpoint the form posts to
    ajax: false # boolean, submits through js/blocks/form.js and shows a message
Demo visual renderer

Files

CMS availability

CMSHugolify Admin v2
CloudCannonAvailable
Decap CMSAvailable
Netlify CMSAvailable
Pages CMSAvailable
Static CMSAvailable
Sveltia CMSAvailable
Tina CMSAvailable

The CMS offers checkbox, email, file, radio, select, tel, text and textarea as field types. The hidden, switch and url types are read by the theme but have no option in the CMS.