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.