Skip to content

Latest commit

 

History

History

lab3

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

Lab 3: Contact Form

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)[https://getbootstrap.com/docs/5.3/forms/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.

Submission

  1. This task must be done in groups (4 people per group).
  2. Please provide your contact information in the HTML <head>.
<!--
Lab XX: XXX
Group:
1. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
2. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
3. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
4. Name: [Name], Matrix No: [Matrix Number], Github ID: [Github ID]
-->
  1. You must place your file in the submission folder. Within the submission folder, create a folder named after your group.

Example: /submission/[group-name]/[your-file]

(Note: please replace [Name], [Matrix Number], [Github ID], [group-name], and [your-file] with the appropriate information)

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Visitors