Dynamic Forms: Nested Forms

Relationship fields in webforms are a powerful concept, allowing you to create items in different apps with one form submission. 

For example, imagine you have a webform that lets people submit bookings for your events. Each booking has a reference to an event and to at least one attendee. Below we will explain you how you can use these relationship fields in three different ways:

Select from existing items

You can let people select one or more items from the app(s) linked to the relationship field. For example, you want the user to select an existing event when he makes a booking. 

Click on the name of the main app to display its fields and drag&drop the relationship fields to your webform.


Create a nested item

Sometimes you don’t want to expose the existing items in a relationship field, but instead let people create a new related item. 

The form builder lists the related apps below the app fields. Click on the name of the related app to display its fields. The related fields can be drag & dropped onto your webform just like any other form component.

In this example the user will create a new item in the app 'Attendees' when making a booking.   


Create multiple nested items

Sometimes you want to create multiple items in a related app.

Click on the name of the related app and drag & drop the component 'Nested Forms' to the form. The 'Nested Forms' component will allow you add fields from the related app in a table.  


The webform will show the button 'Add another' to add multiple nested items. The booking webform below allows the user create multiple items in the related app 'Attendees'.