Bootstrap: Contact Form Exercise

The goal of this exercise is to use the CSS components you've learned so far from Bootstrap to create a contact form for your website.

Part 1: Setup

1. Make a copy of your index.html from the previous exercise.
2. Name it contact.html and save it in the same folder as your index.html.
3. Delete the main content from contact.html, but keep the header, navigation, and footer if you have it.
4. Paste this starter code into your contact.html instead.

Part 2: Create form!

Add input fields

• Use the form control classes such as .form-group and .form-control to style your Name, Email, Subject, and Message fields.
• Use the button component's .btn classes to style your Send button.
• When the form submits, have it send to your own email? (Hint: how does the form know which email to send to?)

Bonus

• Add a header and introductory text to your Contact page.
• Use the grid classes we have already learned to style/position your new content on the page.

Show Solution