Form Block

Display an interactive form with validation.

Demo

JSON Schema

Form block uses JSON Schema to build your very own form. You will find more informations about Schema Form here.

Minimal usage

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string

Displays a form with a single input which will do nothing without setting at least onSubmit or onChange:

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form

This will emit a save form event with all form values as payload. You also can set a custom payload:

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit:
    event: save form
    payload:
      id: 1234

Static payload will me merged with form values.

This event will be fired when form will be submitted, so when user type Enter or click on Submit button. But you can do the same on each user keypress with onChange. Be warned it can consume many resources, so don’t use this option everywhere:

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onChange:
    event: save form
    payload:
      id: 1234

There is a third event which fire when a field is blur. It’s onBlur:

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onBlur:
    event: save form
    payload:
      id: 1234

And finally, you can set initial values to your form with the values attribute. The content should be fetch from an update event indead:

# Page/Block
- slug: Form
  values:
    foo: bar
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form

Advanced usage

Here’s a list of advanced parameters you can set on your form:

submitLabel changes the default submit label by a localized string of your choice:

# Page/Block
- slug: Form
  submitLabel:
    fr: Enregistrer les modifications
    en: Save changes

hideSubmit will hide the submit button. Form can be submitted with Enter key or on change and on blur.

# Page/Block
- slug: Form
  hideSubmit: true

disableSubmit disable the submit button and disable the form to be submitted. In case an interaction with another part of the page needs to block the form.

# Page/Block
- slug: Form
  disableSubmit: '{{disableSubmit}}' # where disableSubmit is set as a boolean

autoFocus automatically focus the first field of the form when it appears on screen.

# Page/Block
- slug: Form
  autoFocus: true

buttons describe an array of custom buttons. They take each an event name and their payload will be merged with form values.

# Page/Block
- slug: Form
  buttons:
    - type: event
      value: save form
      payload:
        email: true
      text: Save and send email
    - type: event
      value: save form
      text: Save

loading display a loading spinner in the submit button. Useless while the form has been submitted but the process takes time on backend side:

# Page/Block
- slug: Form
  onSubmit: submit form
  updateOn: update form
  loading: '{{formIsLoading}}'

# Automation
- emit:
    event: update form
    payload:
      formIsLoading: true
- do something during some terribly long seconds:
    foo: '{{payload.foo}}
- emit:
    event: update form
    payload:
      formIsLoading: false

resetOn is an event name to reset the form from backend. Just emit the event set and all values will reset.

# Page/Block
- slug: Form
  onSubmit: submit form
  resetOn: reset form

# Automation
- emit:
    event: reset form

disableStretchContent makes objects fields groups static. By default they are collaspables.

# Page/Block
- slug: Form
  disableStretchContent: true

collapsed makes all objects fields groups opened by default.

# Page/Block
- slug: Form
  collapsed: true