Using the Same Form Multiple Times on a Single Page
How it works
There are cases when you'll need users to complete the same set of data fields on a page multiple times. This might occur when organizing events that require team or group registrations, or when you want to add the same registration form in different places on the page to ensure users don't miss it. In this article, we'll explore how to set up and customize multiple forms on the same page, ensuring each form works independently and is easy to fill out.
Setup Guide
This guide explains how to use the same HTML form multiple times on a single webpage. Key steps include:
- Prepare the Formli that will be duplicated
- Create and connect the HTML form on the webpage
- Add custom attributes
data-os-groupanddata-os-aliasto each form - Connect other elements using
data-os-for(withdata-os-aliasas a value) - Duplicate the form and update the attributes for each form
- Publish and test
Let’s create a registration form for a Team Trivia Event. This form will gather details for each team member, allowing you to duplicate the form for different roles in the team.
Step 1. Prepare Formli
- Create a new form to register the participants of the trivia night.
Step 2. Create a form on the webpage
- Add the HTML form to the page and connect it. For more detailed guide how to connect HTML Forms to the Webflow - see here
Step 3. Add custom attributes data-os-group and data-os-alias
- If you simply duplicate this form, you'll notice that by default, only the first form is displayed, while all others are hidden. To fix this, we need to add the custom attribute data-os-group to each form. This ensures that all forms are visible, allowing multiple forms to be displayed on the same page.
- Next, add data-os-alias, which will act like an ID for each form. This will help separate success messages, error messages, and any other content to specific form.
You can use any values for the data-os-group and data-os-alias attributes.
Step 4. Connect other elements using data-os-for
- Now, we need to make sure that the success and error messages for each form are correctly linked to their respective forms. To do this, use the
data-os-forattribute. Usedata-os-aliasas value fordata-os-for.
Step 5. Duplicate the form
Now you can duplicate the form. Update the data-os-group and data-os-alias attributes accordingly.
Step 6. Publish and Testing
All forms are displayed on the same page, allowing users to fill them out independently. Each form can be completed separately, and every response is saved as an individual form submission.