Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:43 minutes
Landing page envato elements 400x277
  • Overview
  • Transcript

2.6 Customize the Contact Form

Welcome to the sixth and final lesson of this course, where we’ll customize the contact form. With this wrapped up, you’ll be furnished with all the skills you need to download a template and start building your own landing page. Thanks for watching!

2.6 Customize the Contact Form

Hello and welcome to the sixth and final lesson of this course, where we'll customize the contact form. So there are two parts to customizing this one. We have the front end and we have the back end, which is represented in our case by PHP. As I was saying in the beginning, this is a fully-functional contact form. So when you're gonna upload your landing page to a proper server, which has a PHP server behind it, you'll be able to use the contact form to send messages. So for the front end, we'll go to our index H channel here. And we'll scroll all the way down, where it says contact. And, of course, we can customize the text here. This is not exactly distribution ready. So, for example, this text I would customize to contact us using contact form below, or using the form below. And we'll get back to you as soon as possible, for example. And then I would also change this text right here. So contact info, I would say something like, use the information below to get in touch, we'd love to hear from you. I would get rid of this paragraph completely. And, of course, change the information here with proper address information and proper contact information. But probably the most important part is, how do you customize the form here? Well, to customize the form, you have to pay close attention to its structure. So we see the input fields are all residing, or are each residing, in a div with a class of input field. So if, for example, we were to add another one for a subject, we would just copy this. And we would change the ID. So instead of contact_email, I would say contact_subject. The type is gonna be text, the type of the input. And the name is gonna be contact-subject. Now this has, of course changed here the label as well. And this is not the only thing that you need to do. This is a fully functional form, that means it has some PHP code in the back end that allows it to send messages. So if we open up contactform.php, if you haven't modified this form, then the only thing you have to change is this bit. The email address at which the PHP script will send the messages. So we would just enter your email address. And optionally, you can also change the subject here. And that will appear as the subject of your email. However, if your did change the contact form and with it you added another field, you would have to change this code as well to validate that field, if it's a required field, and to also add it to the body of your message. We're not gonna do this here, you would have to contact the author of the theme if you need assistance with that. And lastly, one thing that I did forget to do was, going here, at the bottom call to action, where it says Buy Project. And I wanna remove this Google Play button, because we're not offering this on Android. So I just remove that. And now everything is as it should be. Now with that said, this is not exactly complete right now. Yes, you still need to add your own text and your own images. In this course, I showed you what are considered to be the key points. Like how do you change your logo, and how do you add another image here, or maybe edit the one that was already there? How do you change this navigation, right? So stuff that would pose problems for people that don't have a lot of experience with coding and what to do with a theme like this once they buy it or they download it, for example, from Elements. And I hope I succeeded in that. So with that said, I would like to thank you very much for watching this short course. I'm Adi Purdila and until next time, take care.

Back to the top
Continue watching with Elements