Make forms conditional, smart forms#122

Duplicate of https://features.wpamelia.com/653

Definitely. This feature alone would take Amelia to the next level. Being able to customize a service and the price based on inputs and the form ‘path’ the user chooses would be game-changing! Without this my current process is often Amelia -> Redirect to Web Form / Email with link to form (with conditionals) to capture info for a service.

This would make Amelia so much more intuitive. Some of my services require an additional address and an additional date - it would be nice if those fields popped up only for those services.

I agree - this would be a big win and solve some pain points I am currently facing.

Would be super helpful!

up

This feature is tooo important. And it should be available in the plugin.

This feature is absolutely critical for packages with variations…Otherwise create 10 separate packages due to price variation or membership type…this can easily be done in 1 package with use of conditional fields.

This topic started 3 years ago but still we don’t have conditional form fields in Amelia Booking???

A client hired me to fix some stuff on his web, and asked me to do some consitionals on its amelia booking.

With some JS I managed to so something like this…

I havent test it fully, but i think it could work for any field as long as you set the conditionals properly.

This code basically scans the form to look for inputs, in this case is the dropdowns specified by class. I think it can be done for checks and inputs.
It also scans everytime the form updates (steps; Information, times,etc)

After this it will scan the “options” within your first dropdown.
when selected an option in the first Dropdown it will pair it to the index of the second dropdown options.

And from then on it hides or shows the next options/dropdowns, input, ect… depending on what you’ve seclected

So its very important for you to set up the right order on the input fields, dropdowns and checks.

///////////Again this only works for 2 dropdowns as it is, if you want to use it for other input fields it would have to be twiked a bit. For this to work you would also have to change the options and index to your needs and then simply place it in your “footer” to be sure it loads after your form/////

Hope it helps, and sorry if im not explaining myself properly as im not an eglish native speaker. Good luck!

// JavaScript Code Example: Dynamic Filtering of Dropdown Options Based on Another Dropdown Selection

// Description:
// This script dynamically updates the options available in a secondary dropdown based on the user selection in a primary dropdown.
// It’s designed for forms with dropdown options displayed in a popup, requiring specific options to be shown or hidden conditionally.

document.addEventListener(“DOMContentLoaded”, function () console.log(“DOM content loaded”);

// Map of secondary dropdown options based on primary dropdown selection
var optionsMap = {
    "Option1": [0, 1, 2], 
    "Option2": [3, 4, 5, 6],
    "Option3": [7, 8],
    "Option4": [9, 10, 11, 12],
    "NoOptions": [] // Example key with no options to show in the secondary dropdown
};

// Mutation observer to monitor changes in the DOM
var observer = new MutationObserver(function (mutationsList) {
    mutationsList.forEach(function (mutation) {
        var dropdowns = document.querySelectorAll('.el-select__popper');  // Identify visible dropdowns

        // Check if dropdowns are present in the DOM
        if (dropdowns.length > 0) {
            dropdowns.forEach(function (dropdown, dropdownIndex) {
                // Check the options within the primary dropdown
                var primaryOptions = dropdown.querySelectorAll('.el-select-dropdown__item.am-select-option');
                if (primaryOptions.length > 0) {
                    primaryOptions.forEach(function (option, index) {
                        option.addEventListener('click', function () {
                            var selectedOptionText = option.textContent.trim();
                            console.log("Selected option:", selectedOptionText, "at index:", index);

                            // If the selected option matches a key in the optionsMap
                            if (optionsMap[selectedOptionText]) {
                                console.log("You selected '" + selectedOptionText + "', applying changes in the secondary dropdown.");

                                // Show only the options corresponding to the primary dropdown selection
                                setTimeout(function () {
                                    var secondaryDropdown = document.querySelectorAll('.el-select__popper')[1]; // Assumes the secondary dropdown follows in the DOM

                                    if (secondaryDropdown) {
                                        var secondaryOptions = secondaryDropdown.querySelectorAll('.el-select-dropdown__item.am-select-option');

                                        if (secondaryOptions.length > 0) {
                                            // Hide all options in the secondary dropdown
                                            secondaryOptions.forEach(function (secondaryOption, secondaryIndex) {
                                                secondaryOption.style.display = 'none';
                                            });

                                            // Display only the options corresponding to the selected primary dropdown option
                                            optionsMap[selectedOptionText].forEach(function (indexToShow) {
                                                if (secondaryOptions[indexToShow]) {
                                                    secondaryOptions[indexToShow].style.display = 'block';
                                                }
                                            });

                                            console.log("Secondary dropdown options updated.");
                                        }
                                    }
                                }, 300); // Small delay to ensure the dropdown is available
                            }
                        });
                    });
                }
            });
        }
    });
});

// Observer configuration
observer.observe(document.body, { childList: true, subtree: true });

});

This would be very helpful. Many other forms have this as a standard feature. If we could show/hide questions based on any radio/dropdown/multiselect option that would make a huge impact.

It would be nice if this functionality could also handle adding fields for name and email for each ticket sold in a bulk order.

Dear all,

(Sorry but this is still not the notification that the feature has been delivered) 🥲

Many of you wanted to hear more regular and summarized feedback about what we are working on. That makes total sense, and we hear you!

We have prepared a post summarizing our work from the past year and current developments:

https://wpamelia.com/year-2024-in-review/

We plan to make our communication with you more regular. Post + newsletter + a small notification in the plugin itself seem appropriate, but let us know if you prefer a different channel.

Also, we are looking for volunteers to help us in some areas (more information in the post).

Thank you, and hope you like it,

Alexander