Building A Social Network in Wix | Part 4 | Custom Registration | Non Coding Founder’s Guide

building a social network in which part for guys are you excited I hope you are I know this has been heavily requested let me start by apologizing I told you guys that I’d be uploading this series once a week and coming back to college has prohibited me a little bit with some time constraints of getting back to classes moving in extracurricular organizations all that fun stuff so I apologize right off the bat for that what I will tell you is
that I’m gonna work my hardest to get this next part for each new part of this building a social network in which series out as fast as possible you can count on at least two a month to come out so you can at least count on you know part 5 part 6 to come out between now and October so so we can move on from that next thing is if you’ve been following along with me I’ve been still sending out my weekly emails each week you can get there from which
training academy comm you could go to the blog get started sign up on the email list but you’re gonna need to be here anyway because this is where you’re gonna access some of the code for today’s video so in today’s video we’re going to work on creating the registration box for our social network in which we’re gonna keep it very simple we still have to build out our user statuses for our profile pages and still build out those profile pages but
an important aspect to social networks is actually having that registration log in every order that registration page and also log in we’re gonna do log in on a separate video where we’re gonna focus on and that’ll be in the next part where we’re gonna focus on login and user statuses so that’s gonna be a longer series video in that one um so make sure you’re aware to have set aside some time for that next part of our series but for today we’re
gonna work on just the registration portion so to access our code in the video that we’re gonna utilize which I’ve created a couple videos on my youtube channel just recently about these topics you’re gonna come here to which training academy comm link in the description below and if you’re already a member on there first congratulations thumbs up to that in fact subscribe down below on YouTube if you’re already a member of the witch training
academy and you click login and that will prompt you to login however if you’re not one of our awesome members in the community yet hit academy and go ahead and register for the witch training academy because you’re gonna find the code we used in today’s video today’s video on the other side of this registration like box so I am a member obviously hopefully I would be and I’m gonna go ahead and log in and show you how to access the code from
today’s video so that way you can follow along completely let’s see probably typed in my password wrong okay there we go so now we are redirected to the witch training academy dashboard guys feel free to go through here you got a road map a library full of webinars courses resources full of checklist courses everything by the way the part 4 checklist will be on this resources page for this series the masterminds community all that good stuff but
to access the code snippets we scroll down a little bit to this right side and click code snippets and today we are gonna be used a lot utilizing this custom registration lightbox code we’re gonna press get code and then we simply copy it from here and paste it in to where I show you when we need it but enough on that for the moment that’s how you access the code let’s hop into our social network website so I went ahead and marked this as home
page since we don’t have any content on it yet and I also marked a test testing page that we’re gonna use to utilize our whole registration process in this video so guys when building a registration page or light box you can choose one of those two methods they require the same page code and you’re going to use the same fields but one is a page some of you may have a more interactive social network that you want to take them through a whole page
personally I know you guys my audience that watches my stuff just wants to says that content as quick as possible so I just have a simple light box pops it up there you log in and then they access to which training academy it doesn’t really matter it comes down to preference and what you feel is gonna be best for your audience in this video I’m gonna show you the light box method because that’s the one I personally like to use but again if you
want to go ahead and worry about designing a in actual login or registration page go for that now for this in particular tutorial we’re gonna be registering the users email and password it’s gonna be very simple we may go back and actually add some more details like post registration so right after they register take them to a registration page where they may even put their first name all that good stuff but they actually build out their profile
I haven’t decided how we’re gonna go about doing that as I said you guys are along with me I’m building this social network from scratch so things can change on a dime I’m kind of picturing like okay we need this we need this we need this and then if I do decide okay this is a big change I’ll throw it in one of the parts of this series so that way you can see how we go about changing and executing that so we have our homepage here I went ahead
and created our lightbox already and I called it registration lightbox it’s right here I built it out it’s very easy to do to add a lightbox guys you go over here to add you scroll down to lightbox I started with this lightbox right here you click that you click on here one of the big things you got to do is when you click on the lightbox go to the settings and make sure automatically display on lightbox pages is know so that way as soon as
someone hits your website the lightbox doesn’t automatically pop up but instead someone actually has to click a button so maybe register and then it’ll pop up so it’ll be on click so when something happens on click the function will be carried out open the lightbox simple as that and then I just dragged in a picture I created a blue box here just real register and then this is where we get into the detail now so that code from the witch training
academy you can want gonna want to copy that and paste that I have already pasted it here let me explain to you how this works what we need here is we need to actually go in here and set our fields so I’m gonna go ahead and delete these and show you how we go ahead and do that so we need two fields we need our email field in our password field to do that you’re gonna come in here to add you’re gonna go to user input you can choose which one of
these text inputs you want I’m just gonna click this one I’m gonna drag it down obviously Center it a little bit and then I’m gonna copy it and paste it and then we also need a button for the register now button so that way as soon as they click that the information is submitted to the witch CRM and they are officially a registered site member so we’ll just come down here to button and we’ll click this button right here simple as that add it now
what we need to do is we actually have to edit the settings for this field so we’ll come into this first field click settings and we want to type to be email because we want it to come through in an email format because that’s what has to be submitted into the witch CRM an email format and then we’re gonna change the placeholder text to email then we’re gonna change the settings for this one and we want the type to be password this is in case
someone’s you know watching over your shoulder or something like that it creates those black little radio buttons each time you put in a new letter so that way it keeps your password secret and protected and we’re just gonna put password right here and those to our required fields and then right here we’re just gonna name this register now now what we need to do is we need to start correlating these three fields with the code so if you see right
here I would follow the names that I have used in my code so that way you can just simply follow along and these are the IDS that I would recommend using because it keeps everything pretty neat and pretty straightforward so what we need to do is we need to assign an ID to each of these three fields why because as you can see in the code right here when this button which the ID needs to be changed to register now is clicked it needs to know what
that register now ID is correlating to so we’re gonna change the button to register now and then BAM just like that we’ve got our button changed to register now that correlates right here in the code you can see our error disappeared for that you now see there’s an error right here for registered email and an error right here for register password the reason for that is because the inputs are the field IDs don’t correlate here with decode IDs so
we need to make sure they both correlate so email we’re gonna go up here I’m gonna click email and then we’re gonna go over here to our properties panel and we’re gonna change it to register email just as it is in the code and then if we click back down here you’ll see that little red button disappeared from that one because the code now recognizes it correlates with this register email and we’re gonna do the same exact thing right here for
password we’re gonna click register password and if we click back let’s see here oh well let’s make sure it’s spelled right in our code register password and now you can see that red dot has disappeared because it correlates so now let me explain to you a little bit about how this code works what happens is essentially what this code is saying is it imports which user so it’s importing from the Wix back-end so when this is submitted it’s
importing into that and then the function is as soon as this button is clicked as soon as register now button is clicked on click let email whatever’s in this field dot value and whatever is in burn field value register Wix users dot register register an account as a site member and then once they’ve been registered take them to which location dot – backslash testing in this case you need to do whatever your page extension is that you’re sending
them to so typically for our social network it’s gonna be sent to a profile page however our profile page is not yet completely built out which is why partially I’m saving the log in whole portion of this video to go with the user statuses and profile page completion because I want to show you how that works because right now we’re gonna keep this testing the page extension is testing how we can tell what the page extension is go to the page you
want to look at go here to your site menu testing go to page SEO and you’ll see its back slash testing so that’s your page that you’re sending them to ok and it is gonna be different for each of you some of you are gonna be sending them to a static page in this case we are not we’re gonna be sending them to our we are in this case we’re sending them to the testing page however as soon as our profile pages are built out I’m gonna show you in an
update video how to change this so that it sends them to the correct profile page we’re gonna use the current user dot which are which users dot current user dot ID method and I’ll show you how that works but at first we’re gonna use a static page for the purpose of explaining this video and then as soon as our profile pages are done and built out which we’ll do in our next couple of parts in this series we’ll go ahead and utilize those as well
so we’ll send it to testing and you saw that it was that testing page now we should be able to go ahead and press publish view site as soon as we get it and test this out so we’re here at home oh yeah we obviously have to create a trigger for the lightbox to appear so let’s just we’re gonna use a sample piece of text here let’s just go in here click this right here and then we’ll just type in register and then we’ll link it to the registration
lightbox just like that now if we click publish and view site what will happen is we’ll click register it’ll prompt our lightbox here our registration lightbox and we’ll go test at test e-comm and then we’ll just go test one two three as a password now what should happen here is when I click register now one I should get a notification to my phone through the Wix app which if you don’t have it I recommend to get the which app that says there’s a
new site member in my social network website and then as soon as that happens simultaneously we should be redirected to the testing page so let’s see if that’s what happens bingo so we’re redirected there and we’ve got our notification right there that we were just became a member at social network which is what this is called and we were redirected to the testing page so now this person has officially become a site member of your social network
we’ll get into the login details and also building out those status pages and user statuses and profile pages in our next part of this series guys if this video was helpful please throw me a thumbs up comment if you have any questions at all I know you’re probably already all anxious and excited to see part 5 of this series which is gonna be fun and exciting but until then I appreciate your patience thus far and working with me coming back to
college has been fantastic but it’s definitely kept me a little bit more busy than I was in the summer producing these videos each and every week so I do appreciate your patience subscribe here if you haven’t already and don’t forget to head over to the wicks training academy comm so that way you can access the code we used in today’s video I appreciate all of you I appreciate what you’re doing for this community and I appreciate you guys being
part of my community we have something special here and it just continues to grow and I love pushing this content out to you guys so that way you can continue to develop your skills and talents within which once again I will catch you on our next video which will be part 5 of building a social network in which check that resources page in the which training academy for the part 4 checklist that I will upload following this video thank you guys
very much and I will see you on the next one