Create Multi-Step Form

Webiny’s multi-step forms enable users to divide lengthy forms into smaller, manageable steps. This approach allows users to design more intricate forms while maintaining simplicity and ease of completion. In this tutorial, we will learn how to create a multi-step form in Form Builder.

Watch unedited video here

1. From the Side Menu, click Form Builder > FORMS > Forms.

   ✔️ The Forms screen opens.

2. Click + NEW FORM.

   ✔️ The New form screen opens.

3. In the textbox, type Registration Form.

4. Click + CREATE.

   ✔️ The form builder opens.

5. Under the Form Element section, click CONTACT INFORMATION.

   ✔️ The CONTACT INFORMATION accordion opens containing commonly used form fields.

6. Drag and Drop the following fields under Step 1 inside the form-fields-area (marked with the message Drop your first field here) inside the EDIT tab:

   a. FIRST NAME

   b. LAST NAME

   c. EMAIL

   d. PHONE NUMBER

7. Click ➕ ADD NEW STEP.

   ✔️ A new accordion Step 2 is created and displays below Step 1.

8. Drag and Drop the following fields under Step 2 inside the form-fields-area (marked with the message Drop your first field here) inside the EDIT tab:

   a. STREET ADDRESS

   b. CITY

   c. STATE/REGION

   d. COUNTRY

9. Click PUBLISH.

   ✔️ The Forms screen opens with the message “Your form was published successfully!“.

Note: To learn how to embed the form inside a page, test the form, and view the collected data, please follow the Create Form tutorial.