hello everyone code queena Yeley have you missed me I've missed you too I hope that you're ready for this video because I'm going to show you how to create your own custom login for Wix before I get started I want to remind you to visit my website go to totally quotable com where you will find many many resources it has all the links to our Wix code community to the tutorials to my Instagram Twitter and Facebook page make sure you join make sure you follow because we're always posting announcements the latest features the latest who did what and where and if you ever get stuck with a Wix code project or a Wix code question remember that they are experts available that you can hire I'm also available just click on the higher code cream button and you can contact me directly you can also find designers and you'll have the direct link to the Support Center which is actually where we're going to do our tutorial today so if you hit that button and you click visit support you're gonna land on support dot totally codable dot-com this knowledge base is infused with Wix code snippets article tutorials and troubleshooting tips of all kinds these articles and these codes are made by me they're made by the community one of our top featured coders this month is Salman Cates from our totally codable Facebook groups to make sure that you say hi and tell him that you heard his name in one of my videos you will see some of his articles on here too click on the search bar so we can find the article that we're going to be working with today so type in the word login you'll see that it does an auto smart search and it auto suggest all the possible articles that you might be interested in we only want one today so click on the one that says custom login sign on screen do you remember what the Wix login looks like that native white giant screen let me show it to you here it is that's all it is it's a big white screen right now whenever you want a member to log into your website they not only log into the page that they're on but they're logging into your entire website they have one screen to do it in which is Wix it's gonna look the same it's one window but there's no way to customize at the moment you can however change this you can create a new design and a little bit of code activated and voila you have your own custom screen let me show you what that looks like this is one of my websites totally shoppable comm related I don't know if you click on the button that's in the corner that says register slash account you'll see that a custom login screen pops up on the side it has a place for your email and your password and the enter button it also has the button that says register here and forgot password so that if I accidentally forgot my password I can reset it here unfortunately there's only one way to reset the password and that's using the native Wix screen so this will still come up the same but at least you get everything else that's nice and customized right let's go back to the article from here if you scroll down it's gonna give you some tips of what you need to know what to do before we begin most of you already know to turn on the developer tools you do that here go to code turn on tools then you start adding your elements to the lightbox you click on the side panel go to user input and drag and drop some text elements you'll need to for the sign on email and password now we configure and customize the elements click on an element and select the settings make sure that the password is set to password type and it is also set to required then for the email make sure you click on the study Nikon one more time set the type to email and then required it's always good to add a little bit of design for the error setting so click on the little paintbrush select the drop down find the word air and start designing what that error will look like after you're done with that we start configuring the properties panel of each element you turn on the properties panel on the same menu bar that you turned on the developer tools or just right-click the element and select view properties that'll bring up this little panel from here click on the ided section and change the idea why do we want to change the ID because it'll be easier for us to identify in the code so the first one in my example I put it as email and make sure you do this for all the elements here's one example of what it would look like for the email you do the same thing for password and I recommend you do the same thing for the button the button so you add a button because we need to submit the information you can label it whatever you want for my example I labeled it enter so once they click on the enter button they enter the website notice how underneath the login button there is a text that looks like it's scratched out well all these little diagonal lines it just means that this element is collapsed so I added a regular text I set it to collapse onload within the properties panel see this hidden unloaded and collapsed on load I selected this one for my text element because I'm gonna use that later as an error message now underneath that I added another button a regular button notice that I did not link it to anything but I did change the name to forgot password this one will be triggered via the code so that way as soon as the person clicks it it'll prompt the forgot password window and when I said via the code I mean everything will be through the code I will not activate the on click event in the properties panel so don't do it hmm now that you've added everything you're ready to copy and paste the code to your page so go ahead and highlight all of this don't do that highlight all of this and paste it onto your page let's go to the editor to show you what that looks like I'm going to find my light box on the bottom I'm gonna click maximize and I'll paste my code here and now you're ready to start editing your code to match your IDs and whatever I'll see you change the name of understanding the code and modifying it is very very important we're basically using the unready function so that when the page is ready and when somebody clicks on the forgot password button I want it to prompt the forgot password window and that's all that giant piece of code says that's it then on the bottom for the login button you do activate the onclick event and once you do it'll perform this down here we're going to grab the email and password so we created a variable let email and let password and then we're gonna get what those values are and notice on line 23 it says Wix users dot login email comma password well these are the same variables that we listed up here so if you change those variables make sure that you match them on line 23 as well then on line 26 I'm gonna go ahead and redirect the person to a specific page after they have successfully logged in so it's important to change this URL ending if you want to do the same thing so instead of slash account slash my – account you enter your URL maybe you just want to send them to the home page or if you don't want to do that at all delete the whole line and add your new code on line 30 is where you'll see the error message I labeled mine error message and I told it to expand so that's why it says error message dot expand because at the beginning I told that same text element to be collapsed onload now you're not done after you modify your code we go to the last step which is activating your login window to do this you go to the side menu find the pages where it says member pages and then look for member signup settings click on that in tiny little blue letters you're going to see edit custom signup once you click on that it'll open up two things one enable custom signup should be on and then you're going to select the lightbox that you want to connect it to notice that only light boxes are allowed to be connected to the login window so you cannot create your login on a page it has to be a lightbox from the drop-down select the correct light box and click done after you click done make sure to click Save so that way it saves your new signup settings once you're done saving don't forget to save and publish your site to make it live and that's it you're done that was super easy right once you master the login code and you want to tackle the registration then go ahead and look for that article down here in the related content section at the bottom of the page if you still need help then I have a list of recommended expert coders click on that button to view the code experts on totally codable comm I'm there too you can contact me if you need to but there are some amazing expert coders that are available all you have to do is find one click on their name read their information and give them an email not give them a call well that's it for today if you have any questions make sure to join the totally quotable Facebook group to post your questions and have the community help you there's over 1300 members so I'm pretty sure your chances are good to find your answer I'll see you soon .
These are the links you will need to follow the Code Queen video:
Link to Wix API:
Code Snippets: www.totallycodable.com/tutorials
Contact Code Queen: www.codequeen.co
Totally Codable Logo by:
Code Queen logo by:
Video Intro by: Code Queen