1. Memberstack 2.0
  2. Guides & Tutorials
  3. Forms

Create a Signup Form in Webflow

Article author
Yasir eqq

Memberstack works with signup, login, and profile forms that you create in Webflow. Here’s how to integrate your custom Webflow login form with Memberstack.

A. 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 500+ 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. 

 

-------------

Every Memberstack project comes with a set of default modals which can be launched with a link. 

signup_modal_preview.jpg

Step 1 → Create a signup link or button on your site.

navbar-signup.jpg

Step 2 → Add the following attribute to your link. The attribute name is data-ms-modal and the value is signup.signup_attribute.jpg

That’s it! → The signup modal will display when the button is clicked, and the button will disappear once I member is logged in. 

-------------

C. Start from Scratch

Step 1 → Build a form in Webflow

  1. Add a form block.
  2. 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

  1. Add data-ms-form="signup" to the <form> element.
  2. Add the data attributedata-ms-member="email" to your email input.
  3. Add data-ms-member="password" to your password input.

Optional Step 3 → Add custom fields

  1. If you have custom fields, you’ll need to add them to your database in Memberstack. Create Custom Fields
  2. 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.
  3. Your form is ready to start adding members to your memberstack application!

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.

Was this article helpful?

Comments

9 comments

Please sign in to leave a comment.