When using Flow JSON versions below 4.0, a Footer placed outside the Form cannot access the form’s internal data in its payload.
The fix is simple: move the Footer component inside the Form's children array.

The Error

INVALID_FOOTER_PAYLOAD_OUTSIDE_FORM

Footer placed outside Form component is not allowed to reference form data.

This happens because for JSON versions prior to 4.0, form data binding is scoped. Only components inside a Form can read or submit its fields. A Footer outside the Form has no access to its internal fields like ${form.textInput}.

Example of the Problem

Here's a problematic layout:

{
  "type": "Form",
  "name": "form",
  "children": [
    {
      "type": "TextInput",
      "name": "textInput",
      "label": "Text"
    }
  ]
},
{
  "type": "Footer",
  "label": "Submit",
  "on-click-action": {
    "name": "complete",
    "payload": {
      "textInput": "${form.textInput}"
    }
  }
}

This fails because the Footer is outside the Form.

The Corrected Version

Move the Footer inside the Form:

{
  "type": "Form",
  "name": "form",
  "children": [
    {
      "type": "TextInput",
      "name": "textInput",
      "label": "Text"
    },
    {
      "type": "Footer",
      "label": "Submit",
      "on-click-action": {
        "name": "complete",
        "payload": {
          "textInput": "${form.textInput}"
        }
      }
    }
  ]
}

Now, the Footer can correctly read form values and submit them in the payload.

When is This Relevant?

  • You’re using Flow JSON version < 4.0.

  • Your Footer needs to send form values in its action payload.

  • You're getting INVALID_FOOTER_PAYLOAD_OUTSIDE_FORM.

TL;DR

If there's a Form, keep the Footer inside it.
This ensures the payload can reference form fields without issues.

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