The FASTEST Way To Build Customizable Profiles In Webflow (Memberstack 2.0)

hey everybody welcome back to the channel today I want to show you how you can create customizable profile Pages inside of your membership sites on webflow let's do it all right so I've been getting a lot of requests lately about how we can create customizable profiles in our membership sites this way our users can go into the profile settings and update their name their bio other fields like that all right so this video is going to pick off exactly where my last video in my membership series ended which I'll have linked down below so if you feel like you're missing something you don't really know how something's set up just go back and watch those videos real fast and you'll be all caught up and ready to go so anyways without further Ado let's hop right in all right so just a very quick catch up here just to get you up to speed real fast remember we have a home page we have a login page a sign up page we have a folder with a couple gated content Pages here and then we have our user dashboards down here in our new members CMS collection template so when I come here I get Welcome Home the name of the member signed in I've added these two Fields here which we're going to be using today where we can update our customized bio and our customized favorite movie then we also have from our last video our custom kpis that are updating live on our site here like this all right so that's kind of where we're starting what is our first step going to be here to create these customizable profiles all right so first thing we want to do is we want to come back into member stack 2.0 here and we're going to add a couple custom fields that we can update on our profile page back in webflow now for this video we want to be able to customize our name so if we want to change our name we can do that and I want to be able to update and edit my bio and my favorite movie all right so to do that first thing we're going to do is we're just going to come here to custom fields and we're going to add some new custom Fields so first we're going to add a bio field and then we're going to add a favorite movie field it's called favorite movie and boom there we go so we we see that we have those two out there like that so that's perfect now the next thing we need to do step number two is we need to come back into webflow and we're going to do a form all right so we're going to use this form to update our profile settings and data back here in member stack okay so whatever we submit here in our profile page we'll update our list back here member stack all right so this is not pretty none of these build-outs have been pretty in this series I apologize for that this is not a design tutorial let's just build the bones out you can make it look however you want all right so we have this super ugly form down here and the first thing we're going to do is we need to link this to member stack all right so we're going to come and grab our form div block here all right not the form block but just our form div block all right and we're going to add a custom attribute to it so we'll come down here to custom attributes and I'm going to type in data Dash Ms Dash form and then value of profile all right so that basically links this form back to member stack 2.0 and is basically calling this our profile updating form all right so now they're talking to each other now you can see in this form I've updated the fields to correspond with our custom fields that we want to update back here so name bio and favorite movie so these can be whatever you want it can be location whatever anything you want so I've made a name field a biofield and a favorite movie field into each of these fields you want to add a custom attribute as well by adding the custom attribute here we're going to link back to these custom Fields here and they're going to be linked and talking to each other so I'm going to come here to my text field I'm going to come down and add a custom attribute and to this one it's going to be data Dash Ms Dash member and the value is going to be whatever the name of your custom field is so to get it easily we can come back to member stack and for my name field I can just click here and hit copy ID to come back and paste it all right so it's just name for that one so data Ms member equals name thing for Bio we're going to come down add a custom attribute data Ms member come back and grab our bio ID which will just be bio paste that in there and then lastly favorite movie same thing add a custom attribute data Ms member and value of favorite movie just copy your ID and boom just like that we now have a profile updating form inside of webflow that is talking and mapped to our custom Fields Back In member stack 2.0 now the next step we want to take is we're almost done I'm going to come up here to name and I want to add a custom attribute to link this to that name field all right there's a couple different ways to do this in my last video we linked it to our CMS collection you can do it that way this way is a little simpler so so we'll just grab this little text box here and we'll just come down to custom attributes and we'll do the same thing data Ms member and whatever custom field you want to populate there for me it's name boom we'll go right there bio we're going to do the same thing so we'll do data Ms member bio and then for favorite movie we'll do the same thing and I'll show you why we're doing this here in a second but essentially when we update that form down below these will update instantly and you can see our customization our profile customization in action right in front of you so we'll add this one in here as well data Ms member favorite Dash movie all right so now we're good to go so let's publish this and test everything out make sure everything is working all right so let's go through the entire workflow here we'll sign up create a new member and then go in and customize our profile make sure everything's working all right so we'll go to sign up and we'll make a new member just like this just a fake little person we'll log in or we'll create our account boom we're brought to our page here all right we'll go to my dashboard page and I'm signed in and boom we can see I'm here on my own Boston Rob dashboard my customized dashboard all right now what I want to be able to do is update my name my bio my favorite movie so in my super ugly form field down here and come down you can see boss drops already pulling in because our form is linked back to member stack all right I can update my bio too I am the Survivor goat and my favorite movie is uh The Godfather and we'll hit submit profile updated we can come up here now and see that boss and Rob I am the Survivor goat The Godfather it's all pulling in just like that so my profile is being updated and customized just like that if I come back to member stack you can see that my boss and Rob item here is also updating perfectly oops with the Godfather in I am the Survivor goat and that's it the last thing I want to show you guys is that we can come in here also and change his name so I can change it to Amber I am actually the Survivor goat and favorite movie of Goodfellas we'll hit submit and you can see that our profile is being customized right here on our member dashboard and so that's it guys that is how you can create customizable member specific profile Pages inside of webflow if you enjoyed this video go down and smash that like button for me I'd really appreciate it if you want to see more videos like this in the future consider subscribing that'd be great our community is growing faster and faster every day and it's super awesome to have you guys here along for the ride so thank you guys again for being here and I'll see you all on the next video peace

Channel: Alex Leischow

Views: 3,852

Keywords:

Id: 1Q9LGu7iBpI

Length: 7min 57sec (477 seconds)

Published: Thu Jan 26 2023