Memberstack is basically a back-end for your Webflow front-end. This article will show you ALL of the attributes you can use from the Webflow Package API.
You can also search & copy any of these attributes directly from our website.
Data Attributes
Auth
- data-ms-auth-provider
- Must be used inside
data-ms-form="signup"
anddata-ms-form="login"
forms. - Must be configured and enabled in Memberstack global settings.
- Options available: google, facebook, microsoft, github, linkedin, spotify, and dribble
- Example:
<a data-ms-auth-provider="google" href="#"> Continue with Google </a>
- Read More: https://docs.memberstack.com/hc/en-us/search?utf8=✓&query=data-ms-auth-provider
- Must be used inside
- data-ms-auth=”manage-providers”
- Used as a container element to allow members to connect and disconnect auth providers.
- Must be used on its own and not inside a profile, login, or signup forms.
- Example:
<div data-ms-auth="manage-providers"> <a data-ms-auth-provider="google" href="#"> Continue with Google </a> </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- data-ms-auth-connected-text
- Used to change the innerHtml of the element if the member has connected the auth provider.
- Must be used as a child of
data-ms-auth="manage-providers"
- Example:
<div data-ms-auth-connected-text="Disconnect Google"> Continue with Google </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- data-ms-auth-disconnect
- Used within a
data-ms-auth-provider
element to show an additional element if the auth provider is connected. - Must be used as a child of
data-ms-auth="manage-providers"
- Could be used to display an x or trash icon inside an auth provider element.
- Example:
<div data-ms-auth-disconnect> <img src="YOUR_IMAGE_URL"> </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- Used within a
Plans
- data-ms-plan:add="PLAN_ID"
- Used to add a free plan to a member.
- Can be added to a signup form or a button/link to a signup page.
- Can include multiple plan ids by separating them with a comma.
- Could be used with data-ms-content=”members” as a button that is shown only to members.
- Example:
or<form data-ms-form="signup" data-ms-plan:add="PLAN_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-plan:add="PLAN_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7385162869147-Creating-Free-Plans-in-Memberstack
- data-ms-plan:remove="PLAN_ID"
- Used to remove a free plan or a one-time plan from a member.
- Cannot be used to remove a paid subscription from a member
- Could be used with data-ms-content="CUSTOM_FIELD_ID" to only show a cancel button if the member is part of Gated Content Group.
- Example:
<a data-ms-plan:remove="PLAN_ID" href="#"> Cancel Free Plan </a>
- Read More: Coming soon
Prices
- data-ms-price:add="PRICE_ID"
- Used to add a paid plan to a member.
- Can be added to a signup form or a button/link to a signup page.
- Could be used with data-ms-content="members" as a button that is shown only to members.
- Example:
or<form data-ms-form="signup" data-ms-price:add="PRICE_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-price:add="PRICE_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7403200877211-Guide-to-Understanding-Paid-Plans-Prices-in-2-0
- data-ms-price:update="PRICE_ID"
- Used to update/replace a paid plan.
- Could be used so members only have 1 active paid plan at a time.
- Example:
or<form data-ms-form="signup" data-ms-price:update="PRICE_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-price:update="PRICE_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7403200877211-Guide-to-Understanding-Paid-Plans-Prices-in-2-0
- data-ms-price:remove="all"
- Used to clear out any previously selected plans.
- Handy for when you have a pricing table with free and paid options.
- Example:
<a data-ms-price:remove="all" href="#"> Remove all </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7406222866459-Creating-a-Pricing-Table-in-Webflow
Actions
- data-ms-action="resend-verification-email"
- Used to send an additional verification email to the member.
- Only works if you have verification email enabled in Global Settings → Emails.
- Example:
<a data-ms-action="resend-verification-email" href="#"> Resend verification email </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/8437630733083-Email-Verification
- data-ms-action="customer-portal"
- Used to let members manage their paid plans.
- Memberstack relies on Stripe’s Billing Portal for paid plans.
- Automatically hides element for members with no paid plans.
- Example:
<a data-ms-action="customer-portal" href="#"> Open Customer Portal </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7782712032539-Stripe-Customer-Portal
- data-ms-action="logout"
- Used to log out the current member.
- Use this on buttons or links to log out the current member.
- Automatically hides the element if the member is logged out.
- Example:
<a data-ms-action="logout" href="#"> Logout </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7389990064283-Create-a-Logout-Link-or-Button-in-Webflow
- data-ms-action="login-redirect"
- Used to redirect the member to their Login Redirect Url.
- Only visible to logged-in members.
- If no member login URL is available it uses the plan redirect if specified, or the default login redirect.
- Example:
<a data-ms-action="login-redirect" href="#"> Your Content </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9780287236507-Login-Redirect-Buttons
Modals
- data-ms-modal="login"
- Used to show Memberstack’s Pre-Built Login Modal.
- Can be used on links or buttons.
- Example:
<a data-ms-modal="login" href="#"> Login </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785629397659-Create-a-Login-Form-in-Webflow
- data-ms-modal="signup"
- Used to show Memberstack’s Pre-Built Signup Modal
- Signs up a member with no plan unless a data-ms-price (paid) or data-ms-plan (free) data attribute is added to it.
- Can be used on links or buttons.
- Example:
<a data-ms-modal="signup" data-ms-plan:add="PLAN_ID" href="#"> Signup </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow
- data-ms-modal="profile"
- Used to show Memberstack’s Pre-Built Profile Modal
- Allows a member to change their plans, email, passwords, and log out.
- Only visible to logged-in members.
- Example:
<a data-ms-modal="profile" href="#"> Profile </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-modal="forgot-password"
- Used to let a member change their password if they cannot remember it.
- Sends an email to the member that includes a token they need to add to the modal before being able to change their password.
- Example:
<a data-ms-modal="forgot-password" href="#"> Forgot Password </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
Forms
- data-ms-form="signup"
- Signs up a member with no plan unless a data-ms-price (paid) or data-ms-plan (free) data attribute is added to it.
- Will only work if added to a form element.
- Adding a redirect to the form element will override redirects saved in Memberstack.
- Required child element data attributes:
- data-ms-member=”email”
- data-ms-member=”password”
- Example:
<form data-ms-form="signup" data-ms-plan="PLAN_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow
- data-ms-form="login"
- Logs in a member.
- Required child element data attributes:
- data-ms-member=”email”
- data-ms-member=”password”
- Adding a redirect to the form element will override redirects saved in Memberstack.
- Example:
<form data-ms-form="login"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785629397659-Create-a-Login-Form-in-Webflow
- data-ms-form="profile"
- Allows a member to update their member data.
- Only work on custom fields added to Memebrstack.
- Does not work on email or passwords.
- Required child element data attributes:
- data-ms-content=”CUSTOM_FIELD_ID”
- Example:
<form data-ms-form="profile"> <input type="text" data-ms-content="CUSTOM_FIELD_ID"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-form="email"
- Allows a member to update their email address.
- Example:
<form data-ms-form="email"> <input type="text" data-ms-member="email"> </form>
- Read More:
- data-ms-form="password"
- Allows a member to update their password.
- Required child element data attributes:
- data-ms-member=”current-password”
- data-ms-member=”new-password”
- Example:
<form data-ms-form="password"> <input type="text" data-ms-member="current-password"> <input type="text" data-ms-member="new-password"> </form>
- Read More: Create Profile Forms in Webflow (password reset, change email, and custom fields)
- data-ms-form="forgot-password"
- Used to let a member change their password if they cannot remember it.
- Sends an email to the member that includes a token they need to add to a reset password form before being able to change their password.
- Required child element data attributes:
- data-ms-member=”email”
- Example:
<form data-ms-form="forgot-password"> <input type="text" data-ms-member="email"> </form>
- Read More:
- data-ms-form="reset-password"
- Used to allow members to reset their password with a token.
- Requires a token from a forgot password form.
- Required child element data attributes:
- data-ms-member="token"
- data-ms-member="password"
- Example:
<form data-ms-form="reset-password"> <input type="text" data-ms-member="token"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
Content
- data-ms-content="members"
- Only visible to all logged-in members.
- data-ms-content="!members"
- Only visible to logged-out members.
- data-ms-content="verified"
- Only visible to all logged-in members who are verified.
- data-ms-content="!verified"
- Only visible to all logged-in members who are not verified.
- data-ms-content="is-trialing"
- Only visible to all logged-in members who are in a trial.
- data-ms-content="!is-trialing"
- Only visible to all logged-in members who are not in a trial.
- data-ms-content="free-plans"
- Only visible to all logged-in members who have a free plan.
- data-ms-content="!free-plans"
- Only visible to all logged-in members who do not have a free plan.
- data-ms-content="paid-plans"
- Only visible to all logged-in members who have a paid plan.
- data-ms-content="!paid-plans"
- Only visible to all logged-in members who do not have a paid plan.
- data-ms-content="no-plans"
- Only visible to all logged-in members who do not have any plans.
- data-ms-content="!no-plans"
- Only visible to all logged-in members who do have a plan.
- data-ms-content="has-password"
- Only visible to all logged-in members who have an email password.
- data-ms-content="!has-password"
- Only visible to all logged-in members who do not have an email password.
- data-ms-content="GATED_CONTENT_GROUP_ID"
- Only visible to all logged-in members who have access to the Content Group.
- data-ms-content="!GATED_CONTENT_GROUP_ID"
- Only visible to all logged-in members who do not have access to the Content Group.
Members
- data-ms-member="signup-date"
- Used to display the current member’s signup date.
- Only visible to logged-in members.
- Can be used on div, p, span, and heading elements.
- Read More: Coming soon
- data-ms-member="CUSTOM_FIELD_ID"
- Used to display the current member’s custom field data.
- Can be used on div, p, span, and heading elements.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7842471590811-Pre-populate-Forms-with-Member-Data-plus-Hidden-Fields-
- data-ms-member="email"
- Used to display the current member’s email.
- Can be used on input, div, p, span, and heading elements.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7842471590811-Pre-populate-Forms-with-Member-Data-plus-Hidden-Fields-
- data-ms-member="password"
- Used as an input to submit passwords.
- Only used on input elements.
- Only used as a child element in a form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
- data-ms-member="token"
- Used as an input for the reset password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
- data-ms-member="current-password"
- Used as an input for the password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-member="new-password"
- Used as an input for the password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
Custom Loader
- data-ms-loader
- Replaces the default loader that is shown before displaying Memberstack modals with content that has this data attribute.
- Make sure you hide the loader on the page by setting display none.
- Example:
<div data-ms-loader style="width:100%; display:none"> <div style="height:0;padding-bottom:75%;position:relative;width:100%"> <iframe allowfullscreen="" frameBorder="0" height="100%" src="[<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>](<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>)" style="left:0;position:absolute;top:0" width="100%"></iframe> </div> </div>
- Read More: Coming soon
Examples:
Signup form for no plan:
<form data-ms-form="signup">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form for a free plan:
<form data-ms-form="signup" data-ms-plan="PLAN_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form for a paid plan:
<form data-ms-form="signup" data-ms-price="PRICE_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form with custom fields:
<form data-ms-form="signup">
<input type="text" data-ms-member="CUSTOM_FIELD_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Login form:
<form data-ms-form="login">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Profile form:
<form data-ms-form="profile">
<input type="text" data-ms-member="CUSTOM_FIELD_ID">
</form>
Update email form for logged-in members:
<form data-ms-form="email">
<input type="text" data-ms-member="email">
</form>
Forgot password form:
<form data-ms-form="forgot-password">
<input type="text" data-ms-member="email">
</form>
Reset password form (excepts the token from the email sent from forgot password form):
<form data-ms-form="reset-password">
<input type="text" data-ms-member="token">
<input type="text" data-ms-member="password">
</form>
Show an element only to logged In members:
<div data-ms-content="members">
Members Only
</div>
Hide an element from logged-in members -or- Show an element only to logged-out members.
<div data-ms-content="!members">
Logged Out Users Only
</div>
Replace the Memberstack loader for Pre-Built Modals:
<div data-ms-loader style="width:100%">
<div style="height:0;padding-bottom:75%;position:relative;width:100%">
<iframe allowfullscreen="" frameBorder="0" height="100%" src="[<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>](<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>)" style="left:0;position:absolute;top:0" width="100%"> </iframe>
</div>
</div>
Comments
5 comments
Hello !
Could we please have a the attribute data-ms-member=stripe-id please ?
Thanks !
William de Broucker great idea!
I have a few ideas, but I'm curious why you'd like this attribute? What would it help you to accomplish?
Hello !
I would like this attribute in order to use it in a cancelation form (in order to cancel the user via the Stripe API in Make).
Currently I'm using a script to extract the StripeCustomerId but that would be easier to have it in as an attribute
William de Broucker Would you mind sharing the script you're using to extract the StripeCustomerID?
Sure :)
Inside the form I hide then field stripeCustomerId which is empty at first
<input type="hidden" name="stripeCustomerId" id="stripeCustomerId">
and then I use this script (made using chatGPT) , then I collect the stripeCustomerId in a webhook in order to given the discount using the Stripe API
Please sign in to leave a comment.