Here are three different ways to integrate a profile form with Memberstack & Webflow.
A. Copy a Webflow Component (2 min)
This method is the fastest and most highly recommended. We have hundreds of customizable components you can use to get started.
1. Pick from over 100+ free components or start with an unstyled Profile form.
2. Copy the form element and paste it into your project.
All of the attributes and custom code you need have already been set up for you.
B. Use the Pre-built Profile Modal (1min)
Step 1 → Create a login link or button on your site.
Step 2 → Add the data-ms-modal="profile" attribute to your link.
C. Build a Profile Page from Scratch (6min)
Form One → Update Custom Fields
- Add the
data-ms-form="profile"attribute to the form element. - Next, you’ll need to design your various input fields to your website. Name fields, phone number, bio, links, etc.
- Then you’ll need to create the equivalent custom fields in Memberstack. Here’s an article to get your started… Create Custom Fields.
- Add the appropriate
data-ms-member="fieldID"attributes to you input elements.
Note → You can add Profile Images to your site, but they cannot go inside of a profile form.
Form Two → Update Email
- Add the
data-ms-form="email"attribute to the form element. - Add the
data-ms-member="email"attribute to an input element. Set the type to email.
💡 Each type of profile form can live on its own page, or share a page with the others. The layout is up to you. However, each form must have the right data attributes.
Form Three → Update Password
You need the following 3 data attributes.
- A the
data-ms-form="password"attribute on the form element. - A the
data-ms-member="current-password"attribute for the members current password input. - A the
data-ms-member="new-password"attribute for the members new password.
Form Four → Stripe Customer Portal
We have an article that explains the Stripe Customer Portal and how to use it here.
Comments
12 comments
Is it possible to display a customer's current plan and price, or is this assumed only accessible through Stripe?
Not possible yet, but I expect that to get built in the next 12 months.
Is it possible to redirect to a custom URL after a profile is updated? Duncan from Memberstack
In the end I just wrote some JS to fix this problem:
<script>
const button = document.getElementById("button");
button.addEventListener("click", () => {
window.location.href = "https://home.com";
});
</script>
Thank you for sharing your solution Nicholas Platt 🙏
Hey Josh Lopez would you be able to update your custom CSS (as shown here for v1) in the context of Profile Modal on V2 ?
That would be greatly appreciated. Thanks
David Charrier
The modals are different from 1.0 so im not sure what specifically you mean. If you are wanting to hide the "Security" options you could do something like this:
Thanks for the reply Josh Lopez
I was actually was referring to the email, meaning disabling the option to change it and adding a mention to contact the support.
Would you be able to provide that CSS?
Thanks
That is not possible at the moment but something we didnt have in 1.0 that 2.0 has are pre-built components. Here is a link so you can add a component that you can fully customize.
Hello,
Can we avoid user using the same password as new password (new == old) ?
Thanks
Hey William de Broucker 👋 That's not currently possible, but we could consider making it a feature in the future.
🙏
Please sign in to leave a comment.