Create Profile Forms in Webflow

Article author
Duncan Hamra

There are several types of profile forms. To get started quickly we recommend cloning our unstyled starter project, copy the forms you need, paste them into your project, and then apply your styling.

Form 1 → Update Custom Fields

profile1.gif

  1. Add the data-ms-form=”profile” attribute to the form element.
  2. Next, you’ll need to design your various input fields to your website. Name fields, phone number, bio, links, etc.
  3. Then you’ll need to create the equivalent custom fields in Memberstack. Here’s an article to get your started… Create Custom Fields.
  4. Add the appropriate data-ms-member=”fieldID” attributes to you input elements.

Form 2 → Update Email

profile-email.gif

  1. Add the data-ms-form=”email” attribute to the form element.
  2. Add the data-ms-member=”email” attribute to an input element. Set the type to email.

💡 Each type of profile form can live on its own page, or share a page with the others. The layout is up to you. However, each form must have the right data attributes.

Form 3 → Update Password

profile_password.gif

You need the following 3 data attributes.

  • A the data-ms-form=”password” attribute on the form element.
  • A the data-ms-member=”current-password” attribute for the members current password input.
  • A the data-ms-member=”new-password” attribute for the members new password.

Form 4 → Stripe Customer Portal

profile_customer_portal.gif

We have an article that explains the Stripe Customer Portal and how to use it here.

Was this article helpful?

Comments

1 comment

  • Comment author
    Riley Brown

    Is it possible to display a customer's current plan and price, or is this assumed only accessible through Stripe?

    0

Please sign in to leave a comment.