Skip to main content

Collection Form and Collection Fields

This video helps you know about the collection form and fields component and its working to let you create data-rich web applications easily.

1. Drop a Collection Form

Go to Components and choose Collection Form. Drag-and-drop it onto the page or into your Sections. mention the name of the collection and Save the form.

DrapCode SignUp Form

2. Preview the Form

Click the Preview option and you will find the form on the page.

DrapCode SignUp Form

3. Create an Event

In order for the form to accept and submit data you need to create an event. For this go to Events and choose Add Event. Here name your event and click Create.

DrapCode SignUp Form

3.1. Configure the Event

Create an event to save data.

DrapCode SignUp Form

3.2 Add Event Details

Add the collection name and pop-up messages (optional) and Save the event.

DrapCode SignUp Form

3.3 Redirect the Page

Choose Navigation for Page Redirect.

DrapCode SignUp Form

3.4 Add Event Details

Add the page to redirect the user to and Save the event.

DrapCode SignUp Form

4. Bind the Event to the Form

Open form Settings and choose the event to bind and Save.

DrapCode SignUp Form

5. Add New Record

You can add a new record via the preview page and Submit. It will display your notification message.

DrapCode SignUp Form

5.1 View the New Record

Now you are redirected to the page and your new record reflects here.

DrapCode SignUp Form

5.2 View New Record in Collection

Go to your collection and reload it to find the new record.

DrapCode SignUp Form

6. Add Collection Field

Click Configuration and Add Field. Name your field and Save.

DrapCode SignUp Form

6.1 Adding New Field to Collection

You can either drop a Collection Form for the new field, open its Settings and mention the collection.

DrapCode SignUp Form

6.2 Adding New Field to Collection

You can go to Components and choose Collection Field. Open its Settings and choose the new field to add. It will automatically render it into the form and Save.

DrapCode SignUp Form

7. Preview the Changes

Reload the form and you will find the new field.

DrapCode SignUp Form

8. View the New Field in Collection

Reload the collection and you will find the new field.

DrapCode SignUp Form