Using Field Group Module to Group Fields on your Drupal Website

Published Jun 2, 2022
Updated Sep 14, 2022
By Simon

Make Editing Content Easier for Users

I am all about making a job easier and feel that a good website should be as easy to use for people managing the content as it is for people visiting the site to find some information or to buy something.

If a Drupal site I am building has a content type that has more than 5 - 10 fields, I usually find it possible to group the fields into similar types of information. This is where the Field Group module comes in. Field Group allows you to group the data into blocks that you can add a title to and even add extra instructions if need be. Let's take a look at the basics of this module I will almost always include in my development.

Info

https://www.drupal.org/project/field_group

Actively maintained  Considered feature-complete by its maintainers. 325,000 sites use this Field Group.
Requires No extra requirements.
Libraries No library.
Permissions No permission to set, if a user has permission to access the manage form display page then they will have permission to use this module.

Install either using the UI or composer. For more on installing Drupal modules.

Basics

There are many types of groups you can use, from fieldsets that are collapsible to tabs and accordions, so plenty of ways to make your node edit forms easier to use. Field group is possibly the easiest and fastest way to achieve nicely grouped node edit forms. There are other ways which I will look at in other articles.

Once installed you can use it on any node edit form. All you need to do is click add field group on the Manage from display page. An example of the path for the Article content type is below.

Manage > Structure > Content types > Article > Manage form display
/admin/structure/types/manage/article/form-display

You can then choose one of the types of grouping and then drag the fields into the group once it is created. It's that simple.

Image
a field group shown on the manage form display page
Features for a property nicely grouped into a fieldset for easy editing.

It is also possible to add field groups on the Manage Display page to group the field on the front-end. For front-end development of content types, I usually use a template in the theme but it is good to know you have the option to use it. An example of a manage display path for the article content type is:

Manage > Structure > Content types > Article > Manage display
/admin/structure/types/manage/article/display

That's it for the Field Group module, a very handy module and definitely worth using if you want to make entering data into your or your client's website a more organised and easier task, nothing worst than a wall of input fields staring at you!

If you are interested in learning more about Drupal and front-end development and design be sure to sign up for my newsletter and get your weekly dose of design and tech goodness straight to your inbox.

Thanks for reading and until next time, enjoy the now!

 

Tags