Project: Contact form

HTML course · Intermediate · Lesson 41/67

Overview of the 5-lesson project: a contact form with validation.

Project: Contact form

In this 5-lesson project you'll build a contact form for Cafe Dem. Visitors will be able to send their name, email and message.

Each lesson adds one piece:

Lesson 1: Document skeleton
Lesson 2: Form skeleton (fieldset, legend, label, input)
Lesson 3: Person fields (text, email, tel)
Lesson 4: Message and subject (select, textarea)
Lesson 5: Button and final touches

The parts of a contact form

A contact form has a few parts:

<form> wraps every field
<fieldset> groups fields, <legend> gives a title
<label> names the field
<input> takes the user's text
<textarea> takes long messages
<button> submits the form

We'll add these one by one in the next lessons.

Starting with the document skeleton

In the first lesson we'll write a standard HTML document skeleton: DOCTYPE, <html>, <head> and <body>. Inside head we'll add charset, viewport and title. Body stays empty for now.

Let the title be Cafe Dem - Contact. That way the browser tab shows the page name. We'll fill the body in later lessons. Let's start from scratch.

Exercise Write the document skeleton

Write a bare HTML document skeleton. Include DOCTYPE, <html lang='en'>, <head> (charset, viewport, title='Cafe Dem - Contact') and an empty <body>.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cafe Dem - Contact</title>
  </head>
  <body>
  </body>
</html>

Test yourself

Which element wraps all the form fields?
- form
- fieldset
- label
- input
Show answer

form — Correct. <form> holds every field and collects the data to submit.
Match lessons to their output

Lesson 2

Form skeleton
Lesson 3

Person fields
Lesson 4

Message and subject
Lesson 5

Button and final touches

Project: Contact form