In this episode, we get hands-on and build out a full practical example using a form inside a modal. We start with a simple notes page, which at first just lists notes (or shows "no notes" if there aren't any), and has a button intended to trigger a modal. Right now, that button doesn't do anything—so that's where we jump in!
First, we set up the appropriate backend controller and route to power the modal for creating a new note. Instead of just placing a form on the page, we structure things so that the form appears right inside the modal. We wire everything up: the modal opens when you click the button, it shows a simple form, and submitting this form creates the note on the backend and then redirects you back to the main notes page.
We walk through hooking the form up to Inertia's useForm
composable, binding the input to form state, and handling the submission. Crucially, after creating a note, we rely on a redirect to the main index, which has the effect of closing the modal and showing our updated list of notes—with no manual cleanup required.
This demonstrates a really simple way to use modals for CRUD operations, and shows why the combination of routing, inertia, and modals makes for a super smooth user experience. By the end, you’ll see how easy it is to trigger modals, submit forms, and update your UI—all with minimal fuss.