How to populate large dropdown menus (100+ items) in a multi-step Webflow form using Memberstack JSON storage? Answered

Post author
Stephen Essex

Hi all. I'm brand new to Memberstack and am currently assessing it for a large Webflow project. Our profile sign up would be a multistep (about 5 steps) with about 10 - 15 questions in each which I know is possible, but my main concern is that some of the questions would have a field-dropdown of - in some instances - 100 plus items (due to locations drop-downs and work type drop-downs). Therefore I'd like to know where does the content for the field-drop downs reside? On Memberstack or Webflow CMS's (which if the latter would make the project near impossible)?

Comments

10 comments

  • Comment author
    Hugh Laverty

    Dropdown fields would normally live in Webflow, but not in the CMS - instead they're a 'Select' form element.

    For super complex signup flows, I recommend capturing the basics first (name, email, pass, cell etc), and then redirecting members to a Typeform or Reform to complete the remainder of their profile. That way you get conditional logic support too, which is super helpful.

    0
  • Comment author
    Heather B

    Please has anyone managed to make a country dropdown that updates a city dropdown. Eg if the user selects USA, the city dropdown only has us cities?

    0
  • Comment author
    Raquel Lopez

    I have, but is not a solution that short to just share a small snippet. It has to definitely done using javascript. Depends on what cities you want to add support.

    The feature is called dependent dropdowns, so you can ask chatGPT to help you out. Here's a codepen I found that you can use as a base.

    The html part you can create it with Webflow elements. The css part is up to you and how you want to style the select elements. And the js part is the code that needs to be adjusted.
    Let me know if you still have any doubts 🙂

    0
  • Comment author
    Heather B

    Hi Raquel, thank you for your help Raquel. I am able to get it working with the snippet and chatgpt. I'm trying to support loads of cities though - when you have such long code (that exceeds webflows character limit), do you know where I could 'host' the code please?

    0
  • Comment author
    Andrew Vincello

    Hello, when I onboard a new member they have a dropdown multi-select input in a webflow form that populates a member’s JSON, ex.:

    {
    "service-locations": [
    "Marine Corps Base Camp Pendleton",
    "Marine Corps Air Station Miramar",
    "Naval Base San Diego"
    ]
    }

    I am using JSON for storage because there can be up to ~200 locations. I would like to allow them to edit there selection on there profile page, but am unsure how to populate the dropdown from the JSON. Is there a ms-attribute I can use to populate the dropdown like there is with the custom fields?

    For reference, the onboarding dropdown uses a modified MS #109 script, which populates the options from a js file and sets limits on number of options selected:
    https://dcz8dv.csb.app/select_base/location_select.js

    0
  • Comment author
    Raquel Lopez

    I'm not sure I understand... you want to populate the value of the multi select from the MemberJson?

    0
  • Comment author
    Andrew Vincello

    Yep, but actually just figured it out! I adapted the code above to pull from window.$memberstackDom.getMemberJSON() to populate the input.

    0
  • Comment author
    Raquel Lopez

    Yup, that's it 🥳

    0
  • Comment author
    Andrew Vincello

    Can I manually update a member’s profile photo for them? Or is there an API call for that? I have ~45 members I just imported and am trying to update their photos.

    0
  • Comment author
    Chukwudi Onyekwere

    Hi Andrew,

    Currently, it is not possible to manually update a member’s profile photo on their behalf, and we do not have an API call available for that functionality at the moment.
    However, this request has already been added to our wishlist. You can upvote or leave a comment on it.

    0

Please sign in to leave a comment.