Alright, we've done quite a bit of work on this app, and we've been focusing on the functionality of the inputs, but we haven't really been worried too much about the user experience that our users are having when they're interacting with our forms. And it's kind of getting to me that our forms aren't very pretty, they're not well organized, and so we need to start tackling that right now. So let's show you how Filament can help you organize your forms and make them a lot easier and more visually appealing so that your users have a better time with your app. So let's go back to the Conference resource, and I want to, first thing, let's extract this to a getForm method, because I don't like having it on the resource itself. So this is my Conference, getForm, alright, and let's go to the Conference model,

to a getForm method, because I don't like having it on the resource itself. So this is my Conference, getForm, alright, and let's go to the Conference model, come to the bottom. Alright, so everything is imported now. Let's actually change this datePicker to a dateTimePicker because we do have a start and end time for the Conference, and this checkbox, let's just make it a toggle. And now if we go back to the browser and take a look at what we have here, we want to lay this out a little bit better. Let's say, I think the conference information, the stuff I really care about, let's say I want the conference and the description and the start and end date. So let's just group those four together. So we can do that a couple of ways. The first thing that we can do is we can do a section,

and the start and end date. So let's just group those four together. So we can do that a couple of ways. The first thing that we can do is we can do a section, and let me show you what this looks like. So in the make, you can see that phpStorm is telling me this is the heading. So let's just, we'll call it the conference details. And here we're going to create the schema. So this is very similar to if we go to the Conference resource, when you are creating a form, you have the schema that is defined for your form. And anytime you're breaking your form into smaller sections, you're going to use the schema method to complete that section. So now I can just take these four, cut them and paste them in here, add a comma there. Now let's go back to the UI and take a look at how this changed.

So now I can just take these four, cut them and paste them in here, add a comma there. Now let's go back to the UI and take a look at how this changed. So now I have the conference details in this section, and there is a single column. So maybe I like this. I think maybe the conference name, and it's prominent enough that let's have that take up a full column, but maybe I want this section to have two columns. So let's set two. This helper text, we don't actually need it. And we don't need this helper text that says hello. And for a date time picker, I want these two to be on the same column, sorry, on the same row. So for the name, I'm going to add a column span. So I can either have column span full, and that's going to make sure it takes up the full length, or this is going to do the same thing.

So for the name, I'm going to add a colspan. So I can either have colspan full, and that's going to make sure it takes up the full length, or this is going to do the same thing in this case, colspan of two. So I kind of like this if it's going to be full. This makes it a little more clear to me that I want this to be, just take up the whole width. And then because I have two columns, and I haven't defined a colspan on these, it's going to, by default, take up one. So now if we go back to our browser, we can see the description is here, and the start date and end date are now on one row and two different columns. So we probably also want a location section. So if we go back here, we can make another section, and make this called the location. And in the schema, let's just have the region and the venue. So we'll go ahead and copy that,

So if we go back here, we can make another section, and make this called the location. And in the schema, let's just have the region and the venue. So we'll go ahead and copy that, paste that in there, and add a comma here. If we go back and take a look, so now the region and the venue are right here. Now I do want this not to be on their own row, so we'll just make this section have columns of two. So we come back, and that is looking much better. Now the status and whether it's published, maybe that does make sense to be in the conference details, but we can move it up there, and we can put it as kind of like a subsection within that top section. And so Filament gives us what is called a fieldSet. So if we do a fieldSet, and we'll call this status, that sounds good. Let's make the columns two, and paste that back in.

And so Filament gives us what is called a field set. So if we do a field set, and we'll call this status, that sounds good. Let's make the columns two, and paste that back in. So now if we go back to the browser and take a look, we have the status. Now this looks a little bit weird because it's a toggle, and it's not nearly as tall as this. So we can change that, but you can see that if you want to break up things within a section, you can use this field set here. You could even pull the field set out of the sections. It would just look a little bit disjointed because you're using sections and then field sets. But if you look at this, this is how it would look when it's not inside a section. You might like this better, and you might opt to use a field set as opposed to a section, but let's go ahead and put this back inside the section, and let's actually just make it a single column, and let's put the toggle after the select. So I

a field set as opposed to a section, but let's go ahead and put this back inside the section, and let's actually just make it a single column, and let's put the toggle after the select. So I think this is going to look better. There we go. So the status of it is whether it's draft, published, or archived, and then this is going to control like do we have the website actually launched. Okay, so this is looking a little bit better. Some other things that you can do, again, this is kind of a simple form, but on this section you might need a description. So we can add a description here. So we take a look, and it just gives you a little bit more information there. You might also want to make this look nicer with an icon. This is probably not the icon you want, but you get to pick whichever Heroicon you like. Now you do also have the option to make this look quite a bit different. It's going to look more similar to what you would see in Laravel like Jetstream or Breeze.

whichever Heroicon you like. Now you do also have the option to make this look quite a bit different. It's going to look more similar to what you would see in Laravel like Jetstream or Breeze in the profile if we pass this aside modifier here and go back to the browser. Now you can see the heading is over here with the details, and all of your form inputs are over here. So those are your kind of two options with sections. I'm going to go back to the original version, but wanted you to see what that looks like, and then finally one other modifier here is you can make it collapsible. And this is kind of nice if you have a really long form. You want the users to be able to maybe work on this and then close it, and they can move on to the next one. So that's a nice way to kind of separate some of your information and make it a little bit easier to navigate. If you want to control your form based on the different break

the next one. So that's a nice way to kind of separate some of your information and make it a little bit easier to navigate. If you want to control your form based on the different break points of the browser and make sure it looks good on a tablet or a phone, you do also have the ability to do that. And within this section we have columns, and this is just a number. We said two, but instead what we could do is pass in an array and say for medium we want two, and for large we want three. So now if we go back to the browser and do a little refresh, so now because we're obviously on large, we have three, and if we make it smaller, we will eventually get to the point where there's two columns, which is right there, and then we get bigger, it's back to three. So you do have the ability to control as much as you need to all the different break points and make your form look as nice as it needs to.

and then we get bigger, it's back to three. So you do have the ability to control as much as you need to all the different break points and make your form look as nice as it needs to based on the size of the screen. So I'm going to go back and get rid of this. I think just two is fine for me. Now another option you have instead of breaking it up into sections, because that could have a lot of vertical scrolling, is you can break your form into different tabs, and that will allow the user to go back and forth between the tabs. So let's see what that would look like. Let's start with a tabs component. We're going to make it, and then we have to pass in a method called tabs, and it's going to be an array of the different tabs that we have. So if I make a tab here, and we're going to give it a label, so let's say this one is conference details, and then here is where I pass in the schema. Let's grab this schema here and paste it there. So there's the

here, and we're going to give it a label, so let's say this one is conferenceDetails, and then here is where I pass in the schema. Let's grab this schema here and paste it there. So there's the schema. I'm going to comment that out for a moment, and we'll do the same thing and pull in this schema for the location. So we'll bring this back up. So this is the first tab right here, and then we just need to add a second one. This is the location and our schema. We'll just paste that in like that, and if we go to the browser and refresh, we actually need to change the columnSpan here. So if we go back to the tabs, let's do columnSpan full. There we go. So we have the conferenceDetails right here, and then the location. So you can toggle back and forth in this way. Of course, this location section, because I didn't comment that out, so let's just comment it out, and so there you can see we have the tabs where you can go back and forth and use your form like this.

this location section, because I didn't comment that out, so let's just comment it out, and so there you can see we have the tabs where you can go back and forth and use your form like this. Lastly, there is a wizard, which is very similar to tabs, but it's step-by-step, and you complete one section of the form, move on to the next one. You can also do things on the back end, you know, in between when you move from one section to the next. I'm not going to go through the wizard here, but just be aware if you go to the filament site and you look in the layout, there is documentation on all of this, but the wizard is going to look very, very similar to the tabs, except you're going to have something where you can go step-by-step through the wizard until you get to the end. Now, if you need a more custom layout, you can create a custom layout, and if you wanted to do that, I highly recommend you watch the LayerCast series where Dan builds a custom layout for you.

Now, if you need a more custom layout, you can create a custom layout, and if you wanted to do that, I highly recommend you watch the LayerCast series where Dan builds a custom layout for you. So if you want to learn that, go do that, but most of what Filament gives you out of the box is going to be almost exactly what you need, unless you have a designer telling you it has to be this pixel perfect. Everything looks really beautiful when you're just using the different layout options that are given to you by Filament.