Create Form

Building a standalone form to exclusively collect user data can be done via the API.

When building a form you can add:

  • Form fields: a FormBuilder block with many fields, single standalone FormField blocks, or an embedded FormSelect
  • General blocks: Content, Quote, and Ad
  • One result page

A form has no question blocks - SingleChoice, Order, and the other question types of the other Riddle types are not available here. Everything else works the same as in any other build: at most 500 blocks, 100 items per block, and 15 media per build.

Result page

In a form only one result page is allowed which is specified in build.result. Basic results only consist of a title and description property.

Example:

{
    "title": "Thank you!",
    "description": "We are happy to have you here"
}

If you want to create complex result pages with texts, images, ... click here to learn how to build advanced result pages.

Full example

Example with the block types a form accepts: a Content and a Quote block, an Ad block, a FormBuilder with several field types, and a standalone FormField.

Note: The example below uses dynamic variables to personalize the result page. Click here to learn more about dynamic variables.

{
    "type": "Form",
    "build": {
        "title": "My data collection form",
        "blocks": [
            {
                "type": "Content",
                "title": "Join our newsletter",
                "description": "It only takes a minute.",
                "media": "https://httpbin.io/image/jpeg",
                "mediaOrientation": "Wide"
            },
            {
                "title": "Please enter your data.",
                "description": "We only need the basics.",
                "type": "FormBuilder",
                "isRequired": true,
                "fields": [
                    {
                        "title": "Your email",
                        "type": "Email",
                        "placeholder": "Enter your email address",
                        "isRequired": true,
                        "requiredMessage": "We need your email to get back to you."
                    },
                    {
                        "title": "Your name",
                        "type": "Name",
                        "autocomplete": "given-name",
                        "maxLength": 40
                    },
                    { "title": "Your country", "type": "Country" },
                    {
                        "title": "How did you hear about us?",
                        "type": "Dropdown",
                        "items": [
                            { "title": "Search engine" },
                            { "title": "Social media" },
                            { "title": "A friend" }
                        ]
                    },
                    {
                        "type": "Privacy",
                        "privacyText": "<p>We store your data to get back to you. See our privacy policy.</p>",
                        "requiredConsentForAddRiddleData": {
                            "isEnabled": true,
                            "isRequired": true,
                            "label": "<p>May we combine your answers with your email?</p>",
                            "checkboxText": "<p>Yes, you may</p>"
                        }
                    }
                ]
            },
            {
                "title": "Anything else you would like to tell us?",
                "type": "FormField",
                "fieldType": "LongText",
                "label": "Your message",
                "placeholder": "Type your message here",
                "maxLength": 500
            },
            {
                "type": "Ad",
                "iframe": {
                    "url": "https://ads.your-website.com/ad.html",
                    "height": 250
                },
                "showNextButtonDelay": 3
            },
            {
                "type": "Quote",
                "title": "What our customers say",
                "quoteText": "The only way to do great work is to love what you do.",
                "quoteAuthor": "Steve Jobs"
            }
        ],
        "result": {
            "title": "Thank you!",
            "description": "Thank you for entering your data %name. We will get back to you soon."
        }
    }
}

Tip: Instead of building the fields here, you can reuse a form you already published by adding a FormSelect block with that form's UUID. It is left out of the example above because it only builds with a UUID that actually exists in your project.

Next steps

Now that you know the basics of building a form, you might want to learn how to:

Table of Contents