Add a login form, custom or pre-built, plus a logout button.
Where this fits
Your signup form works. The other half of any account system is a login form, and it uses the same attribute approach.
By the end of this lesson you can
Paste in a pre-built login component that already has its attributes
Turn your own Webflow form into a login form
Make any button open Memberstack’s pre-built login modal
Heads up: The Google button won’t work until social login is set up, which this video doesn’t cover.
Lesson notes
How it works
How a Memberstack login form works
A login form uses the same attribute approach as signup, with one value changed. data-ms-form="login" goes on the form element, data-ms-member="email" on the email input and data-ms-member="password" on the password input. When a member submits, Memberstack checks the details against your member database and logs them in on that browser.
After a successful login, Memberstack sends the member to your login redirect. If you haven't set one, they stay on the page they logged in from. You'll fix that in the next lesson.
Three ways to add a login form
Copy a component from Components in your Memberstack dashboard and paste it into Webflow. The attributes are already on it.
Turn your own form into a login form by adding the attributes yourself or with the Memberstack Webflow app: set the form type to login, then set the inputs to email and password.
Or skip the form completely. Add data-ms-modal="login" to any button or link and it opens Memberstack's pre-built login modal.
1Select your Webflow form element and add data-ms-form="login".
2Add data-ms-member="email" to the email input.
3Add data-ms-member="password" to the password input.
4Publish and log in with a test member you created with your signup form.
Logging members out and social login
Give any link or button data-ms-action="logout" and it logs the member out. They then go to your logout redirect, which is the home page by default.
A Google button in a login form uses data-ms-auth-provider="google" and needs Google enabled in Memberstack first. By default, a social button in a login form won't create new accounts. To let it sign people up too, add data-ms-social-auth-allow-signup to the login form or to your login modal button.
Before you move on
0 of 4
Tick these off on your own site. Done with all of them? You’re ready for the next lesson.
Up next: Right now members stay on the same page after they log in, so next you’ll tell Memberstack where to send them.
Common questions
Where do members go after they log in with Memberstack?
To the login redirect set in your Memberstack dashboard. With no redirect set, they stay on the page where they logged in.
Can new members sign up through a login form with Google?
Not by default. Add data-ms-social-auth-allow-signup to the login form or the login modal button, and social auth buttons will create accounts for new members.
How do I add a logout button in Webflow?
Add the custom attribute data-ms-action="logout" to any link or button. Clicking it logs the member out and sends them to your logout redirect.
Another feature that your site will definitely need to have is a login form so there are three ways to do that with Memberstack the first one and the most simple yet fully customizable One is using our component all you need to do is go to your Memberstack dashboard click components right there and find any one that you like let’s say this one give that a copy back over into Webflow and paste that in with that being pasted in all of the attributes are added and there’s nothing that you need to do so
0:31
let’s just go ahead and get rid of that because that’s not the lesson today let’s talk about two different ones One is using the pre-built modal and one is using a custom form here we are in Webflow and I have this form it’s designed but there are no attributes added to it it’s just a Webflow form at this point let’s go ahead and make that work let’s click our form element right here go over here to forms and select login just like that then for here for email we’re going to want to click input and email then here we’re going to do the same
1:01
thing and password then this one we can set that to be Google but we haven’t set up Social auth yet so it’s not going to work so we have that and then the easiest and most simple one is modal here I have a button that just says login doesn’t do anything if I click modals and then click login that is going to work now let’s go ahead and publish that and see what we’re left with let’s launch it and now let’s click that login modal as
1:33
you can see that is working but I’m going to show you logging in with the custom model here we have this and if we hit sign up then we are logged in just like that and we haven’t set our login redirect for no plan so we’re just going to stay on this page that is it for login forms when a member logs in they’re going to be taken to whichever page you’ve set up in your Memberstack dashboard through the redirects
This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.