What's going on Wix Nation MPS here from Wix Training Academy. And 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 down to wixmywebsite.com 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,000 subscribers on the 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.
Creating A Custom Member Profile Registration Process in Wix
Alright, so we're here in our little playground website. What we're going to do is we are going to build this custom registration process. It's going to be a two step registration process. Step one will be where they actually register their a user. So they'll register their email, their password, and they'll create a login for themselves. Step two, where we'll be like an additional step in the process. So they registered 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 two, and then that'll 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 going to do is we're hearing 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 going to do is I am going to go to add and I'm going to go to pages and I'm going to go to registration page. Now I've already created a page, just a page for this. What you're going to do is you're just going to create just a regular page, call it registration, page, call, whatever you want. So I've already laid the foundation, but I haven't added the actual code elements to 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 going to show it again for the purpose of this video.
We're going to go to add, and we're going to go down to user input. When we get there, we're going to just add a text input. So I'm just going to grab this one right here, and then we're going to go ahead and drag it in here. I'm going to get rid of the tool bar. We're going to obviously extend it a little bit. So that's going to be for our email. This is going to be our email one, and then I'm just going to simply copy it and paste it. 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 going to do is we're going to go to settings and we're going to change the type to email. And we're going to 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 going to go to settings on this one, we're going to change type to password. And we're going to say, enter a strong password. 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 Wix CRM. We're going to grab a button and we're going to 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 you have not seen yet.
So now that we've got these fields in here, what I'm going to do is I'm going to open my properties panel back up and I'm going to change the idea these fields for me, it helps stay organized key here. I'm changing the ID show. If you use my code, that's on the Wix Training Academy page and you don't change the IDs to what I changed them to. You're going to have to make sure you adjust it in the code and I'll show you where, but if you do keep the same IDs that I use and you're good, you just use the code as is.
So I'm going to change it to register email, register email. I'm going to change this one to register password, and I'm going to change the submit button to a register now. 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, messy IDs down here, you can see register now. This is the button. Let email. So this is email. This is password registered email, registered 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 going to move into step two in just a second. We are sending them to the profile creation page. And I'm going to 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 going to send them to the profile creation page. So that's the initial registration.
Profile Creation Page
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.
Set up custom permissions who can read content from this collection site member. I'm just assuming here that this is a profile or 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 sure if you guys saw this one yet is a field type rich test. 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, 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 Wix 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 want it 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 going to do is we're going to 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 going to do is you're going to go to ad and you're going to go back down to user input. And I just added user input fields again for the name and the address I added this input field right here.
However, for the bio, that's a rich text editor. I scrolled down and grabbed the rich text box right here. So that's how that works. And then lastly 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. 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 going to delete this dataset so that way I can kind of show you how this works. I'm going to go to tools, toolbar. I'm going to delete that. So now that you've got your fields on this page, what you're going to do is you can see, I changed the if we go to our properties panel, I changed 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 so you can see this one says full name, register. This one says, address, register this one 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 marked out 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 we then need to go ahead and I'm going to delete that button for right now and connect these to our database. So we've got our fields added that 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 member's database.
So we're actually going to go down to content manager. We're going to add content elements, and we are going to click dataset. I apologize for the firetruck in the background. Then we're going to click settings and we are going to 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 going to be right only why, because they're writing in content and that content is 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 dataset, which submits it to the database. So we're going to press connect to data. And we're going to connect this one to full name. We're going to connect this one to address. And you'll know it's connected successfully when this little connected to data button turns green. We are going to connect this one to bio rich text and the last way 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 in match 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 going to grab this one. I'm going to scroll down and guys, I'm not going for design here. I'm going for functionality. So part of my design, and I'm just going to name this create profile.
Now what we're going to 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 registered 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. 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 going to do now is we're going to go back to the content manager. We're going to go to members. We're going to click these three dots and we're going to 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 going to click next and you can actually set your URL here of your dynamic page. So I'm going to 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.
I'm going to 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 onto this page. So I'm going to go in here. I'm going to go to add, and we obviously have a profile picture. That's one of the components here. So what I'm going to do is I'm just going to 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, huh? I'm going to change this to a circle. I'm going to crop it and then I'm also going to change the design here to a circle, just cause I'm a fan of the circular profile page. I'm going to shrink the size down a little bit.
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 going to 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. And so these are the placeholder elements. Then I'm going to copy that one and I'm going to name this one. I'm going to change the styling on it. I'm going to shrink it down, not that much. Address and then I need to grab one more and that is going to be a paragraph and that is going to be for the bio. So I'm going to 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 just like that.
So now here's our sample profile page. 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 dataset. But however, before we do that, we are going to click on our dataset and we're going to 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 going to change it to read-only. And then we're going to come into each of our elements and we're going to connect to data. And we're 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 going to pull the data from the database and display on this page. Text connects to full name, address, connects to de address, and then bio connects to
Bio just like that.
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, except however, this time when successful, we want it to navigate to the member's 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 homepage and I'm just going to, because we're going to publish it there. When it comes to the registration and login in Wix, you can not 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 going to go to button and because we have nothing on our homepage and that's the default page, I'm just going to name this register and I'm going to link it to our registration page. Perfect. I'm going to publish this and we're going to go test it.
Alright, so we got a register. I'm going to click here and that brings us to register your free profile. I'm going to enter test@test.com and then password. I'm just going to do test one, two, three, and then I'm going to click register. And now what should happen is I should click register and it should take me to create a profile.
All right, so now we're going to go ahead and fill out the information on the profile creation page. So I'm just going to come in here add some random test data. We'll just say Berry Farms, we'll add an address. We'll just say it's in Mesa, Arizona. "Hello, I am Berry Farms. Here is what I am". And 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 going to come in here. We're going to add a profile picture. I'll just pick a random one to use, and then we're going to create a 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 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.
Conclusion
If this video helped you out, I kindy ask so you drop a like down below comment number one, you can get on our Wix Nation leaderboard. Every time you comment, you'll be added to the Wix Nation leaderboard manually by me. So it does take a little bit of a delay, but 10 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 of the video turn those bell notifications on. So you never miss a single upload here on Wix Training Academy. And you now plug into 30,000 plus other like-minded entrepreneurs.
If you need the code for this video had to wixmywebsite.com 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 this support and thank you again for helping us hit 30,000. We've got a goal of 50,000 by March 1st, and I need your help to do it.