Select membership dropdown in signup forms

How to set up membership dropdown within your signup form for members to choose a membership.

About this article:

• Difficulty level: Easy

• Technical background needed: Intermediate - need to know basic javascript

• Estimated time required to complete: 5-10 mins

What and Why?

This article explains how to set up membership dropdown within your signup form for members to choose a membership. Previously, you would have created a page with buttons to display your memberships. Now you can skip that and display the options right within your signup form. This lowers user friction and creates a more seamless experience for your members choosing memberships.

An example can be seen here.

You can clone this Webflow project here.

How?

You will need to add a select field within your signup form. This new select field does not need to be added to Memberstack as a custom field but does need to have a unique ID assigned to it.

Add an option for each membership you want your members to sign up for. In this example, there are only 2 memberships; Membership A (Free) and Membership B (Paid). For each of the options, I have assigned the membership ID as the value. The custom JavaScript adds the value to our selectMembership function to change what membership Memberstack will use when the form is submitted.

Here is the basic custom signup form HTML with all the extra stuff removed:

<form data-ms-form="signup">

<label>Name</label>
<input type="text" data-ms-member="name">

<label>Email Address</label>
<input type="email" data-ms-member="email">

<label>Password</label>
<input type="password" data-ms-member="password">

<label>Select a Membership</label>
<select id="membership-select" required>
<option value="">Select one...</option>
<option value="5fd2b456097b770004e4d45c">Membership A (Free)</option>
<option value="5fd2b83382e4bd0004fe94f7">Membership B (Paid)</option>
</select>

<input type="submit" value="Submit">

</form>

The custom JavaScript used above the </body> tag on the page of the signup form:

const membershipSelect = document.querySelector(`[id="membership-select"]`);

membershipSelect.addEventListener(`change`, (e) => {
const select = e.target;
const value = select.value;
const desc = select.selectedOptions[0].text;
console.log("option desc " + desc + " option value " + value);
MemberStack.selectMembership(value);
});

Keywords: memberships, options, dropdown, select, field, unique, id