FREELessons:12Length:1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Customizing the Contact Page

The final page that needs customizing is the contact page. So let's begin by having a look at its current state. I'll go to Get In Touch, and we can see that we have two sections, basically. We have a contact form, and we have an address. Now since this is a portfolio, and I do not have a physical business address, I'm gonna remove this section, and I'm gonna add my own contact form right here. So let's go back to our pages, Get in Touch. And the first thing I'm gonna do is remove this entire row. Let's delete that, let's hit Update, and have a look. There we go. And let's see about creating a new contact form. Now for most cases, the one that you see here is more than enough, but I just want to go through the process of adding a different form, so you can see how it's done. So the theme uses a plugin called Contact Form 7 that handles all of our forms. And currently, if we click on Edit, we're gonna see that it uses the Adios Form, and we can also give this search a title. Now, if we go to Contact, this is where all of the contact forms reside. So if we click on Adios Form, now we're gonna see a simplified version of the form from the front-end. And for each form, you have access to its main structure, to the email address that the form contents will be sent to, and all sorts of meta information, like From, Subject, Additional Headers, and the Message Body. You can edit all of these here, and Contact Form 7 will configure everything automatically, it's really, really fast. You also have access to the messages that will be displayed in various situations, for example when the sender message was sent successfully, we can display this. Of course, all of these are editable. When the message failed to send, when the validation error occurred, and so on, you have access to all of these, you can customize them as you wish. So let's add our own form. Let's go to Add New, let's say Tutsplus Form. Here we can see a default structure for our form, we have name, email, subject and message. Maybe I want to add, just for the sake of it, a URL, right? Just here. So I'm gonna say URL, and this is, let's say it's a required field. Let's say the name is website, no default value, and you can set an additional id or Class attribute. So I'm gonna insert that tag, but also I'm gonna wrap it in a label, just like we can see right here. So I'm actually going to copy this, paste that in. And I'm gonna say, Website. I'm gonna copy this bit, and I replace this short code with my URL short code, and I'm gonna hit Save. Of course, go through Mail, Messages, or additional settings to customize this form to your liking. So now I'm gonna go back to my Get In Touch page, I'm gonna do a quick refresh, and I'm gonna edit this section and I'm gonna choose Tutsplus form, Save changes, Update. And now if we go back to the front end, now I don't see any border around those inputs, so we need to add a special class called input field, and that's defined in the actual theme. So we'll go back to the theme, and we're gonna add the class right here at the end, we're gonna say class input-field. So let's go ahead and copy that, we're gonna paste that everywhere, on the website and on the message. Let's go ahead and save that, all right. So now we have good looking inputs on all of these. Now if you want your form to look like the previous or the default one that you saw, you simply remove the label and use a place holder, instead. But in my case, I think this will be just fine. Also i do know that the send button has a special class, although I cannot remember it right now. So I'm gonna refer back to the original Adios form. And let's see, Submit, it has a class of input-send and also a class of submit. So let's actually copy these. I'm gonna paste those in. And something else that I saw here is the response. This is an element that will be used to display the response, or the form response in case something goes wrong, or any kind of notification, basically. So I'm gonna save that, refresh, and there it is, Send. You probably can align this to the left, you just have to search the Contact Form 7 documentation or the theme documentation, and see what classes it can use for that. But now if we hit Send, it's gonna show up the response here and also these error messages, telling us that we did not complete a required field. Now, of course, for your own project, you would need to customize this a bit further, add your own email address, customize how the emails are being sent, their structure, also the meta information, all of that stuff. But from a technical point of view, this is how you would add a new form for contact and customize the contact page. Now with that, our portfolio website is pretty much complete. You saw just how easy that was, right? As long as you're using the right tools, this becomes a very easy task. This was the final lesson of the course. Please join me in the next video for the conclusion.

Back to the top