Managing Workshop Capacities with WPForms: A Simple Solution

If you’ve ever organized a workshop, you know keeping track of attendee limits can be tricky. For those using WPForms on their WordPress site, managing these numbers can become much simpler with some tweaking. We solved this challenge using PHP and JavaScript, ensuring that no workshop gets overbooked.

The Problem

Our goal was to prevent overbooking workshops scheduled for April 15 and 16, 2025. Each session had a strict capacity: 100 attendees for the first day of the Workshop and 30 for the second day. We also offered a combined ticket option, which needed to be disabled if either of the individual sessions reached its limit.

The Tools

• WPForms: This popular form plugin for WordPress was already handling our registration process (we include this in our WordPress Managed Hosting)
• PHP and MySQL: We used these technologies to interact with the WordPress database, where submission data is stored.
• CSS and JavaScript: These were used for real-time updates on the form, ensuring users saw the most current information.

The Solution

First, we wrote a PHP function to query the database and count the submissions for each workshop. This function checked if the count met the capacity limit and then updated the form display using CSS to hide overbooked options.

Here’s a simplified outline of our approach:

1. Count Submissions: Our PHP script fetched the number of submissions for each workshop directly from the database.
2. Update Form Display: If a workshop reached its capacity, our script dynamically updated the form, hiding the full option using CSS.
3. JavaScript for Dynamic Interaction: To enhance user experience, we added JavaScript that disabled the form options in real time, providing immediate feedback right on the form, like marking an option as ‘Full’ when its limit was reached.

Why This Works

This method ensures that the form’s display is always up to date, preventing any more sign-ups once a workshop is full. Using both CSS and JavaScript, we created a fail-safe mechanism: CSS serves as a reliable fallback if JavaScript fails or is disabled in the user’s browser, while JavaScript offers a more interactive and responsive experience.

Keep In Mind

A single field ID identifies our multiple-choice question, and we match the specific choice value with the submissions. These values are hardcoded, so if any changes are made to these options in the WPForms interface, they must be updated in our code to keep everything working correctly.

By integrating these simple tweaks, managing workshop capacities became more efficient, ensuring a great experience for the organizers and the attendees. This is just one example of how a little bit of code can make a big difference in event management!

function wpf_custom_css_for_form_limits() {
    $counts = get_form_submissions_count_by_value();
    $limits = [
        'April 15, 2025 - Workshop ($50)' => 1,
        'April 16, 2025 - Workshop ($40)' => 30
    ];

    $styles = '<style>';
    $scripts = '<script>';

    foreach ($counts as $count) {
        if (array_key_exists($count['value'], $limits) && $count['count'] >= $limits[$count['value']]) {
            $choice_class = '';
            switch ($count['value']) {
                case 'April 15, 2025 - Workshop ($50)':
                    $choice_class = 'choice-1';
                    break;
                case 'April 16, 2025 - Workshop ($40)':
                    $choice_class = 'choice-2';
                    break;
            }

            if ($choice_class) {
                $styles .= "li.$choice_class { display: none; }";
                $scripts .= "document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('li.$choice_class input'); if(element) { element.disabled = true; element.parentElement.insertAdjacentHTML('beforeend', ' (Full)'); } });";
            }
        }
    }

    // Disable both option if either event is full
    if ($counts[0]['count'] >= $limits['April 15, 2025 - Workshop ($50)'] || $counts[1]['count'] >= $limits['April 16, 2025 - Workshop ($40)']) {
        $styles .= "li.choice-3 { display: none; }";
        $scripts .= "document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('li.choice-3 input'); if(element) { element.disabled = true; element.parentElement.insertAdjacentHTML('beforeend', ' (Not available due to one session being full)'); } });";
    }

    $styles .= '</style>';
    $scripts .= '</script>';

    echo $styles;
    echo $scripts;
}
add_action('wp_head', 'wpf_custom_css_for_form_limits');