Learn how to create Login / Signup pages in Webflow with Memberstack, how to add new fields to the signup process, and how to set up the page's navigation so that users can sign in, login, and logout.
If you have not done so already, add the Memberscript Install Code to your site's header.
Create a new page called Signup and paste in a sign up component provided by Memberstack.
Add new fields to the signup form by copying an existing field and changing the custom attributes to match the new field:
Create another new page called Login and paste a standard login component provided by Memberstack.
Make sure the 'sign up' link in the login form leads to your signup page, and then publish your page.
In your page’s navigation bar, create buttons for Signup, Login, and Logout.
Set the links for the Signup and Login buttons to their respective pages.
Add the custom attribute data-ms-content="!members" to the sign up and login buttons in order to hide them when users are logged in.
Give the logout button the custom attribute data-ms-action=”logout” to enable logout and hide the button when no user is logged in.
With these steps complete, you will now be able to sign up via the new page that you created and see the newly created user in Memberstack. You will also be able to sign in and log out as that user.
Continue learning how to build Public Profiles in Webflow with the related tutorials below: