Skip to main content

Lesson 3 of 7 · 2:45 · Beginner · Webflow

Build a custom signup form

Turn any Webflow form into a working signup form with Memberstack attributes.

Where this fits

Memberstack is installed. Now you’ll use it on the first thing every member touches: the signup form.

By the end of this lesson you can

  • Copy a pre-built signup form from Memberstack components and paste it into Webflow
  • See the attributes, like data-ms-form signup, that make a form work
  • Turn any plain Webflow form into a signup form with the Webflow app

Heads up: The Google button is added here, but setting up social login isn’t covered in this video.

Lesson notes

How it works

How Memberstack attributes turn a form into a signup form

Memberstack doesn't replace your Webflow form. It reads attributes on it. data-ms-form="signup" on the form element tells Memberstack to handle the submit and create an account. data-ms-member="email" and data-ms-member="password" tell it which inputs hold the login details. Any extra input, like a first name, gets data-ms-member with the ID of a custom field you've created on the Members page, for example data-ms-member="first-name".

Because it's all attributes, you keep full control of the design. The Attributes page in your Memberstack dashboard lists every one.

Three ways to build a signup form

Copy a component. In your Memberstack dashboard, go to Components, then Signup, pick a styled or unstyled form, copy it and paste it into the Webflow Designer. All the attributes are already set.

Use the pre-built modal. Add data-ms-modal="signup" to any button or link. Clicking it opens Memberstack's signup modal, and the button hides itself once a member is logged in.

Build it from scratch, with your own Webflow form and the attributes added by hand or with the Webflow app.

  1. Add a Webflow form block with an email input and a password input.
  2. Select the form element and add data-ms-form="signup".
  3. Add data-ms-member="email" to the email input and data-ms-member="password" to the password input.
  4. For each extra field, create the custom field in Memberstack and add data-ms-member="field-id" with its ID.
  5. Publish and submit a test signup.

Adding attributes with the Memberstack Webflow app

The Memberstack Webflow app adds attributes for you. Install it from the Webflow App Marketplace, authorize it on your site, then launch it from the Apps panel in the Designer. Select the form and set the form type to signup, then select each input and set it to the matching member data. If you skip the app, type the same attributes into each element's custom attributes.

A Google button in the form uses data-ms-auth-provider="google", but it only works once Google login is enabled in Memberstack.

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: People can sign up now, so next you’ll give them a way to log back in.

Chapters

Common questions

Can I have more than one Memberstack signup form on a page?

Yes. Memberstack 2.0 supports several signup forms on one page, as long as you don't give them all the same ID. You can also have as many signup pages as you like.

Do I need the Memberstack Webflow app to make a signup form?

No. The app just adds the data attributes for you. You can type data-ms-form="signup" and the data-ms-member attributes into Webflow's custom attributes yourself.

Where is payment information collected?

Not in the signup form. Card details are collected and stored by Stripe during checkout. The signup form only sends member data, like email and custom fields, to Memberstack.

Attributes used in this video

  • data-ms-form="signup"
  • data-ms-member="email"
  • data-ms-member="password"

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    After installing our script the next thing that we’re going to want to do is create a sign up form so we could do that from scratch but we could also do it using the Memberstack component so let’s head over here in our dashboard over to components and then let’s hit sign up and here what I can do is grab an unstyled one or I can grab one that’s got a little bit more Flair to it let’s just go ahead and use this modal for example so all we need to do is click copy component you can see there we’re good to go let’s head back over here into Webflow and open the designer

  2. 0:33

    then all we need to do is hit paste and as you can see there we have our sign up form make things a bit more simple I’ve removed this from the modal and just placed it in the middle of a big section everything in Memberstack Works using attributes so for example if I select this form right here and head over to the settings I can see that we have data Ms form sign up we have data Ms member email and all of these attributes are available in the dashboard if we go back

  3. 1:03

    over here and click attributes we can see a full list of them but if you’re using a Memberstack component you won’t need to know as many of these and another thing that you can do is use the Memberstack Webflow app if you don’t already have the app installed on your site what you’re going to need to do is go to Webflow.com apps detail slash Memberstack and then you could just click add to site right here I’ve already done that but the next thing it’s going to ask you to do is authorize it on your site and then

  4. 1:33

    you’re good to go once you’ve installed it to your site all you’re going to need to do to open it is go over here to apps click Memberstack and click launch so I’ve gone ahead and removed all of the attributes from this form right here so it’s the exact same as if you created a form from scratch and I’m going to show you how to add the attributes keep in mind over here you can watch the attributes being added if you didn’t install the app for whatever reason then you could just manually type these attributes yourself first what we’re going to want to do is

  5. 2:04

    Select that form attribute right there and then we’re going to type in sign up so here we can see forms form type sign up great we can see the attribute has been added now email as well we are going to do a member data input and then email same thing with the password let’s do that and then this over here is social auth and I’m not going to cover how to set up Social auth in this video but to make it work with Webflow all you would need to do is click that button do type social auth button and then in this

  6. 2:35

    case select Google so now you know how to create a sign up form both from Memberstack components and totally from scratch using your own built Webflow components

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.