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 add fields with unlimited occurence. This is how it used to happen already in drupal (Assumming you already having a content type)

• Add a new field, Example text field
• You configure it with some default value or help description text
• Now, Drupal gives you the option to have multiple fields of same type in the form.
• Under “Field Settings”, it asks for: Allowed Number of Values. You can set this to Unlimited.

Now, what this unlimited means is that when your form renders. It gives you a button which allows you to add more of this field on each click.

Now, lets take an example content type. Assume you are having a products review page. And, you would want to show multiple products. And for each product, you want to have 3 different fields:

• Name
• Description
• Link

Lets take a look how this form will look like:

Problem

Now you see, for each of multi-value field, you are seeing a separate button for “Add More”. And, what we want is to have a set of fields and expand them separately by a single button click.

The Solution

Drupal has an awesome out of the box module for this kind of problem named: Paragraphs.

Installation of Paragraphs module

Lets install this module:

composer require drupal/paragraphs

It also installs a dependency module (Entity Reference Revisions). After this command, lets enable this from modules section in drupal.

Adding a new Paragraph Type

After this, goto: /admin/structure/paragraphs_type Note, we want those three fields to be treated as a set. And, a single button for adding that set multiple times.

In paragraph types, we will create a new Paragraph Type. It is almost similar to adding a new content type and its fields.

Now, add those three fields in this paragraph type just like in a new content type. Most important, For each field in this paragraph type. Set its “Allowed Number of values” to just 1. Not unlimited.

After adding all fields, it will look like:

Edit your Content type

Now, go back to your content type and Manage fields. Assumming you don’t have any existing content for this content type.

• Delete those three fields from this content type.
• Click on Add fields
• You will see a field Paragraph, under Reference Revisions
• Give a name to this field.
• Now, important setting here that you need to set “Allowed number of values” to “Unlimited”
• In next page, it will ask you to select the paragraph type. In Paragraph Types, select your paragraph type you just created.

Finally, in your content type. You are left with:

• Title
• Body
• Paragraph

Goto your add content page

And, you can see your expected form.

Bonus

I hope you are getting the expected output. If you want your form to look more awesome. You can also install another module Field Groups. It will allow you to visibally group your set of fields. And, your form will look more real.

Summary

I hope above steps will solve your needs. I’m repeating above steps:

• Install Paragraphs module
• Add a new Paragraph type with your fields that you want as a set.
• Set their maximum allowed value as 1
• Add or edit your content type now.
• Remove your old fields, that you just added them in paragraph type.
• Add this paragraph as a field, and set maximum allowed value to be Unlimited.
• Thats it.

I hope you enjoy reading it.