Drupal 9 adding a reCAPTCHA element to a webform

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