3.1 The Form
Our contact page will be our first dynamic page in our site—it will accept and respond to user input. In this lesson, we'll be building our contact page form using some HTML.
1.Introduction2 lessons, 04:03
2.Laravel Website Basics3 lessons, 11:34
3.Create a Contact Page3 lessons, 22:34
4.Conclusion1 lesson, 02:44
3.1 The Form
Now that we have our static pages done, we can move on to our dynamic page which will consist of contact form with some validation and emailing. The idea here is that users can fill out a simple form with their name, email and the message, and upon submitting it will validate that data. If we find something wrong with their submission, it will redirect them back to the form and display the error messages. If it's all good, then we'll send the email to our own email address. Before we get to any of that though, we need to create our form. And this means, we need to create a new view. So let's do that now. In our resources/view folder, we'll create a new file, and we'll call it contact.blade.php. Block out other pages, this view needs to extend the template view. It's also going to need a content section where we'll actually write the form. So back in the day, Laravel used to provide a bunch of classes that made it easier to develop forms. These days, Laravel no longer ships that functionality out of the box. That said, you can find packages built specifically for Laravel that allow you to build forms using PHP. And this is a powerful way of building forms, especially if you need to build something that's a lot more complex, as it hides a lot of the boilerplate code that you need. Since our form is only going to be several inputs, we aren't going to worry about a third party package. However, feel free to look into them if you're looking at doing anything more complex. Right, so first up, let's create our required fields. Since we're going to be using Bootstrap, we'll first create a div with a from-group class. Each of the inputs that we create will be contained within form-group. This just gives out inputs, some separation and some styling. Next, we're going to need a label and an input with the class of form-control. Our first label is going to be for our user's name. So we'll now need to give our input and ID of name and a name of name. So I've now got our first input. We only need two more. Let's simply copy and paste this first form group and then we'll go through and change the attributes. The second group is going to be for our user's email. So we'll change the labels for attribute and the label text. Then we can change the input's ID and the name to match that of the label. Finally for our last input, we're going to need a text area so that they can enter a message that they wish to send us. So the final label is going to be for our message. We're then going to need to replace the input with a text area. Similar to the input, we need to give this text area a class of form-control. And then we need to give it an ID of message and the name of message. So the form is almost complete. But we are missing a couple of things. Firstly, we have no button to actually submit the form. And even if we did have a button, we're missing the surrounding form tag. The form tag is essential as it's what tells the browser where to send the form data. So, let's quickly create the form tag and we'll shift our inputs upwards so that they are within the form. For now, let's just leave the action as nothing, but we will go in and we'll set a method of the form, and we'll set it to post. Now, at the end of our form, before the closing tag, we'll add in a submit button. We can just use the button tag with a class of btn and btn-primary. And we'll make the button text send message. Right, so that's our contact form complete. We can now wire up a route that returns this view. In our web routes file, we'll simply copy out about route, and we'll change the necessary sections. For the name of this route, how about instead of just naming it contact, we utilize some name spacing? How about we name it, contact.form. That sort of describes what this route is because we're going to have to have another route where we're going to post the data. And we'll come up with a name for that one later. So now, in our templates file, we can link this wrap up exactly like we did in the previous lesson. And how about we take a look at what we've created and then we'll stop the lesson there. So if we head into our browser, and we refresh the homepage, we'll be able to see our new contact page in our navigation. If we head over there, we'll be presented with the simple form that we've just created. So in the next lesson, we're going to be looking at how we can handle the submission of our form, and how it can validate the data that we send.