Building a Contact Form with Laravel Livewire [Tutorial]

hey welcome back to another video in this video i'll show you how to build this contact form with live wire i'll go over how to best structure your component and some cool little things that are included with live wire to make this easier i've already built a bunch of stuff around this which i'll go over in a second we'll actually start now so i've run a migration i'll show you this so it's a it's a contacts table with a name column email column and message column with this i also created a contact model which just has the typical layer of late has factory trait and i set guarded to empty so we don't have any fillable issues i've also gone ahead and actually already created a component this was done using the art make live wire and i just uh named it contact form and of course it says it already exists so it's it's there but that's the that's the command you run if you want to create live wire components in here the component looks like so but i'll actually first show you the routes file so i have a root route that redirects to contact and then contact route that just basically shows the contact form component one thing to note that if you're actually actually showing a component right from here from a route what livewire will do is it'll expect an app.blade.php within the layouts directory right here and it's going to expect a slot right here this is where the the component will go and of course you have to include the live wire styles and livewire scripts if you don't actually have live wire installed just before i get started on the tutorial you want to run composer require livewire livewire and that'll install it for you but of course i already have it so okay so to get started basically we have two files that really concern us it's uh contact form and contact dashform.blade.php so this is what's going to be in that slot in the app.blade.php template file and this contact form here this component is what's going to be controlling the contact form i'm going to start with something really really basic and then we'll work our way up to validation and i'll kind of explain it on the way why i'm doing what i'm doing if you're new to livewire i'd check out some basic tutorials first maybe that'd be more helpful just to get started livewire has properties up at the top of the component that are available to the the templates and if we look at the final product well the starting point but the the ui here there's a name email and message form fields right and so what we want to do is actually create properties for these because we're going to store data in there so what we want to do is create a name create an email and create a message and in here we just want to actually set wire model because that's what's actually going to link those properties to the fields so this is the name input and i just want to add wire model is equal to name this one's going to be wire model is equal to email and this one here is going to be wire model is equal to message and that should be enough there now we're also going to want to create some way to submit this form this form right now goes to contact and it posts and that will no longer work once livewire is enabled because obviously we don't want it to post we want it to actually send data through the component and there's a button here with type submit that actually submits this form what we're going to do with the form here is just set wire submit dot prevent and i'll explain this in a second so we're going to basically bind wire submit if this this when this form submits we want livewire to submit this method on the component of course this doesn't exist yet but we'll create it in a second dot prevent basically prevents this form from doing what it was supposed to do which is post it's a very simple explanation but that's basically what it is now that we know we need that method to actually submit the form we can go ahead and create a public function submit form method and in here basically we can just dd1 for now and see if see if this form submission actually works and it sure does we got one for those of you who don't know or maybe aren't familiar with php dd means die and dump typically you just die and dump things out and see what the values are within your code which is very useful here for just seeing that this method is actually called okay so when this method is submitted we want to actually create a contact record if we look in the database there's only one in here now so i basically inputted my name a fake email and a message and we want to do that in this method here so what will we do first well we want to create a contact uh model and that's done like so just a quick note i will not be sending mail in this tutorial mail is a topic on its own for laravel so you'll want to cue a mailable somewhere here probably below this creation here for of this record for the purpose of this tutorial it doesn't really have anything to do with livewire i just want to demonstrate how easy it is to to build this logic and make it reactive with livewire so i'm just going to stick to actually just creating records in a database for this tutorial i want to create a record with name and i want to use this arrow name which references this here and of course we already linked this with wire models so whatever is typed into the input in html for this value in the contact form.blade.php which should be this that's what that value is going to be and that's what that's going to be the value that's used to create the contact and we're going to do the same for the rest of them i'm going to import this and let's go to our page here reload type in test test at test.com this is a test submit and nothing happens but maybe it's in the database and it sure is test test at test.com and this is a test so it creates the record well what about wanting to reset the fields here and this is one of those cool things that livewire includes in their package it makes things a lot cleaner in in the actual component itself instead of just setting this name is equal to empty empty string which is fine uh there's nothing wrong with this we can just call this reset pass in an array and then pass in the names of the properties we want to reset and we can do it in one line and this is much much cleaner in my opinion so now if we reload test test at test.com this is a test two submit inputs are gone but the value is in the database so it's doing exactly what we want it to now we can kind of move on to validate because what if these values are wrong what if they're empty what if the email is not an email what if you know what what if the message is too long the way this is done with livewire is we just basically create a protected property here called rules and this is a an array within here we define using like the keys are the names of the properties we want to validate and the values are the actual validation logic or values this will make more sense in a second so i want the name to be required but i don't really have any limitations for it i want the email to also be required but i do have an email validation requirement for it and these these validator constraints are level specific so they're going to be in the documentation this has nothing to do with live wire itself livewire just makes it really easy to define this rules property and use it within your component and message i want also to be required obviously and i want the text to be minimum of 5 in length let's say in here this actually won't validate anything we have to call this arrow validate and now if this validation fails for any of these values we will never reach this it will never submit so if i type in something like this at test.com but type in something here that's under five characters in length like test it won't submit and there's gonna be nothing in the database as you can see so the validation does work it's just annoying that we can't actually see it and so the easiest workaround for this is to this is kind of specific for your ui but in my case it actually made sense to just define at error here and you set the key so that whichever field should whichever error should pop up in this spot you should just set the key there and error and in here i just define paragraph tag so i'd put the key here if the if this error for name comes up it'll just include this paragraph element in the page and it'll automatically output the default validator message in this spot and so if name fails that'll show up there if email fails this will show up here and if message fails this will show up here so if i refresh and try this again you can see that this is too short and this is a this email field is required if i put email or testthattest.com and try again it'll still show that this message must be at least five characters if i make this five characters but remove the name it'll now fail there and none of these submissions will actually go through as you can see nothing's changed so the validator does work what if we want to show a success message if this if this validation works well this is actually pretty easy too we can just create a property here called success and down here we just set this success equal to a string that we want to show when the the form submits successfully so it could be your inquiry has been submitted successfully of course this won't change just defining it here won't actually show it inside the view what we'll have to do is just wrap this block here which is actually already rendered on the page this right here we're just going to have to wrap this in a if success and here we'll put success oops this should be a variable okay so it doesn't show up anymore but if i submit let's try test 5 test at test.com testing five now of course this this will work with all validation rules so it will submit we can see that success your inquiry has inquiry has been submitted successfully right at the top if we refresh the page it doesn't show up anymore because obviously the state's been wiped clean if we look in our database that record's actually there which means it was created and of course we know it was created because the form fields were reset and the success message was set as well now this is pretty much done but there is one little thing that i really really like about livewire which i think is really cool and it takes us to another level basically there's this method you can include called updated and i like to just pass in field you can pass in any variable you want basically and you can call this validate only field if we reload we can write test seven test at test.com and we can already see something something is different if i put in one character here it's already validating on every change and if i finally get to five the validator will stop freaking out this is annoying but you can see what this is doing every time one of these properties is updated validator is called on that that field right and so it's only going to validate that one field and so every time this is updated which in this case is on basically every key down or key up event it'll validate that's a little bit annoying though because we don't want to validate until someone's moved on to the next field how do we fix this well there's no need to be updating these properties as often as we are and so we can add dot lazy to the wire model and dot lazy basically when when you add this basically this property will only be updated once the user moves on to or clicks out of this element and i'll show you what i mean if i refresh the page and type in test seven let's try this one test click away here as you can see it does not see that this is a valid field because the length is not enough if i click now it does if i do this it'll say that again if i leave this blank it'll say this is required if i leave this blank it'll also say this is required and so this is kind of validating before the user even submits the form but not so often that it's annoying and it's not often enough to also be super taxing on the back end because livewire will be making all these requests to the back end so that's pretty much it i hope you found this useful if you did please do consider subscribing i'm trying to grow this channel it's basically a hobby of mine i work as a full stack developer right now so this is kind of just my after after hours project but if you do find this helpful please do consider subscribing it really does help out and if you have any suggestions for future videos i'm all ears i love laravel live wire i use inertia at work view stuff i'm open to suggestions so please do let me know thank you and i hope to see you in the next one

Channel: David Grzyb

Views: 3,209

Keywords: contact form livewire, building a contact form with laravel, building a contact form with livewire, livewire contact form, livewire contact form tutorial, livewire, laravel, contact form tutorial

Id: G_RDXpnWN6c

Length: 14min 10sec (850 seconds)

Published: Sat Nov 14 2020