Forms and fields

The form element itself is automatically detected and shown options for the submit URL and whether to submit via POST or GET. POST is the selected default but can be overridden as the default by being set in the theme code.

block-edit

To be used on each form field element, bringing up options specific to the form field type.

Example

<input type="text" name="organization" id="text-input" class="block-edit" data-block="text-field">

Field properties

The properties shown for all fields by default are for setting the name property along with a checkbox for whether the field is required. Additionally, each field type includes its own default properties along with options to enable/disable properties. If any of the properties are included in the theme code, they will be shown as the default states.

Text fields

input type="text", input type="email", input type="url", input type="tel"

Includes option to set a character limit.

block-value enables option for value property.

block-placeholder enables option for placeholder property.

Number field

input type="number"

Includes option to limit to a lowest number and/or a highest number, and to set an increment interval.

block-value enables option for value property.

Date field/picker

input type="date"

Includes option to limit to an earliest date and/or a latest date.

block-value enables option for value property.

Text area

textarea

Includes option for the number of rows that should be shown.

block-no-rows disables option for rows property.

Select dropdown

select

Includes option for the value of each item, and if item is selected by default.

Radio buttons and checkboxes

input type="radio", input type="checkbox"

A set of radio buttons or checkboxes can be added using the region repeat option. Fields are grouped automatically by matching their name property.

Submit button

The submit button will always just allow the text value to be changed. You can disable editing the value by not adding block-edit to it.

Labels

Labels also need block-edit to be made editable and works the same as any editable text. Each label associated with a field (via the for property) in the theme code will automatically be associated with any new instance added in the visual editor.

Example

<label for="text-input" class="block-edit" data-block="text-field-label">Organization</label> <input type="text" name="organization" id="text-input" class="block-edit" data-block="text-field">