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 builder to this Riddle
Add a single standalone form field block 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 a form builder

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 500 blocks limit.

Available form fields

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

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

Customizing 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"
            ]
        }
    }
}

Adding content and media fields

The Content and Media field types can be used to add additional information to your form.

Example FormBuilder with Content and Media fields:

{
    "title": "My form builder",
    "type": "FormBuilder",
    "fields": {
        "Introduction": {
            "type": "Content",
            "text": "<h2>Welcome to the survey!</h2><p>Please fill out the form below.</p>"
        },
        {
            "type": "Media",
            "media": "https://example.com/image.jpg"
        }
    }
}

Note: The Media field omits the key in the fields object, as it does not require a label.

Adding single standalone form field blocks

If you want to add a single form field instead of a full form builder, you can do so by adding the respective form field type directly to the blocks array.

Property	Required	Type	Description
`title`	✓	string	The title of the form field
`description`		string	The description of the form field
`type`	✓	string	Set to `FormField`
`fieldType`	✓	string	The type of the form field, must be one of the available form fields

In addition to the common properties, each form field type supports the same options as described in the Customizing form fields section.

Full Form example

{
    "type": "Form",
    "build": {
        "title": "Form example (Builder API)",
        "blocks": [
            {
                "title": "Your favorite animal",
                "type": "FormField",
                "fieldType": "Dropdown",
                "items": [
                    "Dog",
                    "Cat",
                    "Fish"
                ]
            },
            {
                "title": "Your email",
                "type": "FormField",
                "fieldType": "Email",
                "placeholder": "Enter your email address",
                "isRequired": true,
                "requiredMessage": "We will never share your email with anyone else."
            }
        ]
    }
}

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