Pre-built Modals

This article covers all things related to pre-built modals, those popup windows that you can use as an alternative to custom Webflow components. I'll show you Memberstack's modal options plus customization features, like how to reorder input fields, hide inputs, and tweak the design.

BTW  I recommend using the custom Webflow components over modals if you need to:

• maximize design control of your UI
• translate your UI out of English
• display different fields in signup vs profile
• use field types other than plain text (e.g. checkbox, radio, select, etc.).

Modal Options

Memberstack offers four modal options.

Reset modal

Also known as the Forgot Password modal, this one helps customers change their account password. The customer enters their email address into the field and then copies and pastes a six-digit code which Memberstack automatically sends to their email account.

Signup modal

This modal helps customers create a new account. Customers enter email and password credentials or signup with an auth provider. 

Login modal

The customer logs in to an existing account by entering their email and password here.

Profile modal

Available when a customer is logged in, this modal lets users update account information (e.g. email address and password).

Adding Custom Attributes

If you decide to use modals (instead of custom Memberstack components), then you'll need to add custom attributes to your Webflow buttons.

1. Log in to your Webflow account and open a project.
2. Open a page and select a button.
3. Click the gear icon at the top of the page to open the Button settings.
4. Expand the Custom attributes folder and then enter the correct values. (see below)
5. Click Publish to save.

Values

Enter these custom attributes to enable a Memberstack modal.

• Sign up - data-ms-modal="signup"
• Login - data-ms-modal="login"
• Profile - data-ms-modal="profile"
• Forgot Password - data-ms-modal="forgot-password"

Pairing attributes

It's possible to combine two custom attributes on a single button. You can, for instance, pair data-ms-price:update="PRICE_ID" with the modal attribute.

Once a visitor signs up for a new account, Memberstack automatically sends them to the Stripe checkout where they can pay for the plan.

Actions

Instead of custom attributes, you can add action triggers to a button.

• Stripe customer portal - data-ms-action="customer-portal"

This action doesn't open a modal. Instead, the button redirects the user to their Stripe customer portal.

• Log out - data-ms-action="logout"

Reorder Inputs

Change the order of fields on two pre-built modals: Profile and Signup.

1. Log in to your Memberstack account and click Members on the side menu.
2. Go to the top of the page and click Custom Fields.
3. Go to the bottom of the panel and click Pre-built UI Settings.
4. Click any six-dot icon and drag the field to change its order.

• Memberstack auto-saves the changes to both modals.

Hide Inputs

Hide fields on two pre-built modals: Profile and Signup.

1. Log in to your Memberstack account and click Members on the side menu.
2. Go to the top of the page and click Custom Fields.
3. Go to the bottom of the panel and click Pre-built UI Settings.
4. Click the eye icon to hide a field.

• Click the eye icon again to make the field visible on the modals.

Logo And Button Color

Customize the logo and button color on all pre-built modals.

1. Log in to your Memberstack account and click Settings on the side menu.
2. Click Design.

To change the logo, click Replace Image, locate a file (JPG or PNG) on your device, and then upload the image.

To change the button color, click the Primary Color button, select a color (HEX), and then click Save. Memberstack automatically updates the modal design.

That's it.

Now you know how everything about Memberstack's pre-built modals.