Sometimes it makes sense for you to create your own custom inputs, like we did in the last lesson. And if there's nothing else available, that's really your only option. However, it does mean you have the overhead now of maintaining those inputs. Luckily, besides all the free and open source inputs provided by FormKit, they also provide a number of pro inputs.
Okay, so these pro inputs are going to provide functionality that isn't native to the browser. So all the free open source inputs, you'll notice, are all browser native type kind of inputs. They're things like passwords, number, you know, hidden, things like that, right? But if you wanted something a little different, you could check out some of these pro inputs.
They cover what FormKit calls synthetic input types, okay? So that's things like an autocomplete where you could type in to the input and then it filter down the options list based on you know what you type they also have a date picker component that is coming soon there is a drop down which is a lot like the select input but it provides a few extra features like being able to customize what it what the options look like putting more than just text inside the options you know things that are not possible natively within the browser there's also a rating input a Repeater which we're actually going to look at in this lesson because I think it's really super cool there's also a tag list which is a lot like the view multi select we saw in the last lesson and then finally a toggle now in order to access these pro inputs What you need to do is come to form kit comm slash pro and that'll present you with the page that I have here. Now, at the time of this recording, FormKit Pro is in early access, so you can request access by entering your email address here, and the FormKit team is usually pretty quick to get back to you and get you set up with early access. So just a quick note on the rest of the video, in order to actually follow along, you will have to get this early access.
So you might not have it right away, but feel free to come back and watch this video when you get the access, or just watch the video without following along in your own code base. Either approach you take, I think you're going to be excited about the pro inputs that FormKit offers. Now, I already have my early access account set up, so once I log in, I get a page that looks like this, okay? And the first thing I do here is create a new project.
So a new project in FormKit refers to the place where I want to use FormKit. So in other words, if I create website A and I want to use FormKit as the form service for website A, then it gets a project here inside this dashboard. So our project, I'll just call robust forms course. Okay.
And then for the production domain, This is where we'll ultimately deploy the project. Now, I don't have any plans to deploy this anywhere for this course, so I'll just put in some dummy domain. If you end up using any of the FormKit Pro inputs though, you'll need to make sure that you add a real production domain here if you're actually going to deploy to production. This helps them verify that you're using one project inside of FormKit for one actual project in the real world.
All right. So I'll hit Create Project here, and now I'm presented with some nice getting started points. So we create a brand new project with FormKit pre-installed with Vite, or we could do the same thing with a Nuxt 3 project. But we have an existing project already, so let's come down to this last option here.
We're going to have to modify this just slightly for Nuxt, because this is in the context of just a plain old view application. but the transition really isn't that difficult. Okay, so the first thing we need to do is install the FormKit Pro package. I'll copy that, and then over in my IDE, let's paste that into the terminal.
Great. Next up is to import CreateProApp and the inputs from at FormKit Pro. So then we put that inside of the app's entry file. For us, since we're using Nuxt instead of a regular view application, this is going to be inside of the FormKit config.
Okay, I'll copy and in FormKit config, let's just paste that somewhere near the top. Excellent. I love it when you can just kind of walk through steps like this and copy and paste things, makes things really nice. All right, so now we need to create the pro plugin by passing in our project key.
And that is filled out for us inside of here. So I'll just copy and paste that. Great. By the way, after I finish recording this video, I am going to destroy this project and form kit.
So don't go trying to piggyback off my form kit project. All right. This key will be will be useless for you. Lastly, we'll need to register the pro plugin with form kit.
Cool. Ultimately, we could have. just eliminated this temporary variable altogether, and call this directly inside of plugins, like we did with our other plugins. In fact, I kind of like that better, so let's do that.
Finally, one last thing we need to do is import the styles for the pro inputs. If we were creating our own theme, like we're going to do in the next lesson, we wouldn't have to do this. But since we're using the genesis theme, we need to import the styles for the genesis theme for pro. Now we can start using the pro inputs.
view and then just copy and paste some new markup in our template. I'll do this over the form kit schema. So now we no longer have the form kit schema, but this new form that I've defined, and actually it's not even a whole form, instead it's a form kit repeater input which inside has an email field, a name field, and a isAdmin toggle. Over on the left-hand side, you can see the result of that.
Let me zoom out just a little bit so it's a little easier to see. And now it's plain that we're working with some users where we can duplicate those users and each of those users would have this particular set of inputs. A user can have an email address, a name, and we can mark them as admin or not. Then we can add as many new users as we'd like.
We can also control the order of these and delete them. So in order to see that better, let me add in an email address here. io. And then let's move that one down.
So you'll see now it's down below as the second item. And the what was the second item previously is now above it. We could delete items from this list. And yeah, it's a super friendly way of working with repeatable information.
The data structure for this repeatable field is really nice as well. Let me show you what that looks like. So back in the code here, let me close out my terminal to clear up some space. And then in the code here, I'm going to put a V model.
on my repeater field, we'll say that this now is our form data, okay? And up here for form data, let's change this to an empty array, okay? Then back inside of the template, let me just print out this form data so that we can see it. Awesome.
When I give the page a refresh over here, you can see that our form data is an empty array. With a object inside of it now if I start typing in information into this field Watch up here and see what happens Okay, cool. So now we've got an object with the name Or with the key here matching up with the name of this field and the value being the value Okay, I'll say name here is Daniel Okay, and then is active sure enough becomes true or false up here Then when I add another user, we get another object in this field and we can do its email address and so on and so forth. So yeah, the data structure here for this repeatable field is an array of objects that are within the repeatable.
That's pretty nice. Also notice that we are using the toggle here as well. This is also a pro input. All right.
That about wraps it up for this video on pro inputs. Before we close though, I just wanted to remind you that these pro inputs are totally optional. For some companies, the quality and the ability to start using these inputs in really just a few minutes is a no-brainer. Also, this helps keep the core library free and open source.
For anyone who's not in a position to pay, the core library and the native inputs will always be open source. and free to use. And I'll even let you in on a little secret. Some of these pro inputs are free as well.
Back in the documentation here, if you scroll down and take a look at the pricing, if you use this pay as you go price plan, it starts from zero dollars per input per month. What is from zero dollars? Well, if you use the repeater or the toggle, yeah, you'll be effectively using pro for free. That covers both of the inputs that we used in this lesson.
What this boils down to is that FormKit is really awesome even without Pro, but if you quickly need to add in some new functionality that's not supported by the free version, you can do so for a very reasonable price with very little effort. Sometimes it makes sense for you to create your own custom inputs, like we did in the last lesson. And if there's nothing else available, that's really your only option. However, it does mean you have the overhead now of maintaining those inputs.
Luckily, besides all the free and open source inputs provided by FormKit, they also provide a number of pro inputs. Okay, so these pro inputs are going to provide functionality that isn't native to the browser. So all the free open source inputs, you'll notice, are all browser native type kind of inputs. They're things like passwords, number, you know, hidden, things like that, right?
But if you wanted something a little different, you could check out some of these pro inputs. They cover what FormKit calls synthetic input types, okay? So that's things like an autocomplete where you could type in to the input and then it filter down the options list based on you know what you type they also have a date picker component that is coming soon there is a drop down which is a lot like the select input but it provides a few extra features like being able to customize what it what the options look like putting more than just text inside the options you know things that are not possible natively within the browser there's also a rating input a Repeater which we're actually going to look at in this lesson because I think it's really super cool there's also a tag list which is a lot like the view multi select we saw in the last lesson and then finally a toggle now in order to access these pro inputs What you need to do is come to form kit comm slash pro and that'll present you with the page that I have here. Now, at the time of this recording, FormKit Pro is in early access, so you can request access by entering your email address here, and the FormKit team is usually pretty quick to get back to you and get you set up with early access.
So just a quick note on the rest of the video, in order to actually follow along, you will have to get this early access. So you might not have it right away, but feel free to come back and watch this video when you get the access, or just watch the video without following along in your own code base. Either approach you take, I think you're going to be excited about the pro inputs that FormKit offers. Now, I already have my early access account set up, so once I log in, I get a page that looks like this, okay?
And the first thing I do here is create a new project. So a new project in FormKit refers to the place where I want to use FormKit. So in other words, if I create website A and I want to use FormKit as the form service for website A, then it gets a project here inside this dashboard. So our project, I'll just call robust forms course.
Okay. And then for the production domain, This is where we'll ultimately deploy the project. Now, I don't have any plans to deploy this anywhere for this course, so I'll just put in some dummy domain. If you end up using any of the FormKit Pro inputs though, you'll need to make sure that you add a real production domain here if you're actually going to deploy to production.
This helps them verify that you're using one project inside of FormKit for one actual project in the real world. All right. So I'll hit Create Project here, and now I'm presented with some nice getting started points. So we create a brand new project with FormKit pre-installed with Vite, or we could do the same thing with a Nuxt 3 project.
But we have an existing project already, so let's come down to this last option here. We're going to have to modify this just slightly for Nuxt, because this is in the context of just a plain old view application. but the transition really isn't that difficult. Okay, so the first thing we need to do is install the FormKit Pro package.
I'll copy that, and then over in my IDE, let's paste that into the terminal. Great. Next up is to import CreateProApp and the inputs from at FormKit Pro. So then we put that inside of the app's entry file.
For us, since we're using Nuxt instead of a regular view application, this is going to be inside of the FormKit config. Okay, I'll copy and in FormKit config, let's just paste that somewhere near the top. Excellent. I love it when you can just kind of walk through steps like this and copy and paste things, makes things really nice.
All right, so now we need to create the pro plugin by passing in our project key. And that is filled out for us inside of here. So I'll just copy and paste that. Great.
By the way, after I finish recording this video, I am going to destroy this project and form kit. So don't go trying to piggyback off my form kit project. All right. This key will be will be useless for you.
Lastly, we'll need to register the pro plugin with form kit. Cool. Ultimately, we could have. just eliminated this temporary variable altogether, and call this directly inside of plugins, like we did with our other plugins.
In fact, I kind of like that better, so let's do that. Finally, one last thing we need to do is import the styles for the pro inputs. If we were creating our own theme, like we're going to do in the next lesson, we wouldn't have to do this. But since we're using the genesis theme, we need to import the styles for the genesis theme for pro.
Now we can start using the pro inputs. view and then just copy and paste some new markup in our template. I'll do this over the form kit schema. So now we no longer have the form kit schema, but this new form that I've defined, and actually it's not even a whole form, instead it's a form kit repeater input which inside has an email field, a name field, and a isAdmin toggle.
Over on the left-hand side, you can see the result of that. Let me zoom out just a little bit so it's a little easier to see. And now it's plain that we're working with some users where we can duplicate those users and each of those users would have this particular set of inputs. A user can have an email address, a name, and we can mark them as admin or not.
Then we can add as many new users as we'd like. We can also control the order of these and delete them. So in order to see that better, let me add in an email address here. io.
And then let's move that one down. So you'll see now it's down below as the second item. And the what was the second item previously is now above it. We could delete items from this list.
And yeah, it's a super friendly way of working with repeatable information. The data structure for this repeatable field is really nice as well. Let me show you what that looks like. So back in the code here, let me close out my terminal to clear up some space.
And then in the code here, I'm going to put a V model. on my repeater field, we'll say that this now is our form data, okay? And up here for form data, let's change this to an empty array, okay? Then back inside of the template, let me just print out this form data so that we can see it.
Awesome. When I give the page a refresh over here, you can see that our form data is an empty array. With a object inside of it now if I start typing in information into this field Watch up here and see what happens Okay, cool. So now we've got an object with the name Or with the key here matching up with the name of this field and the value being the value Okay, I'll say name here is Daniel Okay, and then is active sure enough becomes true or false up here Then when I add another user, we get another object in this field and we can do its email address and so on and so forth.
So yeah, the data structure here for this repeatable field is an array of objects that are within the repeatable. That's pretty nice. Also notice that we are using the toggle here as well. This is also a pro input.
All right. That about wraps it up for this video on pro inputs. Before we close though, I just wanted to remind you that these pro inputs are totally optional. For some companies, the quality and the ability to start using these inputs in really just a few minutes is a no-brainer.
Also, this helps keep the core library free and open source. For anyone who's not in a position to pay, the core library and the native inputs will always be open source. and free to use. And I'll even let you in on a little secret.
Some of these pro inputs are free as well. Back in the documentation here, if you scroll down and take a look at the pricing, if you use this pay as you go price plan, it starts from zero dollars per input per month. What is from zero dollars? Well, if you use the repeater or the toggle, yeah, you'll be effectively using pro for free.
That covers both of the inputs that we used in this lesson. What this boils down to is that FormKit is really awesome even without Pro, but if you quickly need to add in some new functionality that's not supported by the free version, you can do so for a very reasonable price with very little effort.