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
- Make a copy of your
index.html from the previous exercise.
- Name it
contact.html and save it in the same folder as your
- Delete the main content from
contact.html, but keep the header, navigation, and footer if you have it.
- Paste this starter code into your contact.html instead.
Part 2: Create form!
Add input fields
- Use the form control classes such as
.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?)
- 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.