This article shows you how to use the Group tool to create multiple instances of a form. We also discuss when it might be better to use an individual form instead of a Group form.
The Group tool is a time-saving feature that lets you quickly create and place copies of grouped elements on multiple pages. Grouped elements can be design settings (e.g. colour schemes), content (e.g. images), or structures (e.g. Repeaters).
- For more information, see Creating a Group.
Why use an individual form?
Let's say you've built a special landing page for a two-day event. The landing page content describes the event and includes a signup form.
You promote the event on social media. If anyone wants to attend the event, they must go to the landing page and complete a form to register. After a website visitor submits the form, they automatically receive event information.
In this scenario, an individual form is sufficient for the project's short-term objectives. The purpose of the form is to register guests, distribute information, and track the number of people who will likely attend the event. After the event, you don't need the landing page or form.
- For more information about forms, see: Adding a Contact Form.
Why use a Group form?
The value of a Group form goes beyond a single, short-term project. The Group form lets you place copies of a form on multiple pages and page locations. You can, for instance, place a copy of the form in the sidebar, in the footer, and at the top of a landing page. This time-saving feature helps you connect with website visitors by providing many opportunities to register for an event, sign up for a newsletter, provide feedback, or submit questions.
1 Creating a form
The first step is to create a form. In this example, we create a form on a blank page, which we rename Form 1.
- Drag a Section component to the page.
- Drag the Form component into the Section component.
- Enter a unique form name and click OK.
- Click SAVE.
To learn how to customise a form, see Customising a Contact Form.
2 Creating a group
Now that we have a form, the next step is to create a Group form.
- Hover the mouse on the Section component and click the Settings icon.
- Scroll down the window and click the Advanced tab.
- Scroll down the Advanced window and check the box next to Save as Group.
- Enter a unique name for the group and click OK. The popup closes.
- To confirm the group, click the Groups menu tab on the left side of the screen. The new group appears in the list. Click Save at the top of the page.
3 Creating an instance of the group
Up to this point, we have created a group that contains a form. The group is called My Form.
The next step is to place a copy (or instance) of that group on a different page. In this example, we place My Form on a blank page called Form 2.
- Open the new page and click the Groups menu tab.
- Drag the group onto the page.
- To test the form, click Save and then Preview at the top of the page.
- A browser tab opens and displays the form. The form on this page (Form 2) is a duplicate of the form on the original page (Form 1).
4 Editing the group
When you edit a group, you have two choices:
- make changes to the group on one web page (local editing)
- make changes to every instance of the group on all pages (global editing)
To edit a group, hover the mouse over the group and click the Edit icon. A popup displays.
To edit the group on a single page, click EDIT LOCALLY. Click EDIT GLOBALLY to change every instance of this group.
Example of local changes
The image below shows the original Group form on page Form 2. We edited the group locally:
- changed First Name to First Name (or Given Name)
- changed Phone Number to Mobile Phone Number
- The form fields on page Form 1 remain unchanged.
Example of changes to all occurrences
If you click the Edit icon and select EDIT GLOBALLY, the changes appear on all instances of the group. The image below shows changes to the group on page Form 1:
- We added a translation to the Description fields to a language based on locale. The group on page Form 2 automatically adds those changes.
5 Viewing submissions
Sinorbis collects form submission data on a different page. Click here to learn how to read form submission data.
Comments
0 comments
Please sign in to leave a comment.