Create forms with multiple steps and use conditional redirects between them
How it works
You can create multi-step forms to present users with different prompts and data fields based on their answers. Use conditions or other available Formli block transitions to control the flow. Users can navigate between pages to review and edit their responses.
Setup Guide
First, prepare your Formli with several blocks. Add necessary transitions to the blocks. To learn about conditional transitions, check here. Next, create separate form blocks in Webflow and connect them accordingly.
1. Prepare Formli and Webflow forms
3. Connect form containers and Formli blocks
1. Prepare Formli and Webflow forms
- Create your Formli or use an existing one. It should contain only data field blocks.
- Add the same amount of form containers.
2. Add script
Add the script link for using HTML Forms. For more detailed guide - here
3. Connect form containers and Formli blocks
Connect each Formli block with its corresponding form container. For each block:
- Choose form block
- Found the same block in HTML Form Code section
- Set Action link and Method (POST)
- Set custom attributes
data-os-element=formand correspondingdata-os-uuid
- Add form success, error, loading messages (see here).
4. Connect fields
For each field:
- Choose the field.
- Add custom attributes
data-os-elementanddata-os-uuid
- Add field error messages
5. Connect navigation buttons
Add ‘Back’ buttons to each form except last. Add custom attribute data-os-element = back_button to each:
