This article shows step-by-step how to add a dynamic-add-field group to a form. The same pattern works for invoices, registrations, contact lists and anywhere else you want repeating rows.
Step-by-Step
- In the form builder, click Add Field and choose Dynamic Add Group.
- Give the group a label (the user-visible heading), an internal name (the database column or array key) and a helper text if useful.
- Define the child fields. Inside the group, add the fields that make up one row — for an invoice that's typically Product, Quantity, Unit Price.
- Configure the row controls:
- Min rows: at least how many rows must be present.
- Max rows: hard cap on rows.
- Add row label: the button text (e.g. “Add line item”).
- Reorder enabled: allow drag-handle to reorder rows.
- Delete confirmation: ask before removing a row that has data.
- If you need calculations, add a field outside the group with formula
SUM(line_items[*].quantity * line_items[*].unit_price). - Save the form and test in preview.
Storage Pattern
Behind the scenes, rows are stored either as JSON in a single column (simple cases) or as child records in a related table (when you want to query them individually).
Worked Examples
- Quote builder: Min 1, max 100 line items. Auto-calculate subtotal, tax and grand total. Reorder enabled so the salesperson can group related items.
- Conference registration: Min 1, max 5 attendees. Each row captures name, dietary needs, and a select for workshop choice. Reorder disabled (order doesn't matter).
- School trip consent form: Min 1 child, max 4 children. Each row has child name, year group, and a medical-notes textarea.
Note: Calculated totals are recomputed client-side on every change, but always re-validated on the server before save. Don't rely on JS-only totals for billing — verify in the server-side trigger.