Creating Forms with Data Attributes

Memberstack provides several data attributes that allow you to create signup, login, profile update, forgot password, and reset password forms in Webflow.

Signup Form

Use data-ms-form="signup" on a form element to create a signup form. This signs up members without a plan unless you also add a data-ms-plan or data-ms-price attribute.

Required child elements:

• data-ms-member="email" - for email input
• data-ms-member="password" - for password input

<form data-ms-form="signup"> 
  <input type="text" data-ms-member="email"> 
  <input type="password" data-ms-member="password"> 
</form> 

Login Form

Use data-ms-form="login" on a form element to create a login form.

Required child elements:

• data-ms-member="email" - for email input
• data-ms-member="password" - for password input

<form data-ms-form="login"> 
  <input type="text" data-ms-member="email"> 
  <input type="password" data-ms-member="password"> 
</form> 

Profile Update Form

Use data-ms-form="profile" on a form element to allow members to update their profile.

Required child elements:

• data-ms-member="CUSTOM_FIELD_ID" - for each custom field

<form data-ms-form="profile"> 
  <input type="text" data-ms-member="CUSTOM_FIELD_ID"> 
</form> 

Forgot Password Form

Use data-ms-form="forgot-password" to allow members to reset their password.

Required child element:

• data-ms-member="email" - for email input

<form data-ms-form="forgot-password"> 
  <input type="text" data-ms-member="email"> 
</form> 

Reset Password Form

Use data-ms-form="reset-password" to allow members to reset their password with a token from the forgot password email.

Required child elements:

• data-ms-member="token" - for token input
• data-ms-member="password" - for new password input

<form data-ms-form="reset-password"> 
  <input type="text" data-ms-member="token"> 
  <input type="password" data-ms-member="password"> 
</form>