Skip to content

Contact Form Mockup

Easy~20 min

What you'll build

A `contact.html` file with a form containing labeled name (text), email (email type), and message (textarea) fields, plus a submit button. The form is accessible but does not submit anywhere.

Goals

  • Use the form element to group related inputs
  • Associate every input with a label using for/id
  • Choose the right input type (text, email, textarea) for each field
  • Add the required attribute to mark mandatory fields

Prerequisites

  • HTML document structure
  • Headings and paragraphs

Steps

  2. 1

    Set up the page and form shell

    Create contact.html with a heading and an empty form. The form element is the container that groups all inputs; action and method can be left off for a mockup.

    Code
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Contact</title>
  </head>
  <body>
    <h1>Contact me</h1>
    <form></form>
  </body>
</html>

    Expected result

    A page with a heading and an empty form container.

  4. 2

    Add the name field

    Inside the form, add a label and an input. The label's for attribute must match the input's id — this is what makes the field accessible to screen readers and makes clicking the label focus the input.

    Code
    <label for="name">Name</label>
<input type="text" id="name" name="name" required>

    Expected result

    A text field with a clickable label; submitting empty shows a browser validation message.

  6. 3

    Add the email field

    Add a second label/input pair, this time with type="email". The email type gives the user a mobile-friendly keyboard and built-in format validation for free.

    Code
    <label for="email">Email</label>
<input type="email" id="email" name="email" required>

    Expected result

    An email field that rejects non-email input on submit.

  8. 4

    Add the message textarea and submit button

    Use a textarea (not an input) for multi-line message text. Finish with a button type="submit". The button text describes the action — avoid generic "Submit" when something clearer fits.

    Code
    <label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send message</button>

    Expected result

    A multi-line message field and a submit button complete the form.

  10. 5

    Add minimal layout CSS

    Stack the fields vertically with a small style block. Form fields are easier to fill out when each label sits above its input with consistent spacing.

    Code
    form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 24rem; }
label { font-weight: 600; }

    Expected result

    The form fields stack neatly with consistent spacing.

Try it yourself

What you learned

You built an accessible contact form with properly associated labels, the right input types, built-in validation, and a submit button — the same pattern every real form uses, before any backend is added.

Related Resources

Related Lessons

  • HTML

    The form, label, input, and textarea elements used here.

  • HTML

    Input types and the button element covered in this project.

Related Practice

Related Tools

Related Cheatsheets

Related Reference

Related Errors

Related Glossary

  • HTML

    HyperText Markup Language.

  • HTTP

    Hypertext Transfer Protocol.

  • URL

    Uniform Resource Locators.

Related Glossary

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

  • HTML

    HyperText Markup Language.

  • HTTP

    Hypertext Transfer Protocol.

  • URL

    Uniform Resource Locators.

Related Errors

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

← Back to topic