Skip to main content

Lesson 7 of 7 · 1:18 · Beginner · Webflow

Give members a profile page

Open Memberstack’s profile modal from any button so members can manage their account.

Where this fits

Your site now knows members from visitors. The last piece every membership site needs is a way for members to manage their account.

By the end of this lesson you can

  • Make any button open the Memberstack profile modal with the Webflow app
  • Let members change their details, upload a picture, update email and password, and log out

Heads up: Custom profile forms are possible but not shown here. They need three separate forms: one for email, one for password and one for custom fields.

Lesson notes

How it works

What the Memberstack profile modal gives your members

Every membership site needs a place where members manage their own account. Memberstack ships one ready-made: the profile modal. Add data-ms-modal="profile" to any button or link, and clicking it opens a window where a logged-in member can update their details and custom fields, upload a profile picture, change their email and password under security, see and remove their plans, and log out.

You don't design it or keep it up to date. Memberstack builds and runs it, and saves every change straight to the member's record, which you can check on the Members page. A picture uploaded here is the same profile image that shows anywhere you've placed data-ms-member="profile-image" on your site.

How to add the profile modal in Webflow

The button only makes sense for logged-in members, so put it on pages they see after logging in.

  1. Add a button or link to a members-only page, such as "Edit profile".
  2. Select it and open the Memberstack Webflow app from the Apps panel.
  3. Choose Modals, then Profile. This adds data-ms-modal="profile". Without the app, add that custom attribute yourself.
  4. Publish, log in as a test member and click the button.

When to build custom profile forms instead

If you want the profile area to match your design exactly, build it in Webflow. A custom setup needs a separate form for each job. Custom fields use data-ms-form="profile", with data-ms-member="field-id" on each input. Email uses data-ms-form="email" with an input marked data-ms-member="email". Password uses data-ms-form="password" with inputs marked data-ms-member="current-password" and data-ms-member="new-password".

Profile pictures sit outside those forms: data-ms-action="profile-image" on an image opens the upload and data-ms-member="profile-image" displays it. A button with data-ms-action="customer-portal" opens the Stripe billing portal.

Before you move on

0 of 4

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Members can now sign up, log in and manage their account. In Journey 2 you’ll give them something to sign up for, starting with a free plan.

Common questions

How do I let members edit their profile with Memberstack?

The quickest way is the pre-built profile modal: add data-ms-modal="profile" to any button. For a custom design, build separate Webflow forms for custom fields, email and password with Memberstack's profile attributes.

Why do custom profile forms need three separate forms?

Each form type does one job. data-ms-form="profile" updates custom fields, data-ms-form="email" changes the email address and data-ms-form="password" changes the password.

Can members upload a profile picture?

Yes. The profile modal includes it automatically. On custom pages, use data-ms-action="profile-image" to open the upload and data-ms-member="profile-image" to show it, outside any profile form.

Attributes used in this video

  • data-ms-modal="profile"

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Another crucial aspect of all membership-based Sites is allowing people to edit their information their billing so on and so forth so with Memberstack you can use completely custom profile forms and I’m not going to show you how to do that in this video but we do have a whole bunch of different components and what I will say is with these profile forms you will need to have three separate ones one for email one for password and one for any custom Fields but let’s do a modal in this video as it’s the easiest way to

  2. 0:31

    get that up and running here we are in our Webflow site and let’s say we want this to edit profile then what we’re going to want to do using our Memberstack Webflow app right here is we’re going to want to click modals and we’re going to want to click profile just like that now let’s go ahead and publish and see what we are left with now let’s open it if I click that right there and then hit edit profile as we can see this is going to launch and I change any of that I can

  3. 1:02

    upload some sort of image like this one you can save that and check out my security so my email I can change my password I can click plans here and remove this plan I can click log out and everything is right there in front of me

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.