How to allow entering a different answer on a dropdown menu?

Hi there,

We’re using a Klaviyo sign up form on our landing page, with multiple dropdown fields. We noticed that once an option is selected in the dropdown menu, it doesn’t allow users to select a different option anymore in case the user changes their mind or makes a mistake. If we click on the dropdown again, it only shows the option already selected (screenshot below). The only way to go back to all the options is if the original answer is deleted manually — not all users know to do this and it just makes for a confusing user experience.

Is there any way we can just make all the options visible upon clicking regardless if an option is already selected or not? We are following a strict layout and there are a lot of options in some of the fields so I’m afraid a radio buttons are not preferred.

Page 1 / 1

Hi there @Izzy,

Happy to help!

Do you mind sharing the URL of this page the form is on so I can test and investigate myself? Is this an out-of the-box Klaviyo form or a custom form in any way?

Thanks for participating in the Community!

-Taylor

Hi @Taylor Tarpley

Just wondering if there was a solution for this?

I’ve recently set up an embedded sign up form with a drop down field and have encountered the same user experience issue as @Izzy.

Thank you,

Kat

Hi @Taylor Tarpley

This is an out-of-the-box Klaviyo form, you can check out the drop down field here: https://iomerino.com/blogs/community/competition-big-spring-giveaway

Thanks

Kat

Hi,

Has anyone found the solution to this problem?

Thanks

To fix the dropdown issue on your Klaviyo form:
Add JavaScript to Reset Dropdown:

Copy code

document.addEventListener('DOMContentLoaded', function() { const dropdowns = document.querySelectorAll('select'); dropdowns.forEach(dropdown => { dropdown.addEventListener('click', function() { this.selectedIndex = -1; }); }); });

This allows users to click the dropdown again and see all options.
Check Dropdown Configuration: Ensure the dropdown doesn’t have the multiple attribute set unless needed and has a placeholder or default empty value.
Add a Reset Button (Optional):
Copy code

<button type="button" onclick="document.getElementById('dropdown-id').selectedIndex = 0;">Clear</button>

This gives users a quick way to reset the dropdown.

To fix the dropdown issue on your Klaviyo form:
Add JavaScript to Reset Dropdown:

Copy code

document.addEventListener('DOMContentLoaded', function() { const dropdowns = document.querySelectorAll('select'); dropdowns.forEach(dropdown => { dropdown.addEventListener('click', function() { this.selectedIndex = -1; }); }); });

This allows users to click the dropdown again and see all options.
Check Dropdown Configuration: Ensure the dropdown doesn’t have the multiple attribute set unless needed and has a placeholder or default empty value.
Add a Reset Button (Optional):
Copy code

<button type="button" onclick="document.getElementById('dropdown-id').selectedIndex = 0;">Clear</button>

This gives users a quick way to reset the dropdown.

It doesn't seem to work, I added the code before and after the div containing the form but it doesn't work.

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded