Dynamic, non-text custom fields with Webflow

Is there a way to get non-text fields (multi-select drop-downs, radio buttons, check boxes, etc) from Webflow into MemberStack? Assuming the answer is yes, is there also a way to get custom forms in Webflow to prepopulate based on stored user data in Memberstack? Specifically, once a new user enters their preferences in a custom form on Webflow, I want to store that data. When the user returns at a later time, I’d like to display those choices and allow the user to change their selections on the Webflow site and sync the latest data to Memberstack.

2 Likes

Hello!

You’ll need a bit of custom code to make that work right now :sweat:

We do have plans of making MemberStack smarter though when it comes to non-text fields.

For now, you could use our JS hook to grab the field value and use JS to populate it to a non-text input. Do you know a bit of JS?

If not, I am sure we can find you some example code :slightly_smiling_face:

1 Like

Unfortunately, I am not familiar with JS. I would very much appreciate some sample code.

1 Like

Hey @grove80904! Community members can help others with code if they choose, but your best bet is to hire a developer to help with this. It’s a relatively simple task, so I don’t imagine it would cost too much.

If you need help finding a developer, just let me know. (DM is fine).

Thanks!

Thanks @belltyler & @DuncanHamra !

I’m already working with a developer and that’s what led me to post this topic. The developer said that my use case was not possible with Webflow and MemberStack. It seemed odd that a premium tool like MemberStack wouldn’t allow me to store a user’s preferences in anything besides simple text, but it sounds like it might be harder than I thought. I want to collect user data via a form with custom fields (multiselect dropdowns, radio buttons, check boxes, etc), store it and allow the user to later view/edit/delete that same data. An example of this form could look like the attached screenshot.


For now, the developer is trying another alternative…using Drupal to store and access the data. I’d prefer to avoid adding another tool to the architecture though.

@belltyler, my developer said that he thought of your suggested JS solution early on, but he also said it’s “not possible for storing the data in collections.” Additionally, he said that we can only use the custom form to collect the data when the user registers. To update the values in the future would depend on the user’s default profile page. However, the user’s default profile page doesn’t allow any fields besides simple text. This is all over my head, so any hints that I could share with him would be helpful!

1 Like

This is definitely possible right now. My site uses both text inputs and select elements to collect information immediately after creating an account, populating the user’s profile page with that same information, and allowing the user to make changes to the information on the profile page. All of this is information is stored in fields by MemberStack.

Here is some discussion about using select inputs and one way you may implement it: https://forum.memberstack.io/t/ms-data-on-select-field.

Adding checkboxes should be a pretty simple extension of the same concept. A major difference with checkboxes is that each checkbox would need its own Memberstack field, which could get unwieldy with a large amount of checkboxes. However, the developer should be able to convert the values of the checked boxes to a string, for example, and save the string in one MemberStack field.

I do not use WebFlow, so others may have thoughts about the developers’ comment about not being able to store the data in collections.

1 Like

Hi Scott, the problem here is with number of checkbox’s (Towns):

  • Once the data is captured through this form (search criteria) , we will be sending this info to some other third-party application for further processing.
  • The user should be able to update/modify his search criteria whenever he wants
  • We cannot show two different form formats for user to enter/update the search criteria
  • The basic profile update page is just not good enough as I cannot validate the values they enter there
1 Like

I’m pretty sure I understand. I’m thinking on the fly here, so please bear with me. This is just the first thing that comes to mind.

Why not use a single Memberstack field called SelectedCitiesMS? You could associate SelectedCitiesMS with a hidden text input that is not visible to the user. This hidden text input is what is passed from/to MemberStack using ms-data (to receive the MemberStack data) and ms-field (to update the MemberStack data).

You could add an onclick event to each City checkbox that executes a JavaScript function that either adds or removes that city to a string (or array) and then changes the hidden text input to the updated string (or array contents). This changed hidden text would be sent to MemberStack on form submission. At the same time, the checked boxes could be sent as part of your search criteria to whatever third-party application you wish. The checkboxes and the SelectedCitiesMS data would always be synchronized when you submit the form.

When the user wants to update his search criteria later, you can execute a simple JavaScript function that receives the SelectedCitiesMS data from MemberStack, separates the data into the respective cities using basic parsing, and checks those cities’ respective checkboxes.

This solution has no negative effect on your first three bullet points because the checkbox data can still be sent to another third party using the form, the user will always be able to update the search criteria, and the user will see nothing more than the checkboxes (during initial input of the search criteria and during any update of the search criteria).

Alternatively, you could use MemberStack’s metadata feature to save/update the selections of the checkboxes, but I would stick with the fields.

1 Like

Hi @grove80904! Thanks for sharing the pictures. @kothinti you’re 100% correct about the number of checkboxes causing problems here. There’s just too much to easily manage with MemberStack right now. Instead, I recommend storing that information using our front-end api. https://help.memberstack.io/post/front-end-api

You’ll need to use a bit of JS to store/retrieve the values, and then use a bit of JS to check the appropriate boxes but you don’t need to worry about creating 100’s of fields in MemberStack :+1:

Hi @DuncanHamra, thank you so much for the recommendation. I didn’t know about this API option and gonna try now. Thank you!

1 Like

Hi @DuncanHamra, JS API option is wonderful. Now I am able to save/update the metadata through Webflow form. Now I would like to know is there a way to export the members data including meta info? I appreciate your suggestions. Thank you!

1 Like

@belltyler what’s the best way to get at a member’s metadata?

You can export a CSV file from the members page but the CSV doesn’t contain member metadata :neutral_face:

Right now there is no programatic way to export members metadata through our dashboard or an API. I definitely see this being super useful though!

Can you describe a bit about your use case? That will help us determine what to build as far as exporting metadata goes!

1 Like

Hi @belltyler, I just want that data to be part of exportable CSV :slight_smile: and it would be useful if you can make that data available with Zapier.

The use case is allowing a user to enter and save data that is specific to them. For example, data from a set of non-text fields (multi-select, check-boxes, radio buttons, etc) on a form that could be search criteria or preferences or subscriptions or product categories/types or anything that isn’t derived from a simple text field. Once that data is captured in Memberstack, exporting that data to a back-end system for further processing, record-keeping, programmatically creating custom packages, or creating a custom summary…etc. Without the ability to push or pull data to/from a back-end that contains other databases, proprietary systems and/or more flexible code, the usability of Memberstack is severely limited in scope. Also, the user would need the ability to view their previous entries and edit or delete them.