5.1 Adding a Form to Our Contact Page

Welcome back to Power Up Your Portfolio with Bootstrap. I'm your instructor, Cory Simmons. In our last lesson, we finished our blog page by adding a beautiful sidebar to it. In this lesson, we'll create a quick contact page using what we've learned and wrap up our entire portfolio build. First, we'll need to create a page at the root of our project called contact.html. Then copy everything over from index.html or blog.html and delete everything, but the header, the masthead, and the footer. [BLANK_AUDIO] Now simply change the masthead to say something relevant to a contact page. Something like, thanks for getting in touch, with the lead paragraph saying, I can't wait to hear from you. [BLANK_AUDIO] Now create a fluid container. [BLANK_AUDIO] Now add a row with a col-md-6 div inside of it. Inside of this, put a paragraph tag with a bit more text describing how happy you are that someone is contacting you and how you will get back to them within a business day. You know, stuff potential clients want to hear. Now create another row, and inside of this row put another div with the classes of col-md-6 and contact-form. Now to create the contact form. Navigate over to getbootstrap.com and click on CSS, then Forms. Copy the first forms mark up and paste it into the div we created. [BLANK_AUDIO] Bootstrap comes with some default forms stylings for us. And each of our label/inputs needs to be wrapped in a form group class. Let's remove the check box, and file input fields from the markup, and add one for text area. [BLANK_AUDIO] If you scroll down a bit in the Bootstrap documentation, you can see all the different form controls available, including one for text areas. [BLANK_AUDIO] Simply replace the IDs and labels with appropriate text for what we want. And that is the name, email address, and message of the prospective client. [BLANK_AUDIO] And save and refresh. Voila, we have a nice form. But let's style it up a bit to make it look even better. Open up our style sheet and we'll say, contact-form, background, 111, padding-top, 1m, padding-bottom, 1m. Save and refresh and contract your viewport. Beautiful, now our portfolio is done. [BLANK_AUDIO] In this lesson, we learned how to use Bootstrap forms to create a simple, yet effective contact form for our portfolio.