Create a Signup Form in Webflow

Article author
Duncan Hamra
  • Updated

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

Option A → Copy a Component (1 min)

1. Pick from over 100+ 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.

If you want to collect additional information, please see "Optional Step 3 → Add custom fields"

below.

 

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

Option B → Start from Scratch (5 min)

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 test 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="custom_field_id”, data-ms-member="name", data-ms-member="phone", etc etc.
  3. Your form is ready to start adding members to your memberstack application!

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

Option C → Use a Pre-built Modal (1 min)

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

navbar-signup.jpg

Step 2 → Add the data-ms-modal=”signup” attribute to your link.

signup_attribute.jpg

That’s it! → Your form is ready for members!

signup_modal_preview.jpg

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.