Laravel 8 Tutorial - Multi Step Form

hi everyone welcome back to the laravel air tutorial in this video we are going to learn about multi-step form so let's see how can we create multi-step form in la revelate so first of all let's create a new controller so switch to the command prompt and just type the command php artisan make controller and controller name or let's say controller name is form controller all right now press enter now switch to the project and just open the form controller so just go inside the app directory then http controllers and from here just open form controller inside this form controller let's create a function here just type your function public function and function name let's say function name is index and inside this just return here of view let's say view name is multi dash step dash form all right now let's create the route uh for this function so just to go inside the routes directory then just open we've got hp and here just right here route get and let's say uri is form add here the controller name which is from controller also add here the form controller like this okay and just write your colon colon class and add here the function name future name is index okay so just write here now save this file now let's create this view so just copy this view name and go inside the resources directory and views and here let's create a new file uh multi that's a steplast form dot blade dot php all right now just open this file and inside this file uh let's add here the html5 boilerplate so just type in exclamation sign and press tab i'll change the title here multi step form all right now inside this blade file let's add the footer strap cdn so just go to the get bootstrap.com and now click on get started from here just copy the css and list here now just copy this js file and after this just paste here all right now go to the google and here just search parsley js cdn okay now click on first link and from here just copy the parsley dot mean dot ps okay so just click here and after this just paste here all right now let's uh add a form so inside this body just add here the section and inside this section just write your container then row column empty six also add here offset md3 all right and inside this just add another card card header and text white right and busy info inside this just add here the heading multi step bomb now just add here card body and inside this uh let's add here the form so just write your font and class let's say contact as form all right and inside this just here at hcsrf now uh just added the form section formed as section and inside this uh let's create the build for the first name so first create the label for first name and just add here first name all right now create the input fill input type is equal to text and name is equal to first name and class form all right now just copy this and paste here now just add here the last name also change the name last name all right now create another section form section so just write here form dash section and inside this just copy this and paste here and now change the text here uh just right here email also change the name email and type email all right and inside this label just write here the email and here right here the phone name phone and also here phone all right now let's create a last section form as section and inside this uh let's create a text area for the message so first of all add the label for msg and just add here the text message and now just create text area class formed as control all right and name is equal to msg all right now just close the text area and also add here the required okay now let's create the button uh next previous and submit button so just add here form as navigation navigation and inside this first create the previous button so just right here button type is equal to button and class dbs btn btn dash info and add here the plot left okay and inside this button just add here our text previous all right now let's add the button for next right here button type is equal to button and class next btn as btn all right and plot right all right and just add here the text next and now let's let's create the submit button so just right here button type is equal to subfit and class vtn vtn has success okay and just add here plot as right and inside this button just add here the text subfit all right okay now let's check this form so first of all run the application so just right here php artisan sir and now go to the browser and just go to the url slash form all right now let's add some css so inside this header tag just add here style tag and just right here section and give some padding here so straight here padding desktop let's say 100 pixel all right okay now add here the form that's the section and just add here the padding left adding left 15 pixel display section dot current and just write here margin for your display display edit all right and also some add here some margin for the button so just right here begin does info and and now just set the clip for error so just write here dot parse parsley has errors dash list and just add a margin to pixel 0 and 3 pixel all right and set the padding zero list style uh let's just start with type none and set the color red all right now save this file now let's add some javascript code so after this section i'll just add here the script script and inside this just write here dollar function and inside this let's create a variable so just write your pad dollar sections and just write here dollar and just add just copy this class name okay form dash section and just write here dot section all right i'll create a function here function navigate navigate to and inside this just here index all right and inside this function just write your dollar dollar section excellence dot dot remove class remove class if class has current so just remove this current first and then and just add the class add class and inside this just pass here the class name current and now just write here form dot form dash navigation dot previous this class all right then just call here the toggle function okay and inside this index is greater than zero all right now where at the end is equal to index is greater than and equal to dollar sections dot dot length minus one all right dollar form navigation dot form as navigation dot next and just add your toggle not at the end all right and for the submit button just write here dot form has navigation navigation and inside the big bracket this writer type is equal to submit dot toggle at the end all right now let's create another function so just write your function index current index and inside this simply return here dollar sections index and inside this is right here dollar sections dot filter and inside this filter just pass here the current class so just write here dot current now just write here dollar dot form navigation formed as navigation dot dbs dot click if click on previous button you can just add here the callback function and inside this just call the navigate function navigate to and inside this just pass here current index and minus 1 right and for the next button dollar dot form navigation dot next on click and here the callback function and inside this installer and here the form class which is contact form so just copy this class name and dot and please tell the class name contact form all right and now just write here dot parsley and inside this just write your group block dash concatenate your current index card index okay and just right here done done then add here the callback function function and inside this just call here the navigate to and inside this function just pass here index and plus one all right and after this just write your dollar sections index and section all right and inside this caller section dot find that this is right here input attribute apdr and data has parsley and here just add comma blog plus concatenation sign and just write here index okay and in last just call the navigate uh function and just pass here zero okay now save this file now it's done so let's check this so just refresh the page all right now if i click on next validation not working let's check so go inside the multistepform.let.php file and the required added here first name last name email phone sections dot index section uh blog all right just add here the desk okay block dash uh concatenation sign then index okay now save this file and let's check again so switch to the browser and just refresh the page all right now click on next and you can see when it is an error okay and now just enter the name now let's repeat mark and so on all right now click on next and if click on next you can see the letters later now just adhere the email id and phone number all right now click on next and just enter a message here your padding margin top is not working so just add here all right btn dash success okay margin top now just refresh the page next next okay and just head here test message all right and if i click on submit the form submitted okay now let's create a function inside the form controller just write here public function and function name form submit and inside this sponsor request dollar request and just return here dollar request arrow all all right now save this file and let's create the route for this function so go to the web.php and here just write route post and inside this just add here the route uri form column column class and function name form submit okay so just copy this function name and paste here also add the route name so just write your name form dot [Music] right now just copy this route name and go inside the blade file and inside the form just add here method post and action action just add your double quantity packet then route and inside this just paste in the route name form. right now save this file and let's check so switch to the browser and just refresh the page go to the url form and now just enter the name mark john enter the mail id amazon address email.com phone number all right now click on next and just enter a message text message and now just click on submit and here you can see the submitted report all right so this way you can create multi-step form in laravel it so that's all about multi-step form so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 12,906

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, laravel 8 introduction, intro to laravel 8, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, multi step form in laravel, multi step form in laravel 8, multi step form, laravel 8 multi step form

Id: jgmRM8Cfvxo

Length: 26min 15sec (1575 seconds)

Published: Fri Sep 25 2020