How To Create A Custom Member Profile Registration Process in Wix | Wix Corvid Tutorial

what’s going on wicks nation MPs you’re from wicks Training Academy in today is a very good day why because we just hit 30,000 subscribers on the YouTube channel and to celebrate I’m going to show you guys how to create a custom registration process in Wix before we dive into the content of this video number one thank you thank you so much for your support thank you for being part of Wix nation thank you for everything you do for this
community number two if you’re not yet part of it make sure you click that subscribe button in the bottom right of this video and turn those Bell notifications on so you never miss a single upload and you’ll instantly plug into 30,000 plus other like-minded entrepreneurs so without further ado if you’d like to kind of see some of the code from today’s video you can go up down to Wix my website comm link in the description below and click join the
Academy and you’ll get access to the code snippets there but let’s jump into today’s video which is creating a custom registration process in Wix and also let’s hit that like button we hit 30 thousand subscribers on this channel we have a goal to have 50,000 by March 1st and comment if you’re excited to be part of Wix nation plus you’ll be added to the Wix nation leaderboard alright so we’re here in our little playground website what we’re gonna
do is we are going to build this custom registration process it’s gonna be a two-step registration process step 1 will will be where they actually register their user so they’ll register their email their password and they’ll create a login for themselves step 2 where we’ll be like an additional step in the process so they register their user and then they get to build out their profile so they’ll actually get to build out the profile elements
and that’ll be step 2 and then that will redirect them to their profile page so that’s what we’re going to do in today’s video just a little overview so what we’re gonna do is we’re here in the editor number one obviously always make sure your corvid tools are turned on dev mode is on for me and then what we’re gonna do is I am going to go to add and excuse me I’m gonna go to pages and I’m gonna go to registration page so if I’ve already created
a page just a page for this what you’re gonna do is you’re just gonna create just a regular page call it registration page call it whatever you want so I’ve already laid the foundation but I haven’t added the actual code elements of the page yet so it says register your free profile below got a nice little graphic here and now what we need to do if you’ve followed some of my previous registration tutorials I’ve already shown this several times
but I’m gonna show it again for the purpose of this video well we’re gonna go to add and we’re gonna go down to user input when we get there we’re gonna just add a text input so I’m just gonna grab this one right here and then we’re going to go ahead drag it in here I’m gonna get rid of the toolbar I’m gonna obviously extend it a little bit so that’s gonna be for our email this is gonna be our email one and then I’m just gonna simply copy it and
paste it and didn’t want to so I guess I’m going back to the toolbar I’m going to copy it and I’m going to paste it right below because this is going to be the password so now we’ve got an email and a password field what we’re gonna do is we’re gonna go to settings and we’re gonna change the type to email and we’re gonna change this to enter your email this is going to be a required field because they need it in order to register and we’re gonna
go to settings on this one we’re gonna change type to password and we’re gonna say enter a strong root password don’t want to type and that is also going to be required as well because they need a password so now we’ve got two fields here we’ve got the email we’ve got the password now what we need to do is we need to add a button so that way they can submit this to the WIPP CRM okay so we’re gonna grab a button and we’re gonna just name it
register now some of you have probably seen this before if you’ve watched my previous registration process videos this is step one of the process step two is the part have not seen yet so now that we’ve got these fields in here what I’m gonna do is I’m gonna open my properties panel back up and I’m gonna change the idea of these fields for me it helps stay organized key here I’m changing the ID so if you use my code that’s on the west Shining
Academy page and you don’t change the IDs to what I change them to you’re gonna have to make sure you adjust it in the code and I’ll show you where but if you do keep the same ideas that I use and you’re good you just use the code as is so I’m gonna change this to what am I gonna changes to I’m gonna change it to register email register email I’m gonna change this one to register password and I’m gonna change the submit button to register now
okay so now you can see I’ve got my code panel open below there’s three red dots because we didn’t have these elements on the page before when I click they’ll disappear because now they recognize that the IDS here masse IDs down here you can see register now this is the button let email so this is email this is password registered email register password and it’s basically saying the value of these and then when that happens when they enter the
values and this button is clicked it’s going to submit that and then it’s going to send them to the location in this case we’re gonna move into step two in just a second we’re sending them to the profile creation page and I’m gonna show you that in just a second so essentially what happens is they enter their email they enter their password and then we click create an on-click function for this button and it’s already done down in the code so
just use the code from this video and then all of this is submitted and then once it’s submitted it’s gonna send them to the profile creation page so that’s the initial registration now we’re going to create an additional page for profile creation now I’m going to go to this page I’m actually going to just go ahead and show you so I’ve just created just a regular page again nothing no dynamic nothing yet and it’s called profile creation however
before we can do this profile creation step we need a database to submit this profile information to so what we’re going to do is we’re going to go to Content Manager down here and we’re going to create a new collection we are going to name this collection members and the permissions are going to be custom use setup custom permissions who can read content from this collection site member I’m just assuming here that this is a pro for a website
that members have to be registered in order to see profiles who can create content a site member who can update we want the site member author to be able to update and then we also want the site member author to be able to delete and essentially what that means is the person that creates the content can edit it and delete it if they want and then we’re going to set and create collection now what we need to do is we need to add the fields that are
going to be displayed on the profile page you can see I’ve already added some of these fields so I added full name profile picture bio and address essentially it’s very simple you would just click add field and in this case we’ll just say full name one and then this is going to be a field type text on the other hand the profile picture if I go to manage field is the field type image the bio this is a cool one not sort of you guys saw this one yet
is the field type rich text and essentially what rich text allows is if we double click in here you can actually add styling to your text so it’s not just plain text so you can change your font your font sizes your colors boldness spacing you know paragraph adjusting bullet points you can do all of that so that’s what the rich text editor allows and then lastly address and if we manage field here you can see the field type is address so which has
added an address option that allows you to actually enter a real address and you can connect to Google Maps but you need to have an API key to connect to Google Maps if you wanted to do that so it’s clickable and connect straight to the maps so that is an option as well but these are the four fields we are going to be using for this portion so you set these fields up in your database you add them and then once you’ve added them what we’re gonna
do is we’re gonna go back to the profile creation page now I’ve already added the fields here but it’s very simple just like we did on the registration part what you’re gonna do is you’re gonna go to add and you’re gonna go back down to user input and I just added user input field with fields again for the name and the address I added this input field right here however furby by oh that’s a rich text editor I scroll down and grab the rich text
box right here okay so that’s how that works and then lastly our excuse me for address input which was that second text box you have to use the address input box right here and that is the address input right here okay and then lastly what I did is for our profile picture upload I went to upload button and I grabbed this upload button right here so you add those fields onto the page and then I’m gonna delete this data set so that way I can kind
of show you how this works um I’m gonna go to tools toolbar I’m gonna delete that okay so now that you’ve got your fields on this page what you’re gonna do is you can see I changed the if we go to our properties panel I change the IDs of each of these fields it’s not reflected in the code I’m not using any code currently on this page so you don’t have to worry about changing these IDs if you don’t want but I changed them for the purpose of
keeping everything organized if you’re building a pretty large website with a lot happening it’s good to keep your field IDs really organized you can see this one says full name register this one says address register this one’s bio register and this one’s upload profile picture register this is very clear it means that they’re registering this data and I just mark that in the code so once you’ve got all of your fields added which there’s only
four here we then need to go ahead and excuse me oops we then need to go ahead and I’m gonna delete that button for right now and connect these to our database so we’ve got our fields added that’s step one step two is to actually connect it to the database so that way when the data is submitted it’ll submit back to that members database so we’re actually gonna go down to Content Manager we’re gonna add content elements and we’re gonna click data
set I apologize for the fire truck in the background then we’re gonna click settings and we are gonna connect it to a collection we want to connect to the members database and then we are going to be on write only the mode is gonna be right only why because they’re writing in content and that content submitting to the database we’re not viewing it we’re creating it so it’s write only so we do that and then what we have to do is we have to connect
each of these fields to the database technically to the data set which submits it to the database so we’re gonna press connect to data and we’re gonna connect this one to full name we are going to connect this one to address and you’ll know it’s connected successfully when this little connected the data button turns green we are going to connect this one to bio rich text and then lastly we are going to connect this one to profile picture and as
you can see these connect to each of the fields corresponding fields in the database why because people are filling out this information and it needs to be submitted and matched those fields in the database however we need to give people a way to actually upload it so we have to add a button just like we did on the registration step one and we have to come in here add a button and I’m just gonna grab this one and I’m gonna scroll down and guys
I’m not going for design here I’m going for functionality so part of my design I’m just gonna name this create profile now what we’re gonna do is we have to give this button a submission function so we are also going to connect to data and then click action connects to submit however once this is submitted we want to take them to their profile page so essentially how the steps are working is they register their account and then once their
accounts registered it’s going to take them to this profile creation page this is where they build their profile and then once their profile data has been built we want it to take them to their live profile page so they can see it and they can view it what that means is we need to create a dynamic page for the profile so what we’re gonna do now is we’re gonna go back to the content manager we’re gonna go to members we’re gonna click these three
dots and we’re gonna click add a dynamic page yes it’s that easy and then it’s going to be an item page because it’s one single profile so we’re gonna click Next and you can actually set your URL here of your dynamic page so I’m gonna keep the members portion but we don’t use the title field in the database so I’m actually going to change it to full name so essentially the profile each profile will have its own unique URL and it’ll end with their
full name so it’s recognizable and I’m gonna create the page and then you can see the data set is already added since we went straight to the database and added a dynamic page from the database now what we need to do is we need to bring the corresponding fields on to this page so I’m gonna go in here I’m gonna go to add and we obviously have a profile picture that’s one of the components here so what I’m gonna do is I’m just gonna pull a picture
to use as a placeholder I’ll just pull this one look at this jolly guy right here it looks a little bit like me nah I’m gonna change this to a circle I’m gonna crop it and then also gonna change the design here to a circle just because I’m a fan of the circular profile page I’m gonna shrink the size down a little bit editors a little laggy that’s okay all right so now we’ve got a profile picture now granted these are just placeholder items so how
the dynamic page works is the data will change for each database entry so essentially for each profile these pieces of data will change I’m gonna add the name so what I’m doing right now is I’m building the initial design of the dynamic page and this design will be followed for each and every single profile I’ll actually just go Michael Strout and so these are the placeholder elements then I’m gonna copy that one and I’m gonna name this one I’m
gonna change the styling on it I’m gonna shrink it down not that much address and then I need to grab one more and that is gonna be a paragraph and that is gonna be for the bio so I’m gonna come in here and make it a little bigger I’m going to change the styling and I’m going to space it out a little more BAM just like that okay so now here’s our sample profile page it’s very basic again we’re not going for design here but these are all
placeholder items what we need to do is we need to connect each item to the data set but however before we do that we are going to click on our data set and we’re gonna click settings this time it’s going to be read-only so the mode is going to be read-only because this is a profile page people are just viewing it they’re not updating information on it so we’re gonna change it to read-only and then we’re gonna come in to each of our elements and
we’re gonna connect to data and we are going to image source connects to profile picture and essentially what this does is we are connecting it to the corresponding field in the database except this time it’s gonna pull the data from the database and display on this page text connects to full name address connects to address and then bio connects to bio BAM just like that okay so now we’ve got our dynamic page here now we can go back to our
profile creation page and the reason we had to do that is because we needed after submission a place to send them and we wanted to send them to the profile page so you can see it’s already connected to data it is set to submit accept however this time when successful we want it to navigate to the members full name profile page perfect so now when this information is submitted essentially what’s going to happen is it’s going to submit to the
database and redirect us to the profile page with that data that we just created here to create the profile page so why don’t we go ahead and test it I’m going to number one go to the home page and I’m just gonna because we’re gonna publish it dirt when it comes to the registration and login in Wix you cannot do it in preview mode you can practice it and it will register but it won’t go through all the steps so make sure you go into publish mode
to actually view it strong tip there so I’m gonna go to button and because we have nothing on our homepage and that’s the default page I’m just gonna name this register and I’m going to link it to our registration page perfect I’m gonna publish this and we’re gonna go test it alright so we got our register I’m going to click here and that brings us to register your free profile I’m going to enter test at test comm and then pass for it I’m just
gonna do test one two and three and then I’m gonna click register and now what should happen is that should click register and it should take me to create a profile alright so now we’re going to go ahead and fill out the information on the profile creation Paige so I’m just gonna come in here read add some random test data we’ll just say Berry Farms Latin address we’ll just say it’s in Mesa Arizona hello we are I am Berry Farms here is what I am
then I’ll just put some about me so I’ll just say Wix influencer youtuber coffee enthusiast and some may say because of the coffee enthusiast I’m this ambitious then we’re gonna come in here we’re gonna add profile picture I’ll just pick a random one to use and then we’re going to create profile and voila it takes us to our dynamic profile page just like that so we’ve entered the information and now it took us to the profile page where it’s got
my particular information on the page I believe I even have some database entries already yep some of my other ones that I practiced with so if we go through we can see all the different profile pages here as you scroll through your testing mode so this is pretty cool and that’s how it works and that is a two-step registration process here hey if this video helps you out I would kindly ask that you drop a like down below comment should number one
you can get on our which nation leaderboard every time you comment you’ll be added to the which nation leaderboard manually by me so it does take a little bit of a delay but ten points for a comment 25 points for first comment 30 points for helpful comments so go ahead and comment down below if you enjoyed this video and if this helped you out and lastly make sure you click that subscribe button in the bottom right is video turn those Bell
notifications on so you never miss a single upload here on which training academy and you now plug into 30,000 plus other like-minded entrepreneurs and if you need the code for this video head to which my website comm and register on join the academy email password nothing else no strings attached that’s it thank you guys so much for watching I’m heading back home to Arizona today finals is done I’m completed get a whole month off for winter
break and then I’ll be coming back starting my senior semester thank you guys very much for all the support and thank you again for helping us hit 30,000 we’ve got a goal a 50,000 by March 1st and I need your help to do it