KreativePro Masterclass
Hello, {first_name}
Sign Up
Learn to Build Websites with Craft Cms
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Sign Up Template

On this Craft Cms lesson we review the user registration syntax and apply it to our own sign up template.


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

Hey guys, welcome to the third module of this craft CMS course.
All right on our previous lesson of introduction to HTML, we took a look at some of the basic syntax of HTML and forms. Now what we're going to do is make those forms functional. And luckily we have Craft to help us with some templates.
We're going to do this in a series of steps, so that it's easier for us to follow. The very first thing we're going to do is of course, upgrading to a pro account using the free trial locally. So all we have to do is go over to the plugin store and then click on the Craft upgrade and simply click on trial.
That we'll install a temporary version of the pro license into our local environment. So we can get access to unlimited user accounts and a series of other cool features. Once we've done that you should see on the side menu, you will have graph QL and the user section. So if you click on that, you would see that your own admin account is now accessible.
All right. Great. Once we have that, all we have to do now is create a simple layout for our sign-up page. I've created that in isolation. So I removed the navigation and only kept the simple fields like this. Once you export that code, what we want to do is clean it up and only focus on the actual signup.
I've duplicated the layout that we had originally created, and all I've done is I've called it clean, and just simply removed the footer and the nav bar.
All right. And so by doing that, I can just focus on the actual content, which is in this case, the sign up form, I've created a folder called account and inside that I've dropped in a signup twig template.
So you can see it right here. It's extending to the clean. All right. So if you can see here, the signup is inside the block content. And let's just go ahead and find the fields first. So what I've done is I cleaned it up, if I toggle any of these, we can see this is the header and we have a field set for the email address.
And I want to just go through each one of these fields with the tweaks and tacks that craft provides. All right. So if we head over to the craft documentation under  templating examples, we can see that craft gives us a simple template. We can simply copy this. And paste it into our visual studio code.
What I want to do is just go over through each one of those syntax. All right. So let's focus first on the basic ones under form. We have a token that is required for security. That's added under the form field. We have the action of where the script lives of what craft is going to do with that data.
And then we have a redirectional URL. So this is where the users get taken to once they click submit, we'll see that in a little bit. Then under each field, we're just going to have some basic. Information like the name, we need to match it with the exact thing that appears on the syntax. So over here, if you look at the syntax for email, they have name and then that equals email.
It's very, very simple. All we have to do is make sure we copy the ID. We make sure that the type and the name are matching exactly how on the template appears.
And we're going to do that same thing with all the other fields. So making sure that username has the name username. And for the password, we have the name password pretty straightforward.
All right. But when you click submit, what happens if there's an error, maybe the email for example, is duplicated in the database. What happens then? How do we output that error? That's where macros come in. So you see here, this has a conditional that's verifying if that user exists, then I'll put some errors over here using this macro function.
And what it's doing is just calling this function from over here. This is the macro template. So all it's doing, it's saying, okay, if there's any errors found loop through and output this tag, and all we want to do is make sure that we have that conditional under each field and we change the actual content of the errors to be aligned with the name. So in this case, username and password have to match. Pretty straightforward.
One really cool thing that craft has is that it allows to verify if that email address exists. And that's why we had to create our transactional emails settings prior to this step, so that the actual email that's inviting the user to activate the account gets to their inbox.
So again, I've created a simple template called verify and inside that verify, this is where we want the users to go to, once they click submit. So almost please check your inbox to verify your account.
So the next thing we want to go do is under our settings.
We want to make sure we have a volume created for the images and profile avatar that the user will eventually have on their account. And I've gone ahead and created one called user profile. And we just repeat the same idea that we had before. We create that from the variables. So what I've done here under sub folder is just added a user/ so that any time it user it gets added, they will get added under that folder.
If you click on assets, we're going to see that here under user profile, and then any new users will then have their own little folder. Like I have done right here. And finally, we want to go to the settings. And click users. So what we want to do is make sure we have a user group called public where any user that is created gets added immediately into, and we can see here, we have some permissions.
We can give them access to the control panel. If we wanted to, we could even let them create new entries. But in this instance, we want to go to the volumes and under user profile, which is the volume we just created, tick the boxes to allow them to upload files. This will give the user permission to upload their profile photo.
When we get to that in another lesson. If we go back outside the groups, we can click on settings. And what we want to do is make sure that the location of that user profile photo is on our correct volume. And one really cool thing here is we can use their username as the variable with the forward slash to make a sub folder.
So similar to what we just saw on the assets section, we want to make sure we verify their email address. So that's why we've created a verified twig template, and we want to toggle the allow public registration so that they can be added into the public group. Let's go ahead and sign up. All right. So you should now have that user added into the user section as a pending.
So notice that the little orange shows pending and this one shows green, they'll have to activate their email in order for them to appear status as active. We can manually send them an email using the cog wheel on their profile accounts, or we can activate the account directly from here.
All right. You're probably wondering where does that template is? Of the actual text message that is sent to the users. If you go over to utilities. And under system messages, you will see that you have multiple templates here that you can modify. So when someone creates an account, when someone changes their email address, or someone forgets their password, you can change this and add this with your custom message.
All right, guys. So that's pretty much it for creating a signup form. Let's jump into the next lesson to take a look at the login and reset template.

Coming Soon

Designers ultimate weapon of choice
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...