create a modern form with sveltekit superforms and tailwindcss

hey there welcome back to another video my name is nef I'm a Def and today I want to show you how to build a super modern form with spell kid super forms and Zod we are going to start in our terminal and we're going to type in bun create SP at latest form tutorial going to enter skeleton project we use typescript is lint prettier and then we're going to go code from tutorial which will open up this one and then we can install BN in install make this a developer dependency spel kid super forms and Zod now we can go ahead and do bun install DD tnd CSS post CSS Auto prefixer right now and then and uh bun X Tailwind CSS init DP like that one we go into our twin config file and do do slash um SRC slash um everything slash everything do um JS TS swelt HTML uh let's go and do Bev and see what it looks like uh nothing styled yet because we also need to um set up app.css um at Twi base components and utilities like that and then in our root we're going to import import do do slash at. CSS now uh class uh uh text red 500 SD does not work yet what did I do wrong so we now got our basic twin setup done next thing we're going to do is create a new file call that plus page. server. DS and do kit load or export const load this is uh type page page server load this is asynchronous and in here we're going to go ahead and do con schema no actually let's just put this schema in here const schema Z do schema let's import Zod import Z from Zod z. schema and now in here we can go ahead and put some columns for example name equals Z do string actually there's something wrong it's C doob and c. string we're going to make this a minimum of of three characters and the message is going to be is this really your name um and then we're going to go with email is z do uh email no c. string. email in message is also a c. string um with Min uh through with minan of five um put in a meaningful message so now what we're going to do is const form is equals to await super validate uh which we need to import super validate from zelt kit super forms and we also want to import Zod Zod from spelet Super forms slash adapters because we want to pass in here our Zod and then our schema scha oh there's a little typo um yeah so then we can return our form and in our our page we can do export let Data Page data uh no page data and import that one what is up with my imports import type page data from SL dollar sign types oh okay yeah we because I need to do Lang TS now everything should work right yes so now uh let's build our form so we're going to do a form tag right here and do method is post and we want to go with a few inputs this one is of type email now let's see how this looks we can obviously see nothing uh class PG slate 800 uh with full uh H screen uh screen let's see how that looks perfect and now let's style all these inputs um give them a petting of Two and a what do we give them to uh rounded LG let's see how this looks nice and give this a class of flex Flex call uh Gap two and make this with Min yep so now let's do some divs and yeah basically we're going to do label no we first need to name these so name is equals to uh name a little bit stupid but it's like that then this name is email and this name is message and now we're going to go with label for name uh we're going to go with name copy this line base it in here email email uh wa text white and make this text black and this one is message yeah cool uh looks nice let's give this a bit of padding padding for uh Flex justify Center just that we have it in the center make it a bit bigger nice so now we can actually go ahead and do const then we do form is equals to Super form now it Imports perfect and we pass in data. form so now in our input we can go is with bind value and in here we go with dollar sign form. name and then dollar sign form. email dollar sign form. message so we tracked all of these uh one important thing that we missed is a button uh submit which will actually submit the form uh let's give this some class as well uh BG Sky 400 padding 2 rounded LG and MX Auto so that it's a bit smaller and Mt of for so that we have some little more space to breathe yeah now we can go and do enhance and for this form we're going to do use enhance which progressively enhances the form which uh gives it the functionalities of a modern form if I'm honest I don't know what that means but they say use it so I'm going to use it now next thing we need a form action export con actions is a type of action and it is also and it is an object with default uh async or is it actions yeah it's actions not action whoops and we got this default and in here we're going to destructure request and now if we go ahead and do on form iswait super validate and then Zod schema and in here we need to pass in the request so now if we console.log the form we should see hello let's submit the form the ID of the form uh if it is valid if it is posted the errors and the data so now if we would do that one do and that one we see valid is false because we got this error name is is really your name and this is the next thing we're going to implement the error catching this is very cool so we can do um is go ahead and do errors so we can do hash if errors dot um no errors because it is a how is it called a store do email no. name we're going to just uh render span with dollar sign errors. name now let's just copy that over here as well and now if we again no let's actually make them rare class text red 500 now if we submit okay well now it doesn't work so yeah this is because we need to return the form before so uh if something goes wrong so if and then form. valid which is a Boolean as you can see here um we return a fail uh of 400 and we're going to return the form and we we need to import that from spell kit and now if we again do that one is this really your name is this really your name is this really your name oh yeah because it's email email and here it is message and message now if we again do this yeah this is really your name invalid email put in a meaningful message this is correct so now one thing we can do is message and then yeah else we can do return message from spell kit super forms form and then form submitted mitted like that and now of course there is no such thing so we need to put in Neville contact at Neville [Applause] br.com and then message is hello world now if we submit okay well there is no um message because we need to render that of course so we already destructured that from here so the only thing holding us back really is putting that in here # if dollar sign message we do a little span and put in the message Neville contact and at Nev br.com put in if uniform oh yeah it needs to be longer hello world form submitted perfect and yeah that's basically how everything works it is a very simple process and a very easy process you can easily like make db. query or like db. insert something like that and then destructure that because form. uh data we can do form. dat do email const email is formed that data. email and then can console Lo the email for example and then it will just show the email and we can do all kinds of stuff with that like insert it into the database and stuff yeah really cool I love swell kit super forms it like help me a lot with dealing with forms and yeah I hope you like today's video if so leave a like And subscribe to this Channel and we will see us on Sunday bye

Channel: Nev the Dev

Views: 202

Keywords: sveltekit, web development, svelte, typescript, javascript, drizzle orm

Id: PlLeL-FI004

Length: 14min 38sec (878 seconds)

Published: Wed Apr 03 2024