Memberstack works with signup, login, and profile forms that you create in Webflow. Here is how to integrate your custom Webflow login form with Memberstack.
1) Copy & Paste
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 600+ free components or start with an unstyled signup 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.
What's next?
Next up, let's add a custom field to collect additional information from members. Custom Fields & Inputs. This article is part of the official Getting Started Checklist.
-------------
2) Pre-built Modals
Every Memberstack project comes with a set of default modals which can be launched with a link.
Step 1 → Create a signup link or button on your site.
Step 2 → Add the following attribute to your link. The attribute name is data-ms-modal and the value is signup.
That’s it! → The signup modal will display when the button is clicked, and the button will disappear once I member is logged in.
-------------
3) Start from Scratch
Step 1 → Build a form in Webflow
- Add a form block.
- Add the required input fields (email and password) and any additional fields you want to collect data for. These can be checkboxes, radio buttons, select fields, or text areas.
Step 2 → Add the Memberstack data attributes
- Add
data-ms-form="signup"to the <form> element. - Add the data attribute
data-ms-member="email"to your email input. - Add
data-ms-member="password"to your password input.
Optional Step 3 → Add custom fields
- If you have custom fields, you’ll need to add them to your database in Memberstack. Create Custom Fields
- Memberstack will generate a field ID for each, which you will need to add to Webflow. The attribute will look like
data-ms-member="first-name",data-ms-member="last-name",data-ms-member="phone", etc. - Your form is ready to start adding members to your memberstack application!
4) FAQ
Can I have multiple signup pages.
Yes! You can have as many different signup pages as you like.
Can I have more than 1 signup form per page?
Yes! With Memberstack 2.0 you can now have more than 1 signup form on the page. Please remember to not assign all the forms the same id though.
Comments
13 comments
On B, step 2, it wasn't clear to me as a newbie that I wasn't supposed to just paste in the highlighted code, but instead split it up as pictured. Might want to clarify in case other users are as dense as I am. :)
Updated! Thanks for the feedback 😁
Why aren't there boxes to collect payment information?
Can you have them set their password after sign up?
Hey TAYLOR DAVIDSON 👋
Payment information is collected by and stored in Stripe. The data entered into the sign up form is collected by and stored by Memberstack. If a member clicks on a data-ms-price:update attribute before signing up they will be prompted to checkout right after signing up.
Hey Duncan from Memberstack,
Is there a video of this functioning?
The concern is that it's too many clicks and you are losing conversion.
Sign up is supposed to be name, email, and payment info. Then one click to purchase. Simple and straightforward.
Hi, memberstack
Hi Memberstack, i have copy pasted a form from your site to my projects but it is not showing up in publish mode, Please have a look and help me out.
Read only- https://preview.webflow.com/preview/prashants-supercool-site-lvl-3?utm_medium=preview_link&utm_source=designer&utm_content=prashants-supercool-site-lvl-3&preview=702e7b521ea737c517ffb98aaa4f5fad&pageId=663fa9c69080c505ea46bfd1&workflow=preview
Publish mode- https://prashants-supercool-site-lvl-3.webflow.io/sign-up
asdf4a null please see this 1 min video which explains why your form is not visible. https://www.loom.com/share/6049fda055404ad2b23c7942a737698e
Thank you so much for the help Duncan from Memberstack ! it solves the issue.
Is this Video outdated?, When I press "Clone in Webflow" it wants me to create a new Website every time and does not let me Ctrl V it into my existing page? I need help asap
Hey Benjamin Huemer 👋
1min video to explain what's going on. Let me know if I missed something. https://www.loom.com/share/6b8189e31d7342019e1d6ce63a452aa1
Hello, I created the signup form but the member didn't show up. I text the bot in memberstack and it said if i don't have it attached to a plan, it won't acknowledge the new member? I have the form at this address: can you tell me what I need to do? https://www.healingwurks.com/sound-frequency-plan-sign-up
And BTW, I tried to clone your site and it would never allow me to add it to my webflow site. I have spent weeks trying to get this set up and nothing seems to work.
beth rice Looks like your sign up form is working now 🎉 https://www.loom.com/share/866790d3463d416694e792e9224ed206
The issue was hCaptcha was enabled, but not setup properly. Here's a document to explain how to setup hCaptcha https://docs.memberstack.com/hc/en-us/articles/11398218093595-Prevent-Spam-with-hCaptcha
Please sign in to leave a comment.