- Overview
- Transcript
5.1 Adding a Form to Our Contact Page
In this lesson we’ll learn how to use Bootstrap’s built-in form styling to create a beautiful contact form.
Related Links
1.Introduction1 lesson, 00:43
1.1Course Overview00:43
2.Getting Familiar With Bootstrap's Grid1 lesson, 02:43
2.1The Grid System02:43
3.The Homepage6 lessons, 33:47
3.1Setting Up Our Project With HTML5 Boilerplate and Bootstrap03:42
3.2Resets, Logo, and Navigation11:16
3.3Huge Headers With Jumbotrons04:39
3.4Filterable Portfolio Structure06:04
3.5Adding Functionality to Our Filterable Portfolio05:55
3.6Finishing Touches02:11
4.The Blog Page2 lessons, 10:45
4.1Setting Up an Article Listing05:24
4.2Adding a Sidebar and Source Ordering05:21
5.The Contact Page1 lesson, 03:58
5.1Adding a Form to Our Contact Page03:58
6.Conclusion1 lesson, 00:38
6.1Goodbye00:38
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.