How to Limit Event Sign-Ups and Show Spots Left in Formidable Forms

Ever hosted an event where way too many people signed up for one day and not enough for the others? 🙃 I recently had a client ask for a solution to that exact problem. After running into a few challenges (and spending more time than I expected figuring it all out), I thought — why not share what I learned? This setup can save you time and maybe even a headache or two!

Good news: Formidable Forms Pro (affiliate link) makes it pretty easy to keep sign-ups under control. With a little creativity (and a pinch of JavaScript), you can:

• Limit how many people can register per day
• Show everyone how many spots are left (so they aren’t left guessing)
• Automatically hide full dates, so no one accidentally overbooks

In this post, I’ll walk you through the exact setup I used to manage a two-day event with 20 participant slots per day. You can totally adapt it for more dates, different capacities, or even volunteer shifts.

---

Step 1: Build Your Form (the fun part)

Start with the basics — your registration form. Add the usual fields: name, email, maybe some lunch preferences 🍱.

The key piece? Add a radio button (or dropdown) where folks can choose their event date — something like:

That’s the field we’ll use to track and limit registrations for each day.

---

Step 2: Show Everyone How Many Spots Are Left (in real-time!)

It’s always helpful to let people know how many spots are still open. That way, they can pick a day that works for them — or hustle to grab one of the last slots!

Formidable has some handy shortcodes that make this easy:

<strong>Spots left on June 27th:</strong> 
<span style="font-size: 1.5em;">
  [frm-math]20 - [frm-stats id=YOUR_DATE_FIELD_KEY type=count value="June 27th"][/frm-math]
</span>

What’s going on here?

• 20 is the max number of participants for the day.
• [frm-stats] counts how many people have signed up for that specific date.
• [frm-math] does the subtraction.

This goes in an HTML block:

Repeat this for June 28th or any other dates you’ve got.

---

Step 3: Actually Limit the Sign-Ups (because no one wants 25 people showing up to a 20-person event)

It’s one thing to show how many spots are left, but you also need to enforce those limits — so no one sneaks in after a day is full. 😅

Here’s how I set it up:

🛠 Add Hidden Fields to Track Remaining Spots

Even though [frm-stats] and [frm-math] handle the counting and math, you still need hidden fields to store the results so that conditional logic can work.

For each day:

For June 27th:

20 - [frm-stats id=YOUR_DATE_FIELD_KEY type=count value="June 27th"]

For June 28th:

20 - [frm-stats id=YOUR_DATE_FIELD_KEY type=count value="June 28th"]

🛠 Use Conditional Logic to Stop Sign-Ups When Full

Once those hidden fields are calculating remaining spots, you can set up conditional logic in other fields (like HTML messages or the submit button) to control what users see or can do.

For example:

• Add an HTML field that says:

<strong>June 27th is full. Please select another date.</strong>

• Use conditional logic:
  • Show this message if:
    June 27th Remaining Spots = 0

---

🛠 Option: Hide the Submit Button (or the Whole Form)

If you want to shut down sign-ups entirely when a date (or all dates) are full:

• Click on the submit button (or the form section).
• Use conditional logic:
  • Hide if:
    • Remaining spots for June 27th = 0
    • AND
    • Remaining spots for June 28th = 0

This way, the form automatically closes when everything’s full.

Step 4: Make Full Dates Disappear (with a little JavaScript magic ✨)

Here’s the thing: Formidable Forms doesn’t let you hide individual radio options with its built-in logic. You can hide the whole field — but not just one date.

Enter JavaScript. 🧙‍♂️

Here’s a quick script that removes the full dates from your form automatically:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const june27Spots = parseInt(document.querySelector('[name="item_meta[FIELD_ID_27]"]').value);
  const june28Spots = parseInt(document.querySelector('[name="item_meta[FIELD_ID_28]"]').value);

  const dayOptions = document.querySelectorAll('[name="item_meta[DATE_FIELD_ID]"]');
  
  dayOptions.forEach(option => {
    if (option.value === "June 27th" && june27Spots <= 0) {
      option.closest('label').style.display = 'none';
    }
    if (option.value === "June 28th" && june28Spots <= 0) {
      option.closest('label').style.display = 'none';
    }
  });
});
</script>

Just replace:

• FIELD_ID_27 / FIELD_ID_28 with the hidden field IDs that hold remaining spots for each day.
• DATE_FIELD_ID with the name attribute of your date choice field (usually something like item_meta[123]).

When someone views the form, any full dates vanish, leaving only the available ones.

---

Step 5: Be Nice and Show a “Date Full” Message

If someone’s favorite date is full, give them a heads-up! Add an HTML field like this:

<strong>June 27th is full. Please select another date.</strong>

Then, use conditional logic to show it only if the spots for June 27th are gone.

You can even add a “Both dates are full” message and offer a waitlist or contact option. It’s all about making the process clear and easy for everyone.

Wrapping It Up:

With a mix of Formidable’s shortcodes, hidden fields, conditional logic, and a sprinkle of JavaScript, you can build a form that:

• Limits sign-ups by date
• Shows how many spots are left
• Hides full dates automatically
• Keeps your event running smoothly

I used this setup for a two-day event, but it works for all kinds of situations — workshops, volunteer shifts, training sessions, you name it.

Need help setting up forms on your WordPress site? Whether it’s event registrations, custom forms, or something more complex, I’m here to help! Get in touch here and let’s talk about what you need.