How to implement passwordless signup in Webflow using Memberstack for a waitlist app? Answered

• 

  Josh Lopez

  • November 02, 2023 17:03

  Hey ezly L'kana

  Great question! We have not been able to successfully add auth to a webflow designer app. We tried doing something similar with our webflow designer app but the api wouldn't let us. if you do get it to work please share!

  1
• 

  Chris Knight

  • January 08, 2025 03:37

  Hi Memberstack Team,

  ... Assistance Needed with Webflow + Memberstack Passwordless Signup Integration

  I’m trying to set up a passwordless sign-up process in Webflow. My goal is to collect an email on the home page, create a Memberstack account, and redirect users to a waitlist form (/waitlist) for additional onboarding data.

  I’ve connected the correct free plan, but I’m still facing issues:

  • The email field is set with data-ms-member="email", but no Memberstack account is created.
  • Misplaced form attributes and missing signup element errors appear in the debugger.

  Could you guide me on resolving this?

  Thank you,
  Chris

  0
• 

  Raquel Lopez

  • January 08, 2025 03:38

  Hi Chris,

  The easiest way to diagnose your problem is if you can share your published site so any of us can review what errors appear to you.

  Also, have you tried copy and paste Memberstack official Webflow components? https://www.memberstack.com/features/passwordless-logins they should work right away when you implement them in Webflow.

  0
• 

  Chris Knight

  • January 08, 2025 03:41

  thank you Raquel Lopez
  https://www.theprivateclubs.com/
  Password: Invited

  The webflow.io page - https://theprivateclubs.webflow.io/

  You will see from the flow... I'm trying to use the home page to capture the users email. then add it to memberstack to create a record... then take the user to the /waitlist page to complete additional profile information... all of which the user will be on a free plan called: waitlist.

  Additonally created login and signup pages here: www.theprivateclubs.com/login

  these login page would be reserved for users who have paid for memebrship and then login to the user dashboard.

  The error i get in webflow is: Ensure the data-ms-form="signup" is applied directly to the <form> element.

  • In the Webflow Navigator, select your form_newsletter and ensure that this attribute is not on a <div> or another wrapper but on the actual  <form>.

  

  If possible, I would like to use my flow, as it feels easy for the user to commit at each stage of request.

  0
• 

  Raquel Lopez

  • January 08, 2025 03:46

  data-ms-form attribute should always be in a form element. Should be inside this component. Should have data-ms-form="passwordless-signup"

  

  The email input should have this attribute data-ms-member="email"

   

  And you need to copy the code challenge component and paste it inside the same form so all the attributes are copy with it. That's why I recommended you to use the official Webflow component

   

  

   

  This video talks about how to use the passwordless component and what attributes to use  later, after you make sure it works you can give it styling so it matches your page styleguide https://www.youtube.com/watch?v=B0LEaXg8d8M
  0
• 

  Chris Knight

  • January 08, 2025 03:49

  I was thinking of the following flow:

  1. Email > Join newsletter (Create's email record in memberstack)
  2. Waitlist > Answer onboarding questions (Match this to email created in Memberstack)
  3. Folk App > Memberstack share this info to Folk CRM so I can contact these users to join.

  Or perhaps i'm over complicating.

  and the first email/newsletter should be the passwordless as you suggested... followed by onboarding questions.

  reason being, I am gating my website based on free and paid members.

  Waitlist = FREE membership
  Paid = PAID membership

  0
• 

  Raquel Lopez

  • January 08, 2025 03:50

  Ok, you should redirect your recently signed up users to /onboarding page. It's not overcomplicating. Many people do this.

  So, in the memberstack dashboard there are some rules you can set to redirect your users per plan or by default rules (no plans)

  • Default rules = are anybody that registers that don't have a plan or their plan don't have any rules
  • Per plan rule, it would redirect users whenever they acquire that plan

  Reference docs: https://docs.memberstack.com/hc/en-us/articles/7384608370715-Default-Redirects-Plan-Redirects-Signup-Login-Logout

  

  0
• 

  Chris Knight

  • January 08, 2025 03:52

  yeah, maybe i'll use this as the first page user visit when landing on my site:
  https://www.theprivateclubs.com/get-started

  that way I can capture the email, and then send them to onboarding afterwards.

  I really appreciate your help on guiding me Raquel Lopez thank you so much!

  Assistance with Multi-Step Onboarding Form and Data Mapping

  I’m currently facing an issue with mapping form data to Memberstack profiles in a multi-step onboarding flow. Here’s what I’m trying to achieve:

  • Context: Users sign up with passwordless login (via email) on my site, and after authentication, they are redirected to a multi-step onboarding form. The form collects data like first name, email, phone number, country, city, and membership type.
  • Issue: I’ve applied data-ms-member attributes to each field (e.g., data-ms-member="first-name", data-ms-member="email", etc.) along with data-ms-form="update". However, the form data isn’t being mapped to Memberstack profiles correctly after each step, or sometimes it doesn’t update at all.
  • Current Setup:

  1. I have each form field in Webflow properly tagged with the data-ms-member attribute.
  2. After authentication, the user is redirected to the onboarding page.
  3. The form is set up in multiple steps (4 steps total), with data being captured progressively.

  • Goal: I want to ensure that the user’s profile in Memberstack is updated progressively as they complete each step, so that even if they don’t complete all steps, the data is still saved to their profile.

  Any guidance or advice on how to resolve this would be greatly appreciated!

  Thanks in advance for your help.

  0
• 

  Raquel Lopez

  • January 08, 2025 03:54

  You should use data-ms-form="profile" in the form that updates custom fields. Did you check you are using the right attribute?

  0
• 

  Chris Knight

  • January 08, 2025 03:55

  giving this a go now. thank you :)

  0

Please sign in to leave a comment.