Skip to main content
Solved

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


Forum|alt.badge.img

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.

Best answer by Taylor Tarpley

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

6 replies

Taylor Tarpley
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 2148 replies
  • Answer
  • July 29, 2024

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


  • Contributor II
  • 4 replies
  • September 4, 2024

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

 


  • Contributor II
  • 4 replies
  • September 10, 2024

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

 


  • Contributor I
  • 2 replies
  • December 11, 2024

Hi,

Has anyone found the solution to this problem?

Thanks


talhahussain
Problem Solver IV
Forum|alt.badge.img+8
  • Problem Solver IV
  • 76 replies
  • December 11, 2024
  • 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.


  • Contributor I
  • 2 replies
  • December 11, 2024
talhahussain wrote:
  • 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.