Creating Forms in Camunda 7 – Camunda Forms, Embedded Forms, and Generated Forms (Complete Guide)

In Camunda 7, forms are essential for human tasks (User Tasks). Camunda provides three powerful ways to build forms:

1. Camunda Forms (Modern, Modeler-based)

2. Embedded Forms (Custom HTML/JS inside your application)

3. Generated Forms (Auto-built from process variables)

Each form type has different strengths and is suitable for different use cases.

This guide covers all three with examples, XML snippets, and code.

---

⭐ 1. Camunda Forms (Recommended & Latest Approach)

Camunda Forms are the new standard in Camunda Modeler.

You design forms visually using drag-and-drop components.

✔ Best when:

• You want fast, UI-friendly forms

• You don’t want to write HTML

• You need simple/medium forms

• You want to use built-in validation

---

How to Create a Camunda Form

Step 1 → Open Camunda Modeler

Create a new Camunda Form (.form file).

Step 2 → Add components

• Text field

• Number field

• Checkbox

• Select box

• Text area

• File upload

• Submit button

Step 3 → Save the form

Example path:

/forms/userForm.form

Step 4 → Reference the form in User Task

<bpmn:userTask id="UserTask_Form" name="Enter Loan Details">
  <bpmn:extensionElements>
    <camunda:formRef>userForm</camunda:formRef>
  </bpmn:extensionElements>
</bpmn:userTask>

---

Passing Variables to Camunda Forms

{
  "name": { "value": "Shikha" },
  "amount": { "value": 5000 }
}

Forms read/write variables automatically.

---

⭐ 2. Embedded Forms (HTML/JS Forms inside Camunda Tasklist)

Embedded forms allow you to create your own HTML UI, hosted inside Tasklist.
These were the first and most flexible form type in Camunda 7.

✔ Best when:

• You want full + custom UI

• You need dynamic JS-based behavior

• You want to integrate CSS frameworks (Bootstrap, Tailwind)

• You want complex validation or custom widgets

---

How to Create an Embedded Form

Step 1 → Create HTML File

Example:
/src/main/resources/static/forms/loanForm.html

<form role="form">
  <div class="form-group">
    <label>Name</label>
    <input cam-variable-name="name"
           cam-variable-type="String"
           class="form-control" />
  </div>

  <div class="form-group">
    <label>Amount</label>
    <input cam-variable-name="amount"
           cam-variable-type="Integer"
           class="form-control" />
  </div>
</form>

---

Step 2 → Reference the Form in BPMN

<userTask id="UserTask_Embedded" camunda:formKey="embedded:app:forms/loanForm.html"/>

Meaning:
embedded:app: → load form from application classpath
forms/loanForm.html → file location

---

Step 3 → Add Script or JS Logic (Optional)

<script cam-script type="text/form-script">
  $scope.calculate = function() {
    $scope.value = $scope.amount * 0.10;
  }
</script>

---

⭐ 3. Generated Forms (Auto-Created Forms from Process Variables)

Generated Forms are the simplest form type in Camunda.
Camunda automatically builds the form based on:

✔ Process variables
✔ Form fields defined in BPMN

✔ Best when:

• You need a quick form without writing anything

• Testing/development stage

• Form is extremely simple

---

How to Create a Generated Form

Add <camunda:formData> inside the User Task:

<bpmn:userTask id="UserTask_Generated">
  <bpmn:extensionElements>
    <camunda:formData>
      <camunda:formField id="name" label="Customer Name" type="string"/>
      <camunda:formField id="amount" label="Loan Amount" type="long"/>
    </camunda:formData>
  </bpmn:extensionElements>
</bpmn:userTask>

Tasklist automatically generates:

• Input fields

• Labels

• Required validations (if configured)

---

⭐ Comparison Table – Which Form Type Should You Use?

Form Type	UI Flexibility	Coding Needed	Best For
Camunda Forms	Medium	No	Standard forms, modern UI
Embedded Forms	Very High	Yes (HTML/JS)	Complex forms, custom UI
Generated Forms	Low	No	Quick prototypes, simple inputs

---

⭐ Which Form Type Does Camunda Recommend?

✔ Camunda Forms (Modern & Supported)
❗ Embedded forms are powerful but based on old AngularJS (deprecated).
✔ Generated Forms are only for simple use cases.

---

⭐ Real-World Example: Loan Approval Form

Camunda Forms → For entering customer info
Embedded Forms → For interactive calculations
Generated Forms → For manager approval notes

---

⭐ Best Practices

✔ Keep UI simple unless using Embedded Forms
✔ Use Camunda Forms for all new development
✔ Store forms in a separate folder
✔ Validate inputs using FEEL or form validators
✔ Avoid JS-heavy embedded forms unless necessary
✔ Use typed variables (Integer, Boolean, Double)
✔ Always test the form in Tasklist
✔ Pre-fill forms using process variables

---

🎉 Conclusion

Camunda 7 provides three flexible approaches to building human task forms:

✔ Camunda Forms – Modern, visual, easy
✔ Embedded Forms – Fully customizable with HTML/JS
✔ Generated Forms – Zero configuration, built automatically

Choosing the right form depends on your UI requirements and complexity.
With these tools, you can design both simple and advanced human task screens inside your workflow.

💼 Professional Support Available

If you are facing issues in real projects related to enterprise backend development or workflow automation, I provide paid consulting, production debugging, project support, and focused trainings.

Technologies covered include Java, Spring Boot, PL/SQL, Azure, and workflow automation (jBPM, Camunda BPM, RHPAM).

📧 Contact: ishikhanirankari@gmail.com | info@realtechnologiesindia.com

🌐 Website: IT Trainings | Digital metal podium