drupal|April 06, 2020|1 min read

Drupal - Using Field Groups for Visually Separating multiple field set (No Coding Required)

TL;DR

Install the Field Group module and configure field groups in Manage Form Display to visually separate related fields into fieldsets without coding.

Drupal - Using Field Groups for Visually Separating multiple field set (No Coding Required)

Introduction

You are having a form having multiple fields. When you render a form, all the fields renders as a separate field. You want some fields to be shown as a collection of fields visually. As a fieldset.

Field Groups module will help you here.

Guide

After installing Field Group module:

  • goto your content type.
  • Manage form display
  • You will see a button on top: Add field group
  • Click on it
  • Select Fieldset. You can chose other options as well, try setting each one of them and see the output.
  • Give a name to it.
  • You can create multiple Field groups as well.
  • Your created Field Group will be shown in Disabled section by default
  • Drag that field in active section
  • Drag the field you want into this Field Group.

See Example:

Drupal Field Group example

Now save the settings. And now see your form. It should look like below:

Drupal Field Group example

See before and after image to realize the benefit of it.

Drupal Field Group example

Related Posts

Drupal 8 - How to hide help link About text formats and text format guidelines

Drupal 8 - How to hide help link About text formats and text format guidelines

Problem In drupal textarea field, it was always a pain to see the two links…

Drupal 8 - Advanced usage of Paragraphs module - Add nested set of fields and single Add more button (No Coding Required)

Drupal 8 - Advanced usage of Paragraphs module - Add nested set of fields and single Add more button (No Coding Required)

Introduction In my previous article, I explained How to have set of fields and…

Drupal - How to add multiple form fields with a single button click (No Coding Required)

Drupal - How to add multiple form fields with a single button click (No Coding Required)

Introduction Drupal is an awesome CMS. Drupal content type form, allows you to…

Drupal 8 - How to Theme Form and its Fields with reordering fields

Drupal 8 - How to Theme Form and its Fields with reordering fields

Introduction In this post, we will see how to theme form and its fields…

Drupal 8 - How to create a Page with admin access and create its menu entry in Reports (No Coding)

Drupal 8 - How to create a Page with admin access and create its menu entry in Reports (No Coding)

Introduction I needed a report page, where I wanted to have some information…

Drupal: How to detect country and redirect to country specific website by using Cloudflare

Drupal: How to detect country and redirect to country specific website by using Cloudflare

Introduction Assume you have a drupal website and using cloudflare. You are…

Latest Posts

Deep Dive on Elasticsearch: A System Design Interview Perspective

Deep Dive on Elasticsearch: A System Design Interview Perspective

“If you’re searching, filtering, or aggregating over large volumes of semi…

Deep Dive on Apache Kafka: A System Design Interview Perspective

Deep Dive on Apache Kafka: A System Design Interview Perspective

“Kafka is not a message queue. It’s a distributed commit log that happens to be…

Deep Dive on Redis: Architecture, Data Structures, and Production Usage

Deep Dive on Redis: Architecture, Data Structures, and Production Usage

“Redis is not just a cache. It’s a data structure server that happens to be…

Deep Dive on API Gateway: A System Design Interview Perspective

Deep Dive on API Gateway: A System Design Interview Perspective

“An API Gateway is the front door to your microservices. Every request walks…

REST API Design: Pagination, Versioning, and Best Practices

REST API Design: Pagination, Versioning, and Best Practices

Every time two systems need to talk, someone has to design the contract between…

Efficient Data Modelling: A Practical Guide for Production Systems

Efficient Data Modelling: A Practical Guide for Production Systems

Most engineers learn data modelling backwards. They draw an ER diagram…