Select Inputs (a.k.a. Dropdown Fields)

Article author
Duncan Hamra
  • Updated

This article shows you how to use Memberstack with the native select input. If you want additional design control, create your own select UI using multiple checkboxes

Adding a Component

The first step is to add a Select input in Webflow. You can do this manually in Webflow, or copy a pre-configured element in Memberstack. 

  1. Go to your Memberstack dashboard.
  2. Select Components on the side menu.
  3. Click Unstyled.

a-2.png

  1. Scroll down the page and click the Select component.
  2. Copy the component.

a-3.png

  1. Paste the component into a Webflow Signup or Profile page.

a-4.png

Customizing Component Settings

  1. Select the component in Webflow.
  2. Click the gear icon (in the top right corner of the page).
  3. Expand the Custom Attributes folder.

Replace the default value with a Memberstack field ID that matches the purpose of this drop-down menu.

a-6.png

To see a list of field ID options:

  1. Go to your Memberstack dashboard.
  2. Click Members on the side menu.
  3. Click the Custom Fields button.
  4. Scroll down the list to review the options.
  5. Click a pencil icon.

a-7.png

  1. In the popup window, click the icon to copy the ID.

a-8.png

  1. Go back to the Webflow page and paste the ID into the Value field.

a-9.png

Adding Menu Options

The final step is adding custom text to the drop-down menu.

  1. Expand the Select Field settings folder.
  2. Go to the First choice line and click the pencil icon.
  3. Add a custom value to the Text field.
  4. Do not change the Value field. 
  5. Repeat the steps for the other choices.
  6. Optionally, click the plus (+) sign to add more choices.
  7. Click Publish to save.

a-10.png

 

That's it.

Now you know how to add a custom drop-down menu to a Signup or Profile page.

 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.