Dynamically switch email recipient based on a category (Smart Forms)

Bootstrap Studio Help
1

Could somebody provide a demonstration of how I would go about changing who a form submission gets sent to based on a drop-down selection?

Thank you

2

You can do this with a bit of JavaScript.

The first step is to obtain the ids/hashes of the recipients. When you enable Smart Forms and choose a recipient, the hash will be added to the data-bss-recipient attribute like this:

image

Copy the hashes for each of the emails. Then add the following JS to your design:

const select = document.querySelector('#category-select');
const form = document.querySelector('#contact-form');

const recipientMap = {
    // Associate each category with a recipient hash. Paste the full ids here:
    support: 'abc123...',
    bug: 'ba42...',
    business: 'ef3d...'
};

select.addEventListener('change', () => {
    // When the dropdown is changed, set the recipient hash as the
    // data-bss-recipient attribute of the form
    form.dataset.bssRecipient = recipientMap[select.value] || '';
});

This code will dynamically change the form recipient depending on the chosen value in the select dropdown.

You can download a working example here: https://bootstrapstudio.io/resources/dynamic-form.bsdesign

4 Likes