Form submission (Form Actions) in Sveltekit

as I said in the previous one we are going to look at this contact form so in swaddle kit 1.0 the best feature that's been added is uh swelled actions so I I really like it so at actions makes this firm uh very native to HTML forms and it also makes it even better uh even without JavaScript anyway so let's let's look at how to create one so in our contact page however it's empty uh we're gonna create a contact form but before that I see that this hero uh is being used on every single page so let's Maybe move that to layout um so I'm guessing it's in page right now I'm just gonna take that out and put it in put it below now bar and maybe the import as well that should uh okay so in every page we should have the hero as well okay so once this is modeled uh every page should have uh all the yeah the same hero now below this we want this contact form which is here and we'll try to I'll try to get the complete form itself writing a form is kind of tedious so I'm gonna get the entire form Maybe HTML and then I will go to contact page there's nothing here I just put it here now I uh maybe I should have typed it all out but it's it's fine so what you have is a form field uh which is important and inside them you have input and a few things we have to make sure of is the name for the input fields that should always be there so let's see how it looks like in our app so it looks weird um let me add a container here so I could have wrapped it down okay so anyway so this is the spine um the styles are not really great I will try to improve that uh a few things we're gonna remove all these things we're gonna write it all again uh we're gonna keep the names let them be there uh the field set I don't know if that is needed at this moment know that and button uh so we have a button up our own port that and to submit close this uh remember we want the pipe I mean even without this the problem usually gets submitted but it's better to have it and there is some error in the import let's use dollar submit button is fine other things are not so much let's Design This a little bit so dot container container adding event zero so that should give us the gaps we wanted uh it's too much this button I don't know why our default button is like that let me change it a little bit it's here medium maybe 1M is too much point I it's enough this should be okay and the default button should have cursor pointer because when you hover over it it should show a pointer okay so these things now the styles for all these input Fields so how are we gonna do that let's go here now let's select all the inputs and text area let's do adding 2.5 Maybe okay of whatever it is 0.25 everyone border one packs solid as triple Maybe okay um yeah so this is okay now that is the form group uh in all these things so let me use formula I have a margin bottom of 1 AM I don't know if that is enough maybe 1.5 so this should be good padding seems uh not adequate use seven five this is okay width also people and the labels that we have we may have to have a margin bottom for them point the if I am we need more 0.5 it's margin bottom but for some reason it's Lane that yeah sometimes you know it is not uh play block so sometimes we have to display block and use it so this seems to be working now so one em is not necessary 0.5 small enough okay so we have the pump and we should have a territory of this page inside the container I'll have a H2 contact us and that H2 needs to be styled properly so it is at the top and put it here um concrete maybe 2 am and uh font size uh actually the point weight is 500 Point size is here we yeah that's more like okay so these forms uh when submitted nothing happens like you know if you want to submit something it uh just you know adds these parameters and doesn't do much should I refreshed at least um I don't know why it isn't let's do method equals post and let's see if it does something here maybe without action it doesn't do anything which is doing something yeah it did refresh okay method post it's working uh now um how do we get the data to um how do we fetch whatever is submitted right so that's where um actions coming to picture so Farm actions is something we Define in the server file so it should be plus page dot server.js it doesn't you know it has to be in the same route so that's something and if it is in a different Road you will have to mention that properly so export Advanced actions this will be equals this is an object with the multiple functions so the first one is default sometimes you know we don't mention uh any action name that case it will be default so it is an asynchronous function it takes a event I think then it returns some data now let's not have a return so let's have console log even and see if we get anything so when we submit this should execute so let's do something Let's uh open up the server thing so I'm going to close the other one so this is enough let's submit and see what happens yeah so if you look at it so we get a lot of things here uh we are interested not in cookie sometimes you know you may have to use cookies but we're interested in this request and inside the request there will be you know data that we want uh I'll tell you how to get that let's let's go back so when we are getting the request so we can just restructure it here now we'll get the form data so const form data equals await um request.com start on data so this is quite nice so um request or format gets the form data so console.log uh let's say we want from data Dot you have to use get uh let's say we want name name is name name is email so let's say we want email so we can just do it email and we should get the email so let's enter some emails submit and here yeah we got it here so that's how you get it so I'm gonna destructure them or maybe const uh email codes you can explicitly all of them so there are only three so name his name I think the last one is message is uh this email is email message so we'll get all these uh you can actually check all that using name email Okay so Let's uh fill something in let's see if we get it in the back end now this will reset the form will reset but if we go here so we are getting all this data uh as we wanted here after we get this data we can actually send it to the back end or like if you want uh send an email or do whatever you want whatever action you want to take um so that will happen here you will have to do that here and along with that you can actually return a few things like whatever you want to return I'll show you how we can get that as well so let's imagine we return something like success odd message and something like Palm submitted all right so this is the this is the thing we return it but how do we access this so we go here to server here I'll write something uh we use something with the data right so you have to I mean what's the point of a form if you don't do anything so you will have to use this data to do something maybe send an email maybe save it to the backend or something okay after that when we have returned this now there is a way to get it here okay so the way is export const on and so this is always available uh when the form is I mean it will be undefined before and once you submit it will be available that's something happened here uh it's refresh 500 internal error what is causing it um next token what is unexpected here okay export let I often forget uh I use const a lot and sometimes CM that happens okay now if I inspect and see the console here I shouldn't yeah I should be seeing you know or undefined thing so let's say I submit something some data here submit uh I should get that message now I can display that message somewhere like you know after the header maybe I can just have a pre-tag and show something like um dot initially it's null so I'm using optional chaining here so Pawn Dot message because otherwise it will throw an error uh are we can do this far we can also have a if condition and try to show it mommy submitted it's it's already showing it if I refresh it should go away and if I submit something even if if I submit without doing any you know entering anything it says form is submitted all right we're gonna stop here and we'll continue this in the next video thank you bye

Channel: WebJeda

Views: 3,982

Keywords: sveltekit, sveltekit tutorial, form

Id: 9pB3lwfeCJI

Length: 15min 26sec (926 seconds)

Published: Sun Jan 01 2023