Forms & Fields

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Browser too small

Please change to a screen size of at least
1000 pixels to continue

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Profile

C Autosaved

D Saving

.Add this attribute to your custom form

Add this attribute to input fields on your site.

Name:

data-ms-member

Value:

Name:

data-ms-member

Value:

password

data-ms-member="password"

data-ms-member="email"

data-ms-member="password"

data-ms-member="email"

Other field types

.Add this attribute to your custom form

Use it to display user date and pre-populate form fields.

Name:

data-ms-member

Value:

data-ms-member="{{activeField.fieldId}}"

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

What's this?

Are you sure?

You're about to delete a form field.

Signup and profile fields

Add, edit, hide, and reorder fields below.

Add custom fields

Collect and display additional info.

Setup Instructions

Add this attribute to your signup form.

Place this attribute on the <form> element.</form>

Name:

data-ms-form

Value:

signup

data-ms-form="signup"

Start from a template

You can copy & paste templates into your project without losing design control.

Signup form type

Do you want to build your own custom signup page or use our pre-build modals?

Pop-up modal

Build a custom signup form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Create more advanced forms: learn to create multi-step signup forms and custom profile forms.

Add login URL

Setup Instructions

Password reset link

Add this to a link on your site to launch the password reset modal.

example.com/#/ms/password-reset

Start from a template

You can copy & paste templates into your project without losing design control.

Do you want to use our pre-build modals or build your own custom signup page?

Pop-up modal

Build a custom login form

Oops! Something went wrong while submitting the form.

Add this link to your profile buttons.

Elements with this link are only visible if a user has a profile.

example.com/

#/ms/profile

example.com/

#ms-profile

Show data attributes.

Name:

data-ms-modal

Value:

profile

data-ms-modal="profile"

Save Changes

Manage Membership

Sample Plan

{{cs}}199

renews yearly on 21 Oct 2018

Cancel

Billing History

Payment Method a

VISA

ending in

1112

Expires: 12/22

Edit

This is a success message

This is an error message

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Save Changes

Sample Plan

Billed yearly

{{cs}}99

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Complete Checkout

By clicking above you agree to our Terms of Service and Privacy Policy

Modals & Forms

Description

Link

Learn

Launch the signup modal.

#/ms/signup/membership-id

Launch the login modal.

#/ms/login

Launch the password reset modal.

#/ms/password-reset

Launch the member profile modal.

#/ms/profile

Members-only content

Description

Link

Learn

Hide links for members-only content

#/ms/content/content-id

Hide links from active members

#/ms/content/!content-id

Hide links from logged in members

#/ms/content/!members

Page links & actions

Description

Link

Learn

Logout link.

#/ms/logout

Redirect a user to the "page after login" for their particular membership.

#/ms/membership/redirect

Dynamic "dashboard" links for members with a member-specific page.

#/ms/member-page/default

Member data

Description

Attribute

HTML Tags

Learn

Display member data.

data-ms-member="field-id"

Any text tag →

<div>

<span>

<h3>

etc.

Populate form fields with member data.

data-ms-member="field-id"

<input>

Display an image associated with a member.

data-ms-member="field-id"

<img>

Display / access a member's email.

data-ms-member="email"

<div>

<span>

<input>

etc.

Access a member's unique ID.

data-ms-member="id"

<div>

<span>

<input>

etc.

Display / access a member's signup date.

...member="signup-date"

<div>

<span>

<input>

etc.

Display / access a member's current membership price.

...member="membership.amount"

Any text tag →

<div>

<span>

<h3>

etc.

Display / access a member's current membership name.

...member="membership.name"

Any text tag →

<div>

<span>

<h3>

etc.

Members-only content

Description

Attribute

HTML Tags

Learn

Tag page content as members-only content.

data-ms-content="content-id"

Any tag →

All

<div>

<span>

<a>

etc.

Opposite of members-only content.

data-ms-content="!content-id"

Any tag →

<div>

<span>

<a>

etc.

This content is visible when a member logs in.

data-ms-content="members"

Any tag →

<div>

<span>

<a>

etc.

This content is hidden when a member logs in.

data-ms-content="!members"

Any tag →

<div>

<span>

<a>

etc.

Memberships

Description

Attribute

HTML Tags

Learn

Select a membership before signup.

data-ms-membership="membership-id"

<a>

<div>

<input>

etc.

Launch the upgrade/downgrade modal.

data-ms-membership="membership-id"

<a>

<div>

<input>

etc.

Display selected membership price during signup.

data-ms-membership="price"

Any text tag →

<div>

<span>

<a>

etc.

Display selected membership name during signup.

data-ms-membership="name"

Any text tag →

<div>

<span>

<a>

etc.

Custom signup, login, and profile forms.

Description

Attribute

HTML Tags

Learn

Display & update member data.

data-ms-member="field-id"

<input>

Turn any form into a signup form.

data-ms-form="signup"

<form>

Change the active membership of a signup form. This is in addition to the data-ms-form attribute.

data-ms-membership="membership-id"

<form>

Turn any form into a login form.

data-ms-form="login"

<form>

Turn any form into a profile update form.

data-ms-form="profile"

<form>