Add form fields

Form fields can be added to any Riddle type (Poll, Quiz, Form, Predictor). They allow you to collect user input.

You can choose between two options:

Add a form with form fields to this Riddle
Embed an already published Riddle form from your (personal) project

Embedding another form allows you to reuse a form you have already created (= central data collection) but also allows you to build more complex forms than with the builder API.

Add form to Riddle

Like any other block you might add, such as SingleChoice, you can add form fields to the Riddle build by adding a FormBuilder block item to the blocks array.

Properties

The form fields / builder block consists of:

Property	Required	Type	Description	Default
`title`	✓	string	The title of the form builder
`description`		string	The description of the form builder
`type`	✓	string	Set to `FormBuilder`
`fields`	✓	object	An object where the key is the field label and the value is the field type OR an advanced configuration ovject. The field type must be one of the available form fields
`isRequired`		boolean	Whether the form is required; if set to false the form can be skipped	false

Example

The FormBuilder block isolated:

{
    "title": "My form builder",
    "type": "FormBuilder",
    "fields": {
        "Your email": "Email",
        "Your name": "Name"
    }
}

Used in a poll build:

{
    "type": "Poll",
    "build": {
        "title": "My new poll",
        "blocks": [
            {
                "title": "The best noodles?",
                "type": "SingleChoice",
                "items": [
                    "Spaghetti",
                    "Fusilli"
                ]
            },
            {
                "title": "My form builder",
                "type": "FormBuilder",
                "fields": {
                    "Your email": "Email",
                    "Your name": "Name"
                }
            }
        ],
        "result": {
            "title": "Thank you!",
            "description": "We are happy to have you here"
        }
    }
}

Note: You can add as many form builders as you like as long as you stay within the 20 blocks limit.

Available form fields

Name
Email
Phone
URL
Number
Country
ShortText
LongText
DatePicker
TimePicker
Checkbox
Radio buttons (see documentation below)
Dropdown (see documentation below)

Please note that the field type you send to the API is case-sensitive.

Add complex form fields

All form fields can be further customized by converting the simple input string, e.g. Email, to an object. This allows you to further customize the field and how it behaves.

Here is an example how an Email field can be customized inside a FormBuilder block:

{
    "title": "My form builder",
    "type": "FormBuilder",
    "fields": {
        "Your email": {
            "type": "Email",
            "placeholder": "Enter your email address",
            "isRequired": true,
            "requiredMessage": "We will never share your email with anyone else."
        }
    }
}

Form field properties

Each form field supports different options. This table illustrates what options are available for which type:

Property	Description	Available for...
`description`	Description of the field	all types
`placeholder`	Placeholder text	Name, Email, Phone, URL, Number
`prefilledText`	Prefilled text	Name, Email, Phone, URL, Number
`isRequired`	Whether the field is required	all types
`requiredMessage`	Message shown when the field is required but not filled	all types
`isHidden`	Whether the field is hidden; useful in combination with the Riddle data layer	Name, Email, Phone, URL, Number
`regex`	Regex to validate the field	Name, Email, Phone, URL, Number
`regexValidationMessage`	Message shown when the regex validation fails	Name, Email, Phone, URL, Number
`checkboxText`	Text shown next to the checkbox	Checkbox

Adding radio buttons and dropdowns

The RadioButtons and Dropdown field types can be used to create a list of options. You can add as many options as you like in the items array.

Example FormBuilder object:

{
    "title": "My form builder",
    "type": "FormBuilder",
    "fields": {
        "Your favorite color": {
            "type": "RadioButtons",
            "items": [
                "Red",
                "Green",
                "Blue"
            ]
        },
        "Your favorite animal": {
            "type": "Dropdown",
            "items": [
                "Dog",
                "Cat",
                "Fish"
            ]
        }
    }
}

Embed an already published form

You can embed a form from your (personal) project by adding a block of the FormSelect type to the blocks array.

Properties

The form select block consists of:

Property	Required	Type	Description
`form`	✓	string	The UUID of the form you want to embed

Example

The FormSelect block isolated:

{
    "type": "FormSelect",
    "form": "hQ3SYWur"
}

Used in a poll build:

{
    "type": "Poll",
    "build": {
        "title": "My new poll",
        "blocks": [
            {
                "title": "The best noodles?",
                "type": "SingleChoice",
                "items": [
                    "Spaghetti",
                    "Fusilli"
                ]
            },
            {
                "type": "FormSelect",
                "form": "hQ3SYWur"
            }
        ],
        "result": {
            "title": "Thank you!",
            "description": "We are happy to have you here"
        }
    }
}

Build RiddlesCreate Form - Build Riddles

Build RiddlesCreate Predictor - Build Riddles