All Webflow Package Data Attributes

Article author
Josh Lopez
  • Updated

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.  

Data Attributes

Auth

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: 
      <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>
      or 
      <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

Actions

Modals

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"
  • data-ms-form="profile"
  • 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"
  • 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"

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

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>

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.