Back to site

Form

Groups form fields into one submission area.

---
blocks:
  _component: building-blocks/forms/form
  action: /contact
  formBlocks:
    - _component: building-blocks/forms/input
      label: Full Name
      name: name
      type: text
      placeholder: Enter your full name
      required: true
    - _component: building-blocks/forms/select
      label: City
      name: city
      options:
        - value: auckland
          label: Auckland
        - value: wellington
          label: Wellington
        - value: christchurch
          label: Christchurch
        - value: hamilton
          label: Hamilton
        - value: dunedin
          label: Dunedin
        - value: tauranga
          label: Tauranga
    - _component: building-blocks/forms/textarea
      label: Message
      name: message
      placeholder: Tell us about your project...
      required: true
    - _component: building-blocks/forms/hidden
      name: form-source
      value: contact-page
    - _component: building-blocks/forms/submit
      text: Send Message
      variant: primary
---

Overview #

Groups input fields and buttons into a form that can submit data to a URL.

Properties #

action string | default: ./

Where to send the form-data when the form is submitted. The URL that processes the form submission.

formBlocks array | default: array

The form blocks to render inside the form.

Slots #

default

The contents of the Form. Used only when the formBlocks property is not set.