Skip to main content

 

JSON structure

Outlining the structure of the elements common attributes: type, title, name and required;

Text area

{
    "type": "webform_multiple",
    "title": "What's new?",
    "name": "what_s_new_",
    "required": false
}

Text field

An additional attribute for the text field is maxlength

{
    "type": "textfield",
    "title": "Text field (optional)",
    "name": "text_field_optional_",
    "required": false,
    "maxlength": 255
}

Select field

Options attribute is an additional feature:

{
    "type": "select",
    "title": "Dropdown field (optional)",
    "name": "dropdown_field_optional_",
    "required": false,
    "options": [
        {
            "label": "Test 1",
            "name": "dropdown_field_optional_",
            "value": 1,
            "description": null
        },
        {
            "label": "Test 2",
            "name": "dropdown_field_optional_",
            "value": 2,
            "description": null
        },
        {
            "label": "Test 3",
            "name": "dropdown_field_optional_",
            "value": 3,
            "description": null
        }
    ]
}

Checkboxes and radios

The key difference between checkboxes and radio buttons is determined in the type.

{
    "type": "checkboxes",
    "title": "Category tags",
    "name": "category_tags",
    "required": false,
    "options": [
        {
            "label": "Business Update",
            "name": "category_tags[Business Update]",
            "value": "Business Update",
            "description": null
        },
        {
            "label": "Social Update",
            "name": "category_tags[Social Update]",
            "value": "Social Update",
            "description": null
        },
        {
            "label": "Compliment a colleague",
            "name": "category_tags[Compliment a colleague]",
            "value": "Compliment a colleague",
            "description": null
        }
    ]
}

Upload a file

This element utilises the Webform Dropzone JS module.  In the Drupal admin, the files that can be uploaded has been restricted.

{
    "type": "webform_dropzonejs",
    "title": "Upload image or file",
    "name": "upload_image_or_file",
    "value": {
        "uploaded_files": []
    },
    "description": {
        "file_upload_help": {
            "#theme": "file_upload_help",
            "#upload_validators": {
                "file_validate_size": [
                    33554432
                ],
                "file_validate_extensions": [
                    "jpg png pdf docx"
                ],
                "webform_file_validate_extensions": [],
                "webform_file_validate_name_length": []
            },
            "#cardinality": 1
        }
    },
    "required": false,
    "max_filesize": 33554432,
    "upload_validators": {
        "file_validate_size": [
            33554432
        ],
        "file_validate_extensions": [
            "jpg",
            "png",
            "pdf",
            "docx"
        ],
        "webform_file_validate_extensions": [],
        "webform_file_validate_name_length": []
    }
}

Capture element

{
    "captcha": "",
    "form_build_id": "<input autocomplete=\"off\" data-drupal-selector=\"form-hsvvfwmn9ntlsrq0jwabuco7l-a2yhja-5fgafiesa\" type=\"hidden\" name=\"form_build_id\" value=\"form--hsVVFWmn9NtLSRq0JWabuCO7l-A2YhJA-5fgafIeSA\" />\n",
    "form_id": "<input data-drupal-selector=\"edit-webform-submission-share-an-update-node-6637-add-form\" type=\"hidden\" name=\"form_id\" value=\"webform_submission_share_an_update_node_6637_add_form\" />\n",
    "form_token": "<input data-drupal-selector=\"edit-webform-submission-share-an-update-node-6637-add-form-form-token\" type=\"hidden\" name=\"form_token\" value=\"CTEGuVjB7ugGz2_zBeaCqFwMFoMP5innTuCyLekk1jE\" />\n",
    "submit": {
        "name": "op"
    },
    "ajax": "/mhc_custom/webform",
    "captcha_token": "",
    "captcha_sid": "",
    "captcha_sitekey": "6LcrVMgaAAAAABq8-xq48s1Rn4U6LD55YFIrf0tY",
    "webform_id": "share_an_update",
    "errors": [],
    "success": false,
    "raw_values": {
        "form_build_id_raw": "form--hsVVFWmn9NtLSRq0JWabuCO7l-A2YhJA-5fgafIeSA",
        "form_id_raw": "webform_submission_share_an_update_node_6637_add_form",
        "form_token_raw": "form_token_placeholder_obDsIMHgbrfCHSgI2LDlOr8T_qS0ISqOnNr4G_9n_dA"
    }   
}

 

Setting up the REST API

Using the references from above, let's set-up the POST REST call.

URL

POST  http://{domain}/mhc_custom/webform?_format=json

Headers

Content-Type: application/json
Accept: application/json
X-CSRF-Token: {token}

Body

{
    "webform_id": "share_an_update",
    "what_s_new_[what_value]": "what_value",
    "text_field_optional_": "{text_field_optional_value}",
    "dropdown_field_optional_": "{dropdown_field_optional_value}",
    "category_tags[Business Update]": "{boolean}",
    "category_tags_radio": "{category_tags_radio_value}",
    "upload_image_or_file": "{fid}"
}

Each of the values is noted from the options above.  However, how to get the {fid} value?

You need to upload the relevant file first, then run this REST POST.  Therefore, {fid} is the file id reference. 

Example of the values substituted

{
    "webform_id": "share_an_update",
    "what_s_new_[happening to us]": "happening to me",
    "text_field_optional_": "key one liner",
    "dropdown_field_optional_": "2",
    "category_tags[Business Update]": true,
    "category_tags[Compliment a colleague]": false,
    "category_tags[Social Update]": false,
    "category_tags_radio": "Second option",
    "upload_image_or_file": "8943"
}

 

Response

The response will be a sid number as a string. 

{
    "sid": "{sid}"
}

The response for {sid} will be a number like 142

To learn how to upload an image read - Upload an image file using JSON:API

Related articles

Andrew Fletcher11 Feb 2025
Webpack build process and theme automation improvements
The Drupal theme configuration has undergone recent changes made to the Webpack configuration, SCSS and JavaScript handling, and automation of updates to the orw.libraries.yml file in the custom Drupal theme. These changes are designed to improve the build process, enhance maintainability, and...
Andrew Fletcher22 Jan 2025
Removing a missing module in Drupal
Occasionally, a Drupal site may display a warning about a module being "Missing or invalid." This issue occurs when a module is marked as installed in the configuration but is no longer present in the file system. A common example is the `fakeobjects` module, which is associated with CKEditor 4 and...