7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Contact Page

It’s time to get our hands dirty with some form elements, so let’s create the contact us page.

3.6 Contact Page

Hello, and welcome to lesson number 13 of this course where we'll create the contact us page. So looking at the structure, we can see it's very simple. We have the usual hero, and as for the content, well, we just have a contact form. So let's quickly get this over with. We're gonna search for a template that has the correct heading here. We're gonna call this contact us. For text I'm simply gonna say, let's get in touch and for the subtitle, use the contact form below to send us a message. Let's go ahead and delete this section and let's check out the UI kit for a contact form. Let's see if we have something like that. I think I saw one, somewhere. So we should be good to go with a simple copy and paste, there we go. So in page number five, yeah, I'll just grab the form from here. So copy that, paste that in. Let's get rid of this title. Let's bring that up. And as for our structure, we have name, email, and regarding what's this about, that's optional, and then the message. Now if you want to include this third field, which is for the subject of the message, well you can simply reorganize these a little bit. So you would put the email here. Now let's get rid of that active state. So I'm going to copy the style from this, paste it to this. I'm gonna say your topic, state your topic. And then this input area, we're just gonna put it on the side here. Let's also use the grid to do this. I'm gonna resize it like this, make it bigger in height. That looks about right. And finally, we'll just move the button, either to the side here or here. It's really a matter of personal preference. I'm just gonna leave it there and actually, We need to bring this up a little bit. To about here. So let's resize this a bit to something like that. Bring the divider on top. And bring these up. Remove the excess space. And that's our contact page. Finally, the last page for our website here is the about us. That's coming up in the next lesson.

Back to the top