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

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Most developers use Claude Code like a search engine — ask a question, get an…

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Every office lobby has the same problem: a visitor walks in, nobody’s at the…

Server Security Best Practices — Complete Hardening Guide for Production Systems

Server Security Best Practices — Complete Hardening Guide for Production Systems

Every breach post-mortem tells the same story: an unpatched service, a…

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

If you’re a Senior Engineer (L5) preparing for Staff (L6+) roles at MAANG…

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF have been in the OWASP Top 10 for over a decade. They’re among the…

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

The OWASP Top 10 is the industry standard for web application security risks. If…