[5] Dynamic Forms in WordPress: How I Solved the “Add Another Person” Problem

It started with what seemed like a simple need: on a WordPress site I was building, users had to enter their own contact details and optionally add one or more “recommended persons” – each with a name, phone number, and email address.

Straightforward, right? Until I realized Contact Form 7 – the plugin I’ve trusted for a decade – doesn’t natively allow dynamic field groups. Once you fill out a form, that’s it. No “Add another” button. No logic to replicate fields dynamically.

That’s when I went hunting for a better way.

The Problem

I wanted a form that would:

Collect the sender’s name and email (as personal data).
Let them add multiple recommended persons, each having:
- Name
- Phone number
- Email address
Remain fully GDPR-compliant.
Be easy to manage and export (via Flamingo).

At first, I considered a JavaScript-based solution that cloned <div> blocks when the last email field was filled in – but that quickly became messy, especially with validation, IDs, and Flamingo’s data storage.

The Discovery

The solution came with a small but powerful plugin:

Contact Form 7 – Repeatable Fields.

This plugin adds a new tag type – [repeatable] – which lets you define a group of fields that can be repeated with + / – buttons directly inside your Contact Form 7 editor.

The Implementation

Here’s what my setup looked like inside the CF7 form editor:

[repeatable group-ajanlott min:1 max:5]
  [text* ajanlott_nev placeholder "Ajánlott személy neve"]
  [tel ajanlott_tel placeholder "Ajánlott telefonszám"]
  [email ajanlott_email placeholder "Ajánlott email cím"]
[/repeatable]

Just like that, a clean “Add (+)” and “Remove (–)” button appeared.

The plugin handled the field naming, numbering, and submission logic automatically – no manual JavaScript cloning required.

And to make it visually elegant, I styled the buttons using a few lines of CSS:

/* css */

.wpcf7-field-group-add {
  background: #4f46e5;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.wpcf7-field-group-add:hover {
  background: #4338ca;
  transform: translateY(-2px);
}

.wpcf7-field-group-remove {
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
}

Simple, clean, and user-friendly.

Data Handling & GDPR

Because each “recommended person” involves third-party personal data, I made sure the form also included:

An explicit consent checkbox: “I confirm that the recommended persons have consented to sharing their data for this purpose.”

A dedicated section in the privacy policy describing how these data are handled and stored.

The Flamingo plugin safely logged all submissions, and exporting them to CSV worked flawlessly – even with multiple repeated field groups.

The Result

What started as a frustrating limitation turned into one of my favorite small discoveries in WordPress development this year.

The combination of Contact Form 7 + Repeatable Fields + Flamingo delivers a flexible, privacy-compliant solution for multi-entry forms – without writing a single line of backend code.

Sometimes, solving a problem isn’t about reinventing the wheel – it’s about finding the right plugin and shaping it to your workflow.

Final Thoughts

If your WordPress form ever needs to collect variable-length data (e.g. multiple attendees, passengers, team members, or – like in my case – recommended persons), the Contact
Form 7 – Repeatable Fields plugin is an elegant, lightweight answer.
No JavaScript headaches.
No shortcode chaos.
Just a simple “+” button that makes your form smarter.

Buy me a coffee?

If you enjoyed this story, you can buy me a coffee. You don’t have to – but it means a lot and I always turn it into a new adventure.

Buy a coffee for Steve

Who am I? Who are you reading? Who are you supporting?

Linktree

Short introduction

Steve

[5] Dynamic Forms in WordPress: How I Solved the “Add Another Person” Problem