Create Profile Forms in Webflow (Password reset, change email, and custom fields)

Article author
Memberstack Team

Here are three different ways to integrate a profile form with Memberstack & Webflow.

A. Copy a Webflow Component (2 min)

This method is the fastest and most highly recommended. We have hundreds of customizable components you can use to get started. 

1. Pick from over 100+ free components or start with an unstyled Profile 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.

B. Build a Profile Page from Scratch (6min)

Form One → 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 Two → 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 Three → 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 Four → Stripe Customer Portal

profile_customer_portal.gif

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

C. Use the Pre-built Profile Modal (1min)

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

Step 2 → Add the data-ms-modal="profile" attribute to your link.

 

Was this article helpful?

Comments

5 comments

  • Comment author
    Riley Brown

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

    1
  • Comment author
    Duncan Hamra
    • Edited

    Not possible yet, but I expect that to get built in the next 12 months. 

    0
  • Comment author
    Nicholas Platt

    Is it possible to redirect to a custom URL after a profile is updated? Duncan Hamra

    1
  • Comment author
    Nicholas Platt

    In the end I just wrote some JS to fix this problem: 


    <script>
    const button = document.getElementById("button");
    button.addEventListener("click", () => {
      window.location.href = "https://home.com";
    });

    </script>

    1
  • Comment author
    Duncan Hamra

    Thank you for sharing your solution Nicholas Platt 🙏

    0

Please sign in to leave a comment.