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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.4 Q&A and Contact Form

Hey. Welcome back. So, in this lesson, I'm gonna take care of the FAQ and the content section of our page. So the first one, is the FAQ. I'm gonna create a new section with div class page-header as usual, section-faq. And inside is gonna be an h2 with a small tag. And so this one is gonna say, Frequently Asked Questions, and in here I'm gonna say, a little Q and A to get you started. Okay. Cool. Now for the Q and A, I'm gonna use the collapse element. And if you remember from the previous lessons, it uses a panel group. So that's what we're starting with. div class panel group, I'm gonna give it an id of accordion qa. Now, for each element, I start with a panel, and panel-default. And inside I have a panel-heading plus a panel-collapse. The panel-heading is gonna have an h4 with a class of panel-title and inside we're going to put an anchor tag, so the anchor tag is going to go to let's say, collapse-one or actually qa-1. I'm going to set data-toggle to collapse and data, parent to accordion-qa, and remember to put the hash sign, and for the text, i'm just going to put question 1. Okay, for the collapse div, and this will hold the actual content, I'm going to give it an id of qa-1, and inside I'm going to say panel-body, and I'm gonna put some Lorem ipsum. Okay, now what I'm gonna do is copy this panel, and paste it two more times, make sure I add the in class at the very first collapsible panel. So that it will be displayed first and then change, the ids on the other two elements. So this will be 2 and this will be 3. Let's check it out. Okay. Question 1, question 2, question 3. Great. Now moving on to the context section which is the final section in our code, for the contact, create a new section as usual with a page header, with an id of section-contact. [BLANK_AUDIO] And this one is going to say contact us and let's get in touch. Okay. Now, I want to have two main elements in this area. One an area with some contact information, and the other one with the actual contact form. So, I'm going to use two columns. Row, and then col-lg-4 plus a col-lg-8. On the col-lg-4 which will be on the left side, first I'm going to do a paragraph. Which will say something like this, and then I'm gonna put an address. So address- [BLANK_AUDIO] I'm just gonna put the invato address here separated by line breaks and also a phone number. And I'm gonna use the abbreviation tag. Title is gonna be phone, I'm gonna put a p here and then the phone number. And that's the end of the address. Let's check it out. [BLANK_AUDIO] Okay. When I hover on the p my cursor changes and I have that phone title. Okay. Now on the right side, I'm gonna use a form. [BLANK_AUDIO] More specifically a horizontal form, so I'm going to do form.class-form-horizontal. I didn't show you this in the theory part, action, role is going to be form [BLANK_AUDIO] And I'm going to have a few fields, like a name, email, website and message. So, I wanna start with a form-group, in which I'm going to have a label for, contact-name, and also I'm going to give it a class of co-lg-2, and also control-label. And I'll show you in a little bit what it does. So I'm gonna say name here and then I'm gonna do a div with a class of col-lg-10 which will house my input. Type text, class will be form-control, and id is going to be contact-name, let's also do a placeholder. Okay, let's check it out. [BLANK_AUDIO] Okay, so this is what we have currently, if I duplicate this form group for my email field. Let's see, contact, email is gonna be here. This one is gonna be email address. And type here is going to be email. Now, if I refresh, notice how the labels and the inputs line up. This is how the horizontal form looks like. All right, let's do the same for the other input. [BLANK_AUDIO] The website, the other form field I meant, and I just noticed a small typo here. This is contact website, website. And what else? The input type will be URL, I'm going to duplicate this again and create the message. So it's gonna be contact message, okay col-lg-10 and instead of this input actually I'm just gonna delete this. I'm gonna create a textarea. The name is going to be contact message, the id will be the same. Make sure you add the class of form-control. So, this control is styled properly. And also add a placeholder of message. All right let's check it out. So name, email address, website and message. Okay. So far so good. At the very end I'm gonna add another div with a class of form-group. And this will hold my submit button, so in here I'm gonna say class col-lg-10, and inside I'm gonna have a button, type will be submit, class is going to be btn and, let's do a btn-primary, send message. All right. Now refresh. And notice my message is not positioned correctly. I need to align it's left side with these inputs right here. So I'm gonna add, right here, a col-lg-offset-2. So we're pushing it to the right by two columns, which is exactly the width I have on my labels. All right. And that's basically it for this contact area. Now the last thing, I need to do on this page is the footer. That's coming up in the next lesson.

Back to the top