1. Memberstack 2.0
  2. Developer Docs
  3. Memberstack Webflow Package

All Webflow Package Data Attributes

Article author
Josh Lopez

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. 

Screen

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

5 comments

  • Comment author
    William de Broucker

    Hello ! 

    Could we please have a the attribute data-ms-member=stripe-id please ?

    Thanks !

    2
  • Comment author
    Duncan from Memberstack

    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?

    0
  • Comment author
    William de Broucker

    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

    1
  • Comment author
    Duncan from Memberstack

    William de Broucker Would you mind sharing the script you're using to extract the StripeCustomerID?

    0
  • Comment author
    William de Broucker

    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

    <script>
    const memberstack = window.$memberstackDom
    memberstack.getCurrentMember().then(({ data: member }) => {
        // Find the hidden input field and set its value to the stripeCustomerId
        document.getElementById('stripeCustomerId').value = member.stripeCustomerId;
    })

    $(document).ready(function() {
        $('#wf-form-Cancelation-Form').submit(function(e) {
            e.preventDefault();

            var formData = $(this).serialize();
            console.log('Form data:', formData);  // check the serialized form data
            var actionUrl = $(this).attr('action');

            $.post(actionUrl, formData)
                .done(function() {
                    window.location.href = "/membership/offre-annulation";
                })
                .fail(function() {
                    alert('There was a problem with the submission. Please try again.');
                });
        });
    });
    </script>
    1

Please sign in to leave a comment.