Hello, my amazing YouTube family! Today, we are going to build a custom login, slash registration page, slash lightbox type of fill. I'll show you when we actually get in and do that now.
Before we actually head into the meat of this video, two things first, if you haven't already, make sure you subscribe to this channel, there are a ton of Wix code tutorials coming. Don't forget to hit that little bell icon to turn on notifications, so you're notified when I release a new video, because sometimes YouTube likes to get a little funky and forgets to notify people, including subscribers. So make sure you turn that on. And then the second thing is, so for all of you that have followed my previous Wix code tutorials, I usually post the code that I use in a Google doc spreadsheet. Well, that method worked, but then a lot of people didn't give access to.
So for any of you that have been following me recently, I just launched my free Wix Training Academy, which can be found out wixtrainingacademy.com link in the description below, that is this website right here, but there is an actual member section of this website. And that's what the whole academy is full of content. In there is where you can now find the code snippets for the videos tutorials of Wix code that I produced now to do this, you go up here to “Academy” and then you'll be prompted to either book a strategy session, call with me or access the Academy. In this case, we're going to access the Academy.
When you're in here, you will then be redirected to your dashboard. There is now been a new button added right over here called code snippets, right under your member profile card, you can go there, click code snippets. And then right here in this today's video “Custom Log In” lightbox, you would simply press “Get Code” and then wallah! Just simply copy the code right from there and you've got your code. And that is how you get access to the code from today's video.
Create A Custom Member Profile Registration Page - Custom Client Registration
Now let's hop into the actual video itself. So we are going to create a custom log in and we are going to use a light box to create this custom login. So why is this unique? What is special about this? Well, instead of using Wix’s generic login page to get redirected to a members’ area, a profile page, anything like that, we're now going to use our own custom login lightbox. In this case, you can make a page two if you wanted.
Using Lightbox
But for the example, we are going to use a lightbox. And what happens is, is once we create this lightbox, we're going to create two fields, an email field, and a password field, and then we're to have a button. I'm going to show you how to do all that in a second, but when that's clicked, what happens is a notification is then sent directly into Wix CRM. So that email is directly added to your site member list.
So first things off the bat, you need to make sure that your site member settings are set correctly. So if you want to approve each new member, you need to make sure it's set up to where you approve each new member. If you want each new member to be automatically approved. So they instantaneously get access to whatever's on the other side of that login, you need to make sure that is set up correctly.
So in order to do that, we're just going to go in here and we're going to a page. I'm going to this “Testing” page and I'm going to the “Settings”. When I do that, I'm going to “Permissions” and “Members only”. And we're going to see right here, “Member sign up settings”. Well, we're going to click that and we want to make sure if that is set to they get instantaneous access, it's set to “Everyone”. If you want to approve each new member, you click “People I approve”, but we're going to have it just set to “Everyone”. So now we're going to click “Done”.
So this testing page is going to be used as our testing page after we log in to make sure that people are redirected to this page. So I'm going to just throw something simple on here just to make it so it's not a blank page. So we know the difference between the home page and the testing page for the redirect purposes after we clicked that button in the example.
So to do that, I'm just simply going to add a “Strip” on this page to differentiate it. And I'll just write testing on the strip. It's going to be nice, clean, easy. This again is used for example in testing purposes. So we know that our code works. You'll see why once we get to that point. So I'm just going in here, I'm just going to name this “TESTING” and I'm kind of particular. So I'm going to make it center, I’m going to make a bigger, we're going to utilize this space. Okay? So this testing here is going to be our redirect page. So after someone logs in, they should be redirected to this testing page.
Creating Lightbox
Now, what we have to do is we actually have to go create our lightbox. This is going to be our custom login lightbox, last page. Again, you can create a page if you'd like, the code applies the exact same. You're going to use the exact same fields. It would just be a page instead of a lightbox. It comes down to preference and how the design and flow of your website works, but we're going to use a lightbox. So we're going to come here to “Add”, we're going to scroll down to “Lightbox” here, and then we're going to find a lightbox that works best for us.
In this case, I'm going to use this contact skateboard box. I kind of like it like the design. Now we're going to delete this. We're going to delete this. We're just going to say for this “REGISTER”, because technically this is a custom registration page. That's more in particular what this will be used for, for people to actually register and then get access straight onto your website. So we're going to use it as a custom registration page.
Once we've got that down, we need to go ahead and add our 2 fields, which are going to be “email” and “password”, for the example of this video. Again, these fields are going to directly correspond into the Wix CRM. So that way it notes that this person is now a site member I'll even show you the notification I received from the Wix app on my phone. Once we test it, you'll see it. It says, blah, blah, blah, just became site member or blah, blah, blah just requested to be site member.
So now we have this register and we need to go actually get our custom input fields. So the nice thing about this guys is the use of databases is not ever needed for this tutorial in particular. However, if you did want to have these buttons or these fields linked to the Wix CRM and a database, you can do that, but that's a separate tutorial, separate time in this case, we're just going to have it sync with the Wix CRM, not a database too, so this information will not be stored in a database. It will, however go straight to Wix CRM once. Again, just want to clarify.
So we're going here to “Add”, and we're going to get our user input fields. I'm going to get this one right here. So this is going to be our email field and I'm just going to copy and paste. And this will be our password field. In addition to both of those, we need a button. This button is going to submit and send it to Wix CRM and also redirect us on click to in this case, the testing page. Now you're going to have it redirect to the page that you needed to be redirected to.
So we're going to go ahead and get our button. We go to “Add”, you can add any button. There's none in particular, you can see, I already created this. This was my test site before. We're going to get our button here. We're going to center it. I'm going to make it a little wider and I'm going ahead and rename it to “REGISTER”. Okay? So we named that register, we're going to leave the button right now. We're going to change these input types. One, I'm going to change the placeholder text to “Email”, and we're going to change the type, up here to “Email” perfect! That field is now done.
The only other things you guys need to do to that field is change the design, if you want but that's not required. Obviously you can use the preloaded design. If you'd like, or you can change it now for the password, we're going to do the same thing. We're going to come in here, change the placeholder text. We're going to change it to password and then we're going here and change the type to “Password”. Password in this type means it will give those little radio dots. So it won't actually show the text. Like it's a password, it'll just show those dots. I'll show you in the example. That's what happens when you change that type to “Password”. So now that's set.
So now what we're going to do is we're going back and I'm going to change the property names. So you see here where it says #input1. Okay, so this “Properties” panel, this is by the way the first time we've really ever used the properties panel. And one of my videos, I'm going to finally introduce it to you. This little guy over here is activated when you turn your Wix code tools on. So the properties panel does actually play an important part.
I know my videos before kind of downplayed. In this video, it's going to be an important part. So where this says ID, you can see when I now click on this, the ID changes to #input1, because that is the JavaScript ID. I'm going to change that ID to “email”. Again, you can change this to whatever you want, but you have to make sure your JavaScript code that I'm about to show you corresponds with this ID and this field. So you need to know that this field is #email. Okay? So in this case, it's #email, for password. I'm going to change it to #password. So, what these IDs are is their naming tools in the beginning phases.
I recommend you follow, exact IDs that I provide you. So that way it's just easy to follow and easy to translate the code over because these are the exact IDs that I used in my code. So that way you guys don't have to change anything in your code, other than a redirect location, which is easy and I'll show you how to do so we're going to change that one to password, and we're going to change the button to “register”.
Adding the Code
So now we have an email, password, register. So now we've got our 3 buttons set, we've got our field set and we've got our IDs set in our properties panel. The last thing we need to do is actually add the code. So I already have the code, as I mentioned once before. I'm going to my previous lightbox, grab that code quick and then explain it to you real fast. So you get a good understanding of what this code is and what it's used for.
By the way, I do want to shout out Future Vision Web. He originally made a video for this and inspired me to go ahead and make one for you guys. So out there shout out to you! Great videos as always, Wix code JavaScript wizard as always. So thank you for that!
So now let me explain this code to you again, this is the code I provided in that, Wix Training Academy. So we're going to import Wix users from wix users, this calls that Wix user, Wix CRM import from Wix location, this is all the backend Wix location stuff. So this is how you get it to the CRM, this and that. Then we have our “onReady function”. So onReady when the lightbox is ready, we want the “onClick function” to happen. So onClick is for this button. So you can see “SW #register”. So when this button is clicked, the following will happen. Email, the value of email and the value of password, so the values inputted in these fields will be sent to the Wix CRM.
Following that, you see it says “.then”, then after that has happened, we want “WixLocation.to”, and this is where that last part lies “WixLocation.to”, so it's dot. So code is really a bunch of if then statement. So when this happens, then we want the user to be redirected in this case “to”. So “.to”, and then you'll see (‘/testing’). So in the code, you're actually going to use the page extensions. So if you have a page and then a sub page, it's going to be backslash that page, backslash whatever your subpages in this case, it's the URL backslash testing, testing is the page they're going to, so you need to make sure this code right here, one, it starts with a backslash and then it corresponds with whatever the SEO, whatever the actual search engine page is when it pops up, it'll say backslash something, when you viewed the live version of that.
So you need to get that backslash something, whatever that backslash is for your website, your pages, that's what you need to put here because after your user clicks this button, they're going to be redirected to that page. For a lot of you, it's going to probably be backslash a profile page, backslash a dynamic page, backslash a dashboard, backslash a members' area. Something like that, not those words in particular, I mean the actual page, it is for you, but likely for most of you, you're going to use this as a tool to go backslash to one of those type of pages. So make sure you correspond that correctly.
If you have any questions about that, please write that in the comments below. So that way I can assist you with it or feel free once you're in the Wix Training Academy to go to our community page and ask the community in our forum, preferably that would be the best method. So that way we can get some interaction between everyone on that forum.
But that is how you do it. That is what this code means. These are the brackets, the in code the parenthesis to end the functions in the code, stuff like that. Again, that is the code that we're going to use for this tutorial. Now let's view it in action. Shall we?
Now I guess I should probably deactivate one of these light boxes and change the trigger. So that way we don't get both of them pop up at once. We're going to have that one. No, okay. But we're going to have this lightbox trigger. Yes, so we're going to publish and we're going to view site and watch this. Okay. So it's going to prompt, the lightbox will be triggered maybe. Let's go double check this, let's see here. What is the trigger for lightbox delay? Aha! So that was the reason it was set here to what page is this set on? It was set on testing page, not the homepage. So we want this to be the homepage for the case of this video. So now if we go publish this, we can go click “View Site” and there will be a delay. And there we go, there is the popup.
So now what we're going to do is we're going to input to see if it works. So I'm going to go test@test.com and then the password is going to be “testing”, click “REGISTER”. Aha! We're redirected to that testing page. And there we go. Guys, just want to show you the notification tests@test.com. So we can now see a site member at video testing. I don't know if you can see that, but I just wanted to show you as an example, there we get them Wix notification immediately, as soon as that happens. And that is our custom log-in Lightbox, slash page, depending on what you do. This is a very powerful tool. It's awesome to have this capability with JavaScript. It's a wonderful, beautiful thing that allows us to create stunning websites with awesome complex functionality in Wix.
Conclusion
If this video helped you out drop a like down below guys, I love to see those thumbs ups. Next thing is, don't forget comment if you have any questions and don't forget to subscribe here to Wix Training Academy, turn that notification bell on. So you're notified of our new videos, my new videos, and you get these awesome Wix code tutorials, because I have a bunch rolling building a social network in Wix is coming right down the pipe.
Once again, wixtrainingacademy.com is where you can find the code snippet. You actually have to go to that Academy page. Once you're there, click that. It'll prompt you to register, says sign up or log in. And then again, you'll be taken to my dashboard page. After that prompt page and click code snippets, come here, get code, and then you'll get that custom login code that we just use in this video. And if you use the same exact field, same exact property names, you don't even have to change a single line of code. You keep it as is and your roll with it.
I hope this video helped you guys out. I look forward to catching you on the next one. Adios!