The Group field enables users to group multiple fields together. When set to “Multiple,” users will be able to create multiple iterations of a Group field while creating entries.
Let’s consider an example to understand how the Group field works. When creating a banner, you would need a background image, some text boxes, and a link to a detail page. You can use the Group field, and include the File, Multi Line Textbox, and Link fields.
With respect to the banner scenario, after you add this field in content type, you will see it on your entry page as shown below:
Group Field Real World Scenarios
Let's understand a few real-world scenarios where we can use group fields on our website. Here, are few group field real-world use cases:
Banner/ Header of a Website
Survey using Group Field
Global Field within Group Field
Example 1: Banner/ Header of a Website
A particular section of a website which has multiple fields, can be created using the group field. A common example is the Banner/ Header page of a website. The banner section of a website uses multiple fields to display content.
Let's create a banner for a website using a group field. Follow the steps given below:
Hover on the content type that you want to edit, on the extreme right side, 'More Options' icon (three vertical dots). Click on this icon and select Edit Content Type to open the Content Type Builder page.
Click on the Group field option or drag and drop the field from the Fields list displayed at the left-hand side. Add suitable group Display Name (eg. Hero Unit) and Edit Properties accordingly. If your webpage has multiple banners then check the Multiple option checkbox.
Once added, drag and drop the following fields from the Fields list into your group field.
File: This field contains an image to be displayed on the banner.
Single Line Textbox: This field contains the title of the banner.
Multiple Line Textbox: This field contains the description.
Link: This is a call to action link.
Example 2: Survey Using Group Field
Group fields can be used to dedicate a section of your website for specific purposes, for example a Survey form. Within this field, you can incorporate all the existing fields Contentstack offers, to create your questionnaire. Apart from survey forms you can also generate an online polling system, quizzes or even a rating system.
Lets create a sample survey form using a group field. We create a Mental Health Survey Form:
Hover on the content type that you want to edit, on the extreme right side, click on 'More Options' icon (three vertical dots). Select Edit Content Type to open the Content Type Builder page.
Now, click on the group field option or drag and drop the field from the Fields list displayed at the left-hand side. Add suitable group Display Name (eg. Mental Health Survey) and Edit Properties accordingly. If you want to create multiple survey forms for your webpage then check the Multiple option checkbox.
Drag and drop the following fields from the Fields list into your group field.
Single Line Textbox: This field contains the name of the surveyee.
Number: This field contains the age details.
Date: This field can be used to collect the date of birth of the participants.
File: This field can be used to accept images or files from the participants.
Boolean: This field can be used to validate the information given, by clicking the checkbox.
Rich Text Editor: This field contains observations, responses or feedback.
We have created a sample survey page using the above fields as shown below:
Example 3: SEO Global Field Within a Group Field
Group fields can also accommodate global fields. While group fields can be iterated and used multiple times in a content type, global field adds flexibility by allowing users to globally create fields and use them across all content types of a stack.
Global fields within a group help users to fetch content from global fields within the group field of a content type.
Lets create a group field that fetches SEO content from a global field, which will help SEO executives to reuse SEO data across several web pages of their site.