Form Button to some API


I wanted to extend the example from Embedded Forms Camunda. How can I add a button to the html that reads the content of the fields and submits it to some api?

I tried this:

<div id="form-container">
  <form role="form" name="form">
    <div class="form-group">
      <label for="customerId-field">Customer ID</label>
      <input required cam-variable-name="customerId" cam-variable-type="String" class="form-control" id="customerId" />
    <div class="form-group">
      <label for="amount-field">Amount</label>
      <input cam-variable-name="amount" cam-variable-type="Double" class="form-control" id="amount" />
  <button id="submitButton" type="button">Submit</button>

  // Function to handle the form submission
  function submitForm() {
    // Get the value of the customerId field
    var customerId = document.getElementById("customerId").value;

    // Define the URL to send the request to
    var apiUrl = ""; // Replace with your actual API URL

    // Create an XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Configure the request"POST", apiUrl, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    // Define the data to send (you can customize this as needed)
    var data = {
      customerId: customerId,
      amount: parseFloat(document.getElementById("amount").value)

    // Convert the data to JSON format
    var jsonData = JSON.stringify(data);

    // Set up a callback function to handle the response
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // Request was successful
          console.log("Request successful");
          // You can handle the response here
        } else {
          // Request failed
          console.error("Request failed with status: " + xhr.status);
          // You can handle the error here

    // Send the request

  // Add an event listener to the submit button
  document.getElementById("submitButton").addEventListener("click", submitForm);

However I get the error: Cannot read properties of undefined (reading ‘assignee’)

This is my xml:

xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="" xmlns:bpmn2="" xmlns:bpmndi="" xmlns:dc="" xmlns:di="" xmlns:camunda="" id="sample-diagram" targetNamespace="" exporter="bpmn-js (" exporterVersion="14.0.0" xsi:schemaLocation=" BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="true">
    <bpmn2:startEvent id="StartEvent_1">
    <bpmn2:sequenceFlow id="Flow_1bg6m23" sourceRef="StartEvent_1" targetRef="Activity_1l5pqy2" />
    <bpmn2:endEvent id="Event_0nfofj7">
    <bpmn2:sequenceFlow id="Flow_13xnv1l" sourceRef="Activity_1l5pqy2" targetRef="Event_0nfofj7" />
    <bpmn2:userTask id="Activity_1l5pqy2" camunda:formKey="embedded:deployment:sampleEmbeddedForm.html" camunda:assignee="demo">
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="152" y="100" width="36" height="36" />
      <bpmndi:BPMNShape id="Event_0nfofj7_di" bpmnElement="Event_0nfofj7">
        <dc:Bounds x="392" y="100" width="36" height="36" />
      <bpmndi:BPMNShape id="Activity_1likfkj_di" bpmnElement="Activity_1l5pqy2">
        <dc:Bounds x="240" y="78" width="100" height="80" />
      <bpmndi:BPMNEdge id="Flow_1bg6m23_di" bpmnElement="Flow_1bg6m23">
        <di:waypoint x="188" y="118" />
        <di:waypoint x="240" y="118" />
      <bpmndi:BPMNEdge id="Flow_13xnv1l_di" bpmnElement="Flow_13xnv1l">
        <di:waypoint x="340" y="118" />
        <di:waypoint x="392" y="118" />