When building WhatsApp flows, you might come across this error:

INVALID_ON_CLICK_ACTION_PAYLOAD

Missing Form component ${expression} for screen '${screenId}'.

Form binding does not exist

This error typically occurs when you're referencing form input using ${form.something} in your payload, but the input field doesn't actually exist in the form structure.

What Causes This Error?

The issue is usually triggered by one of the following:

  1. You're referencing a form field that hasn't been defined.

  2. The Form component exists, but there are no input fields within it.

  3. The on-click-action tries to use a form value that doesn’t exist or is incorrectly named.

Example of the Problem

Here’s a simplified example that would cause this error:

{
  "type": "Form",
  "name": "PASS_CUSTOM_VALUE",
  "children": [
    {
      "type": "Footer",
      "on-click-action": {
        "name": "complete",
        "payload": {
          "input": "${form.not_present}"
        }
      }
    }
  ]
}

In the example above, the form references ${form.not_present} in the payload, but there’s no input field named not_present in the form. As a result, the system throws an error.

How to Fix It

To resolve this, you need to ensure that:

  • The Form component includes at least one valid input.

  • The input field has a name property that matches the variable you’re referencing in the payload.

Corrected Example

{
  "type": "Form",
  "name": "PASS_CUSTOM_VALUE",
  "children": [
    {
      "type": "Input.Text",
      "name": "custom_value",
      "label": "Enter a value"
    },
    {
      "type": "Footer",
      "on-click-action": {
        "name": "complete",
        "payload": {
          "input": "${form.custom_value}"
        }
      }
    }
  ]
}

In this corrected version:

  • A Text input named custom_value is added to the form.

  • The on-click-action payload now references an actual input that exists in the form.

Checklist for Debugging

  • Ensure all form inputs are declared inside a Form component.

  • Match the variable names exactly, including casing.

  • Only use ${form.input_name} when the corresponding input exists in the form hierarchy.

The fix is straightforward: confirm the form contains the correct inputs and that all references in the payload align with the input names. For businesses using WhatsApp automation tools, ensuring that each flow component is properly structured helps prevent these types of issues and keeps user interactions smooth. If you’re building flows for onboarding, payments, or support, platforms like Heltar can help you design, test, and launch automations without running into these common errors.

For more troubleshooting insights related to WhatsApp Business API, check out heltar.com/blogs.