Reference: Form Field Index

Which fields you can use

The Forms plugin provides the following fields, which you can use to build your forms.

Common Fields Attributes

Every field accepts a list of attributes you can use. Each field could share these common attributes, but particular fields might ignore them. The best way to check which attributes are allowed on a field is to check the field description in this page, and see which attributes are mentioned.

This list provides a common ground so there's no need to repeat the description of a common field.

Positive values

You can set positive values in multiple ways: 'on', 'true', 1. Other values are interpreted as negative.

The Captcha Field

The captcha field type is used to add a Google Recaptcha element to your form. Unlike other elements, it can be used once in the form.

Also, the name attribute of the captcha field must be g-recaptcha-response. The reason is that Google reCAPTCHA stores the Captcha confirmation code in a field named g-recaptcha-response.

Example:

-
  name: g-recaptcha-response
  label: Captcha
  type: captcha
  recaptcha_site_key: j3jeoi3jeroi23jrio234jro32nrkj43njrn32rn3
  recaptcha_not_validated: 'Captcha not valid!'
  validate:
    required: true

Server-side Captcha validation

The above code will validate the Captcha in the frontend and prevent form submission if not correct. To also validate the captcha server-side, add the captcha process action to your forms:

    process:
        - captcha:
            recatpcha_secret: ENTER_YOUR_CAPTCHA_SECRET_KEY

See the Contact Form example to see it in action.

The Checkbox Field

The checkbox field type is used to add a single checkbox to your form.

Example:

-
  name: agree_to_terms
  type: checkbox
  label: "Agree to the terms and conditions"
  validate:
      required: true

The Checkboxes Field

The checkboxes field type is used to add a group of checkboxes to your form.

Examples:

pages.process:
    type: checkboxes
    label: PLUGIN_ADMIN.PROCESS
    help: PLUGIN_ADMIN.PROCESS_HELP
    default: [markdown: true, twig: true]
    options:
        markdown: Markdown
        twig: Twig
    use: keys

my_field:
    type: checkboxes
    label: A couple of checkboxes
    default: [option1: true, option2: true]
    options:
        option1: Option 1
        option2: Option 2

The Date Field

The date field type is used to add an HTML5 date input field.

Example:

-
  type: date
  label: Enter a date
  validate.min: "2014-01-01"
  validate.max: "2018-12-31"

The Display Field

The display field type is used to show some text or instructions inside the form. Can accept markdown content

Example:

test:
    type: display
    size: large
    label: Instructions
    markdown: true
    content: "This is a test of **bold** and _italic_ in a text/display field\n\nanother paragraph...."

The Email Field

The email field type is used to present a text input field that accepts an email, using the email HTML5 input.

Example:

header.email:
  type: email
  autofocus: true
  label: Email

The File Field

With the file field type you can let users to upload files through the form. The field by default allows one file only, of type image and will get uploaded in the current page where the form has been declared.

# Default settings
- my_files:
      type: file
      multiple: false
      destination: '@self'
      accept:
        - image/*

By default, in Admin the file field will overwrite an uploaded file that has the same name of a newer one, contained in the same folder you want to upload it, unless you set avoid_overwriting to true in the field definition.

The Hidden Field

The hidden field type is used to add a hidden element to a form.

Example:

header.some_field:
  type: hidden
  default: my-value

The Password Field

The password field type is used to present a password text input field.

Example:

-
  type: password
  label: Password
  name: password

The Radio Field

The radio field type is used to present a set of radio fields

Example:

-
  type: radio
  label: Choice
  name: my_choice
  default: [markdown: true, twig: true]
  options:
      markdown: Markdown
      twig: Twig

The Range Field

The range field is used to present a range input field.

Example:

header.choose_a_number_in_range:
  type: range
  label: Choose a number
  validate:
    min: 1
    max: 10

The Select Field

The select field type is used to present a select field.

Example:

pages.order.by:
    type: select
    size: long
    classes: fancy
    label: PLUGIN_ADMIN.DEFAULT_ORDERING
    help: PLUGIN_ADMIN.DEFAULT_ORDERING_HELP
    options:
        default: PLUGIN_ADMIN.DEFAULT_ORDERING_DEFAULT
        folder: PLUGIN_ADMIN.DEFAULT_ORDERING_FOLDER
        title: PLUGIN_ADMIN.DEFAULT_ORDERING_TITLE
        date: PLUGIN_ADMIN.DEFAULT_ORDERING_DATE

The Spacer Field

The spacer field type is used to add some text, a headline or an hr tag

Example:

test:
    type: spacer
    title: A title
    text: Some text
    underline: true

The Text Field

The text field is used to present a text input field.

Example:

header.title:
  type: text
  autofocus: true
  label: PLUGIN_ADMIN.TITLE

The Textarea Field

The textarea field is used to present a textarea input field.

Example:

header.content:
  type: textarea
  autofocus: true
  label: PLUGIN_ADMIN.CONTENT