Sigma Hosting
Menu
Wix Training Academy- https://www.wixtrainingacademy.com/
————————
Are you asking: How do I create a member profile log in/register page in Wix?
A few months back, I made a video very similar to this, but showed you how to create a different style of page that utilized buttons and called the Wix Sign Up/Log In API.
Great news! You don’t have to use Wix’s Sign Up or Log In widget anymore. With a little bit of code, which is provided to you for FREE entirely in the video, you can be utilizing your own member profile log in page.
Now, I understand not all of you will be using this fantastic custom built log in page to re-direct to a member profile page, but I wanted to ensure you are aware that is can re-direct to any page on your website.
I hope you find this Wix Code tutorial helpful and useful.
***I am now available for hire again. My schedule is now open and I am accepting new clients again. To get a project started with me, email info@wixmywebsite.com
————————————————
How To Build A Social Network in Wix – The Non-Coding Founder’s Guide
Series Schedule: (x1 Video Per Week)
Sunday July 15 – Part 1 | The Introduction
Tuesday July 24 – Part 2 | Planning Databases Homepage Design
Tuesday July 31 – Part 3 | Creating Profile Pages and Database Fields
————————————————
Building A Social Network in Wix – The Non-Coding Founder’s Guide
Topics To Be Covered:
-Creating Profile Pages
-Creating Custom Login Pages
-Giving A User Ability To Post An Update And Edit Or Delete It
-Working With Repeaters And Dynamic Pages
-Building Feeds
-Peer-To-Peer Messaging (Direct Messaging)
——————————————————–
Stay Connected:
Email: info@wixmywebsite.com
Twitter: https://twitter.com/WixTraining
Subscribe: Wix Training Academy
Wix Training Academy: https://www.wixtrainingacademy.com/
hello my amazing YouTube family today we are going to build a custom login / registration page / lightbox type of feel 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 wicks 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 weeks 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 you
know I just launched my free Wix training Academy which can be found at Wix training academy.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 which code that I produce 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 gonna 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 login lightbox you would simply press get code and then voila 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 now let’s hop into the tool video itself so we are going to create a custom login and we are going to use a lightbox 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 gonna use
our own custom login lightbox in this case you can make a page too if you wanted but for the example we are going to use a lightbox and what happens is is once we create this lightbox we’re gonna create two fields an email field and a password field and then we’re gonna have a button and I’m gonna 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 which 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 is on the other side of that log in you need to make sure that is set up correctly so in order
to do that we’re just gonna go in here and we’re gonna go to a page I’m gonna go to this testing page and I’m gonna go to the settings when I do that I’m gonna go to permissions and members only and we’re gonna see right here members signup settings well we’re gonna 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 approved but we’re
gonna have it just set to everyone so now we’re gonna click done so this testing page is going to be used as our testing page for after we log in to make sure that people are redirected to this page so I’m gonna just 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 click that button in the example so to do that I’m just simply
gonna add a strip on this page to differentiate it and I’ll just write testing on the strip it’s gonna 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 gonna go in here and I’m just gonna name this testing um I’m kind of particular so I’m gonna make it Center I’m gonna make it bigger we’re gonna utilize this space okay so this testing here is
gonna be our redirect page so after someone logs in they should be redirected to this testing page 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 gonna 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 gonna use a lightbox so we’re gonna come here to add we’re gonna scroll down to lightbox here and then we’re gonna find a lightbox that works best for us in this case I’m gonna use this contact skateboard lightbox I kind of like it like the design now we’re gonna delete this we’re gonna delete this we’re gonna delete this and we’re just gonna say for this register because technically this is a custom registration page
that’s that’s more in particular what this will be used for for people to actually register and then get access straight on to your website so we’re gonna use it as a custom registration page once we’ve got that down we need to go ahead and add our two fields which are going to be email and pass were for the example of this video again these fields are gonna 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 a site member or blah blah blah just requested to be a 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 excuse me link to the Wix erm and a database you can do that but that’s a separate tutorial separate time in this case we’re just gonna have it sync with the Wix CRM not a database – so this information will not be stored in a database it will however go straight to which CRM once again just want to clarify so we’re gonna go here to add and we’re gonna go get our user input fields I’m gonna get this one right here so this
is gonna be our email field and I’m just gonna copy and paste and this will be our password field in addition to both of those we need a button this button is gonna submit and send it to which CRM and also redirect us on click – in this case the testing page now you’re gonna have it redirect to the page that you need it to be redirected to so we’re gonna go ahead and get our button we go to add you can add any button there’s not in particular you
can see I already created this this was my test site before we’re gonna get our button here we’re gonna Center it I’m gonna make it a little wider and I’m gonna go ahead and rename it to register okay so we need to rename that to register we’re gonna leave the button beef right now we’re gonna change these input types one I’m going to change the placeholder text to email and we’re gonna change the type up here to email perfect that complete 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 gonna do the same thing we’re going to come in here change the placeholder text we’re gonna change it to password and then we’re gonna go 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 okay guys so now what we’re gonna do is we’re gonna go back and I’m gonna change the property names so you see here where it says hashtag input one okay so this properties panel this is by the way the first time we’ve really ever
used the properties panel in one of my videos I’m gonna finally introduce it to you this little guy over here is activated when you turn your which code tools on so the properties panel does actually play an important part I know of my videos before kind of downplayed it 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 input one because that is the JavaScript ID I’m
gonna 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 not need to know that this field is hashtag email okay so in this case it’s hashtag email for password I’m gonna change it to hashtag password so what these IDs are is they’re naming tools in the beginning phases I recommend you follow you know exact
IDs that I provide you so that way it’s just easy to follow and easy 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 the redirect location which is easy and I’ll show you how to do so we’re gonna change that on the password and we’re gonna change the button to register so now we have a email password register okay so now we’ve got our 3
button 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 gonna go 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 Webb he originally made a video for
this and inspired me to go ahead and make one for you guys so sake shout their shout out to you great videos as always which 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 witch training academy so we’re gonna import which users from which users this calls that which user which CRM import from which location this is all the back-end wix location stuff so this
is how you get it to the CRM this and that then we have our on ready function so on ready when the lightbox is ready we want the on click function to happen so on click 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 witch CRM following that you see it says dot then then after that
has happened we want Lix location to and this is where that last part lies wicks location to show its dot then so toad is really a bunch of if-then statements so when this happens then we want the user to be redirected in this case to so dot too and then you’ll see mine says backslash test testing so in the code you’re actually gonna use the page extensions so if you have a page and then a sub page it’s gonna be backslash that page backslash
whatever your sub pages 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 view 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 gonna be redirected to that page for a lot of you it’s gonna 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 gonna use this as a tool to go bash last 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’ll 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 parentheses 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 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 gonna have that one no okay but we’re gonna have this light box trigger yes so we’re gonna publish and we’re
gonna go view site and watch this okay so it’s gonna prompt the light box will be triggered maybe okay let’s go double-check this let’s see here what is the triggers for less light box delay aha okay so that was the reason it was set here – what page is this set on it was set on testing page not the home page so we want this to be the home page 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 pop-up so now what we’re gonna do is we’re gonna input the in we’re gonna see if it works so I’m gonna go test at test comm and then the password is gonna be testing click register AHA we’re redirected to that testing page and there we go guys just want to show you the notification test a test com so we can now see is now a site member app 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 login lightbox slash page depending on what you do guys 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 which if this video helps you out drop a like down below guys I love to see those
thumbs ups next thing is don’t forget to comment if you have any questions and don’t forget to subscribe here to wicks training academy turn that notification bell on so you’re notified of our new videos my new videos excuse me and you get these awesome which code tutorials because I have a bunch rollin building a social network in Wix is coming right down the pipe and once again which training academy dot-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 sets line up sign up or login login and then again you’ll be taken to ting 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 used in this video and if you use the same exact fields same exact property names you don’t even have to change a single
line of code you keep it as is and your role with it I hope this video helped you guys out I look forward to catching you on the next one adios