You asked for it and I'm here to deliver, Michael Strauch from wixtrainingacademy.com. And today I'm going to teach you how to build a custom login box or lightbox on your website, in which now, if you remember a couple of weeks ago, actually almost about a month ago now I taught you how to create a custom registration.
I understand that in that video, I use some verbiage that may have been a bit misleading or confusing to you by mentioning login as well. So what I showed you in that video was a custom registration box. In this video, it is the same and I mean, same exact thing, except it's a login lightbox instead. And when I tell you it's the same exact thing, I mean that it's going to be super simple to just simply copy over similar concepts from the registration and put it right into the lightbox for your login.
So let's jump right into it but before we do that, two things, one hit that subscribe button right down below and turn on notifications so that way you're notified when all my new videos come out.
Guys, I just got back to college. So I'm kind of re-grouping here and getting adjusted to classes, all that good stuff. So I apologize for a late delay on this video. And then the social network video is coming out either towards the end of this week, beginning of next week, that's a promise. And then the second thing is to access the code we're going to use in today's video, head over to wixtrainingacademy.com link in the description below. And then once you get there click Academy, and from there, you can actually sign up and register using that same registration code that I showed you in the last video. But instead today, we're going to be logging in and I'll show you where to access the code.
How To Create A Custom Log In Wix
So I'm going to go ahead and log in using the same exact login box that I'm going to show you in the video. I'm going to reference mine and show you how to make it work. And then we click login redirects us based off of the backend Wix user information to the dashboard that I've created here for you guys. And then once we're in here, you have access to this entire Wix Training Academy dashboard with loads of courses, content, webinars, masterminds, a community feature, all that good stuff. But if you're here just for the code, you come down here to code snippets and click code snippets, just like that. And then it's going to redirect us to this code snippet page.
From there, you would simply press get code and copy and paste the login code into what I show you today, which we're going to hop into right now. So you just simply press get code. And then this is the stripe code. You got to change it over for you. And it's going to pop up with the login code. It's going to look just like this registration code, except it's going to be the same thing with login embedded rather than registration embedded. So we're going to X out of that and go to it.
First things first, what you need to do is you need to create a lightbox to create a light box. You go to add, and then what you can do is you come down here to Lightbox in the menu and you simply select whatever one you want. Now I'm going to show you the lightbox that I used for the login for the Wix Training Academy, because ultimately it really does not matter what light box you have because you customize it. So I'm going to come in here, menus and pages, and I'm going to scroll down to lightboxes and I'm going to go to my login lightbox and I'm going to click on it. You can see, I just took one of the light boxes and created a, my own custom lightbox. I put this picture here. I put the text. I did all that good stuff, but what really matters in this case is these three elements right here.
So what we have to do is we have to make sure our Wix code developer tools are on. You can see us as turn off here, which means our developer tools are on. Now what we have to do once we have our lightbox and we've designed it the way we want is we need to go ahead and open up add. And then what you're going to do is you're going to come in here to user input, and you're going to select one of these texts input fields. It doesn't matter which one you select because it's ultimately preference and design to what you like and how you want it to look. But we go ahead and add them when we add them, which these are the result of adding them.
The first one is going to be email. So we're going to come into settings and then we're going to choose the type up here and it's going to be email. And then you're going to have placeholder text here. I put email for mine. Maybe you'll show the format you want that login email to look. It doesn't really matter. Just make sure it's set to required. That's it for that input form or that input box.
Next we have password. So we either copy and paste this field and bring it down and then change the information. Or we go back to add and add it again. We'll come in here to password and we click settings and we're going to choose type password. The reason we do password is because it'll block it out with those little black dots, rather than showing your password each letter by letter in full it's a protective scenario, rather than just showing your entire password. Maybe have people looking over your shoulder, something of the shorts, but you've changed that to password. And then you change your placeholder text. Again, I chose password for mine and for general settings required.
And then the last component is your login now button. So this is going to be whatever button you choose. You simply come in here to add once again, and you go straight down to button and then you could select any button you would like. It doesn't matter. You choose the design, you choose the style button. You choose the colors. You choose all of that. What matters is the function of the button, which I'm about to get into.
So now that we have these three fields here, what you're going to do is you're going to take the code from wixtrainingacademy.com the code snippet region. And you're going to come in here and you're going to simply open our little code manager down here. Once you do that, we have our login lightbox page code right here. This is the same exact code from my website that I've provided you minus this Wix location I put backslash home for you as a placeholder. I'll get to that in just a second.
So when needs to happen is you need to copy and paste this code. And if you want to make it really uber simple for yourself, use the same variables that I used use the same field IDs. So what I mean is, if we go into tools here and we click property panels, what we're going to do, and I'm going to go ahead and hide our other toolbar.
This right here is a field. This ID is what correlates with the code as we did in the registration lightbox. In the registration, I did register register email in the login one, I did login email. So what you need to do is use the same ID as me as it's going to help you just follow along. And it's already set to be pretty standard with a login box. So you go log in capital E because it is case sensitive for the second letter. So whenever there's a second word involved, you always capitalize that second first letter, that second word.
So then you have login email right here, and then you're going to have password. And I did log in password just like that. And then finally the login now button log in now. So if you copy all of these same exact IDs, as I did, you can literally copy and paste the code completely from Wix Training Academy code snippets and not change anything but this one thing, which is this, ‘wixLocation.to’. So mine is dot to backslash Academy dash dashboard because that's the page extension.
So it's whatever your website name is. So blahblahblah.com backslash and then that's what page you need to send them to, depending on whatever page that is for you. Some of it, it will be member profile pages. Some of it, it will just be another page on the website. Some will be dynamic pages. So you need to set that for whatever page you are sending them to, but it's that whatever.com backslash, whatever that is, that's the page you send them to. And that's the words you put here. If it's two words like Academy dashboard, make sure you put a dash in between those.
Other than that, guys, you copy that code straight into here. You see the login. Now that's our button here. And we have an on click function set already done in the code for you. That's the one I copied and pasted for you on the wish journey Academy. And then our log in now button says, when this button is clicked, this is what the code technically says. Let email log in email right here.
As you can see in the code and let password log in password right here, as you can see in the code dot value dot value, and then it'll log in and then it has a redirect, a dot then after they've inputted this information and clicked the button, send them to whatever that page is. And it's that simple. And you saw at work right at the beginning of the video, but just in case you didn't, I'm going to go back and show you one more time how to do that.
Conclusion
If this video helped you guys out, drop a like down below. Comment if you have any questions regarding this guys, I'm here to help you out. That's what I'm here to do. And then don't forget to subscribe, hit that subscribe button below and click that bell icon on. And finally, I'm going to walk through this process one more time to show you one, the login button in light box in action, and also to show you one last time, how to access that code snippet. So we're here at wixtrainingacademy.com link in the description below.
We're going to click log in unless you're not a new member. If you are a new member coming to the Wix training Academy, you need to click Academy and register before you can log in, obviously, because if you don't have an account registered in Wix on my website, it's not going to let you log in. So then we'll click login and then I'll come in here. I'll put my email that I'm registering with and I'll come in here just like that. And then I will click log in now, and it will redirect me.
Now to address some of those important questions that I know people are going to ask one how to reset a password. Great question. And I'm working with Wix on how to get that password reset, function out to you. And I will make an updated video for that specifically, or I will send it to you guys via that weekly email that I sent. And again, you have to be registered for the Wix Training Academy to get that email, but I know that's an important feature. A lot of you want, so we can go ahead and stay tuned for that because it's going to be coming very, very soon. I'm in the process of doing it for my website right now.
So no need to worry about that. I will get that out to you as soon as possible. Other than that guys once again, once you're in the Academy dashboard, you simply come down here to code snippets and then you'll see custom login lightbox and you'll press get code. Copy the code paste it just like we did in this video. And you are set off to the races.
Guys, I hope this video helped you out. Once again, drop a like down below head over to wixtrainingacademy.com and I will see you on our next video, likely building a social network in Wix. Thank you guys. Catch you on the next one.