Loading…

Build a Simple Contact Form Page with HTML | CompileQuestHub

Build a Simple Contact Form Page with HTML

5/22/2026 • Updated 5/26/2026 • HTMLFormsWeb DevelopmentBeginner

Challenge Goal

In this beginner-friendly HTML coding challenge, you will build a complete Contact Us page using only HTML5. Your page will include a short introduction and an accessible contact form that collects a user's name, email address, and message.

What You Will Build

You will create a file named contact.html that contains a full HTML document with a working form structure. The form will not actually send data to a real server, but it will demonstrate the correct HTML markup used in real contact pages.

Concept Overview

HTML forms allow users to enter and submit information on a website. They are commonly used for contact pages, login pages, registration forms, surveys, search boxes, and checkout pages.

In this challenge, you will practice:

Creating a complete HTML5 document structure.
Using the <form> element.
Adding text, email, and message fields.
Connecting <label> elements to form fields for accessibility.
Using the required attribute for basic browser validation.
Writing clean, beginner-friendly, semantic HTML.

Example Form Structure

Here is a small example of how a contact form can be structured:

<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Coding Challenge

Create a complete HTML page named contact.html. Your goal is to build a simple, accessible contact form page using only HTML. Do not use CSS or JavaScript for the main challenge.

Requirements

Create a file named contact.html.
Use the <!DOCTYPE html> declaration.
Include proper <html>, <head>, and <body> sections.
Add lang="en" to the opening <html> tag.
Inside the <head>, include a UTF-8 charset meta tag.
Set the page title to Contact Us.
Add a main heading using <h1> with the text Contact Us.
Add a short paragraph inviting users to send a message.
Create a form with action="#" and method="post".
Add a required name field using <input type="text">.
Add a required email field using <input type="email">.
Add a required message field using <textarea>.
Use a <label> for every field.
Make sure each label's for value matches the related field's id.
Add a submit button with the text Send Message.

Input and Output Expectations

Input

The user should be able to enter:

Their name.
Their email address.
Their message.

Output

When the user clicks the submit button, the browser should check that all required fields are filled in. Because this challenge uses action="#", the form does not submit to a real server.

Constraints

Use only HTML5.
Do not use CSS for the main challenge.
Do not use JavaScript.
Do not connect the form to a backend server.
The page should be valid HTML.
The form should be accessible for screen readers.

Hints

Use <input type="email"> for the email field so the browser can validate email format.
The <textarea> element does not use a type attribute.
The name attribute identifies the data when a form is submitted.
The id attribute connects a field to its label.
The required attribute tells the browser that a field must be completed.
You can use <br> to separate fields for this beginner challenge, but CSS is usually better for layout in real projects.

Starter Code

Use this starter code and complete the missing form fields:

<!-- Save this file as contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Us</h1>

  <p>Write a short introduction here.</p>

  <form action="#" method="post">
    <!-- Add the name field here -->

    <!-- Add the email field here -->

    <!-- Add the message field here -->

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Solution Walkthrough

Step 1: Create the HTML document

Start with the standard HTML5 structure. The <!DOCTYPE html> declaration tells the browser to use HTML5.

Step 2: Add page metadata

Inside the <head>, add <meta charset="UTF-8"> so the page supports common characters. Then add a clear page title using <title>.

Step 3: Add the page content

Inside the <body>, add a main heading and a short paragraph explaining what the form is for.

Step 4: Build the form

Create a <form> with action="#" and method="post". Then add labeled fields for name, email, and message.

Step 5: Improve accessibility

Every form field should have a label. The label's for attribute must match the field's id. This helps users who rely on assistive technologies.

Final Solution

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

  <p>Have a question or feedback? Fill out the form below and we will get back to you soon.</p>

  <form action="#" method="post">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

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

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="5" required></textarea><br><br>

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Stretch Goals

Add placeholder text to each field, such as Enter your name.
Add a <fieldset> and <legend> to group the form fields.
Add a phone number field using <input type="tel">.
Add a subject field using <input type="text">.
Add a dropdown using <select> so users can choose a reason for contacting you.
After completing the HTML-only version, create a separate CSS file to style the form.

Quick Checklist

Does your page have a valid HTML5 document structure?
Does your form include name, email, and message fields?
Does every field have a matching label?
Are all fields marked as required?
Does your submit button say Send Message?

Support

Keep CompileQuestHub free

If this challenge helped you, support more open tutorials and code examples.

Support the site Start Here

Need More?

Request a topic or report an issue

Use the contact form to request follow-up tutorials or report broken code, missing files, or outdated links.

Request a topic Report a problem

Page Info

Freshness and topics

Topic: HTML

Difficulty: Beginner

Reading time: 5 min read

Published: 5/22/2026

Updated: 5/26/2026

#HTML #Forms #Web Development #Beginner

Before You Start

Prerequisites

Basic understanding of HTML tags
Familiarity with document structure (<!DOCTYPE>, <html>, <head>, <body>)

Outcome

What you will learn

Create a functional contact form using HTML5
Apply proper label-for associations for accessibility
Use required attributes to enforce client-side validation
Structure a complete HTML page with semantic elements

Learning Path

HTML Foundations

Continue this sequence from the series page and move through the lessons in order.

Open series

Keep going with nearby resources

Browse all

5/22/2026

Create a Semantic Navigation Bar with HTML

Build a beginner-friendly semantic HTML navigation bar with a site name, accessible links, and simple CSS for a clean horizontal website header.

5/22/2026

Build Your First Personal Profile Page with HTML

Practice basic HTML structure by building a beginner-friendly personal profile webpage with a heading, bio, hobbies list, and link.

5/22/2026

Build an Accessible FAQ Accordion with HTML and CSS

Create a responsive, beginner-friendly FAQ accordion using semantic HTML, native details and summary elements, and CSS styling without JavaScript.

Next Step

Build Your First Personal Profile Page with HTML

JavaScript Problem Solving: Count Vowels Coding Challenge

Loading…

Build a Simple Contact Form Page with HTML

5/22/2026 • Updated 5/26/2026 • HTMLFormsWeb DevelopmentBeginner

Challenge Goal

What You Will Build

Concept Overview

HTML forms allow users to enter and submit information on a website. They are commonly used for contact pages, login pages, registration forms, surveys, search boxes, and checkout pages.

In this challenge, you will practice:

Creating a complete HTML5 document structure.
Using the <form> element.
Adding text, email, and message fields.
Connecting <label> elements to form fields for accessibility.
Using the required attribute for basic browser validation.
Writing clean, beginner-friendly, semantic HTML.

Example Form Structure

Here is a small example of how a contact form can be structured:

<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Coding Challenge

Create a complete HTML page named contact.html. Your goal is to build a simple, accessible contact form page using only HTML. Do not use CSS or JavaScript for the main challenge.

Requirements

Create a file named contact.html.
Use the <!DOCTYPE html> declaration.
Include proper <html>, <head>, and <body> sections.
Add lang="en" to the opening <html> tag.
Inside the <head>, include a UTF-8 charset meta tag.
Set the page title to Contact Us.
Add a main heading using <h1> with the text Contact Us.
Add a short paragraph inviting users to send a message.
Create a form with action="#" and method="post".
Add a required name field using <input type="text">.
Add a required email field using <input type="email">.
Add a required message field using <textarea>.
Use a <label> for every field.
Make sure each label's for value matches the related field's id.
Add a submit button with the text Send Message.

Input and Output Expectations

Input

The user should be able to enter:

Their name.
Their email address.
Their message.

Output

When the user clicks the submit button, the browser should check that all required fields are filled in. Because this challenge uses action="#", the form does not submit to a real server.

Constraints

Use only HTML5.
Do not use CSS for the main challenge.
Do not use JavaScript.
Do not connect the form to a backend server.
The page should be valid HTML.
The form should be accessible for screen readers.

Hints

Use <input type="email"> for the email field so the browser can validate email format.
The <textarea> element does not use a type attribute.
The name attribute identifies the data when a form is submitted.
The id attribute connects a field to its label.
The required attribute tells the browser that a field must be completed.
You can use <br> to separate fields for this beginner challenge, but CSS is usually better for layout in real projects.

Starter Code

Use this starter code and complete the missing form fields:

<!-- Save this file as contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Us</h1>

  <p>Write a short introduction here.</p>

  <form action="#" method="post">
    <!-- Add the name field here -->

    <!-- Add the email field here -->

    <!-- Add the message field here -->

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Solution Walkthrough

Step 1: Create the HTML document

Start with the standard HTML5 structure. The <!DOCTYPE html> declaration tells the browser to use HTML5.

Step 2: Add page metadata

Inside the <head>, add <meta charset="UTF-8"> so the page supports common characters. Then add a clear page title using <title>.

Step 3: Add the page content

Inside the <body>, add a main heading and a short paragraph explaining what the form is for.

Step 4: Build the form

Create a <form> with action="#" and method="post". Then add labeled fields for name, email, and message.

Step 5: Improve accessibility

Every form field should have a label. The label's for attribute must match the field's id. This helps users who rely on assistive technologies.

Final Solution

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

  <p>Have a question or feedback? Fill out the form below and we will get back to you soon.</p>

  <form action="#" method="post">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

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

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="5" required></textarea><br><br>

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Stretch Goals

Add placeholder text to each field, such as Enter your name.
Add a <fieldset> and <legend> to group the form fields.
Add a phone number field using <input type="tel">.
Add a subject field using <input type="text">.
Add a dropdown using <select> so users can choose a reason for contacting you.
After completing the HTML-only version, create a separate CSS file to style the form.

Quick Checklist

Does your page have a valid HTML5 document structure?
Does your form include name, email, and message fields?
Does every field have a matching label?
Are all fields marked as required?
Does your submit button say Send Message?

Support

Keep CompileQuestHub free

If this challenge helped you, support more open tutorials and code examples.

Support the site Start Here

Need More?

Request a topic or report an issue

Use the contact form to request follow-up tutorials or report broken code, missing files, or outdated links.

Request a topic Report a problem

Page Info

Freshness and topics

Topic: HTML

Difficulty: Beginner

Reading time: 5 min read

Published: 5/22/2026

Updated: 5/26/2026

#HTML #Forms #Web Development #Beginner

Before You Start

Prerequisites

Basic understanding of HTML tags
Familiarity with document structure (<!DOCTYPE>, <html>, <head>, <body>)

Outcome

What you will learn

Create a functional contact form using HTML5
Apply proper label-for associations for accessibility
Use required attributes to enforce client-side validation
Structure a complete HTML page with semantic elements

Learning Path

HTML Foundations

Continue this sequence from the series page and move through the lessons in order.

Open series

Keep going with nearby resources

Browse all

5/22/2026

Build Your First Personal Profile Page with HTML

JavaScript Problem Solving: Count Vowels Coding Challenge

Challenge Goal

What You Will Build

Concept Overview

Example Form Structure

Coding Challenge

Requirements

Input and Output Expectations

Input

Output

Constraints

Hints

Starter Code

Solution Walkthrough

Step 1: Create the HTML document

Step 2: Add page metadata

Step 3: Add the page content

Step 4: Build the form

Step 5: Improve accessibility

Final Solution

Stretch Goals

Quick Checklist

Keep CompileQuestHub free

Request a topic or report an issue

Freshness and topics

Prerequisites

What you will learn

HTML Foundations

Keep going with nearby resources

Create a Semantic Navigation Bar with HTML

Build Your First Personal Profile Page with HTML

Build an Accessible FAQ Accordion with HTML and CSS

Challenge Goal

What You Will Build

Concept Overview

Example Form Structure

Coding Challenge

Requirements

Input and Output Expectations

Input

Output

Constraints

Hints

Starter Code

Solution Walkthrough

Step 1: Create the HTML document

Step 2: Add page metadata

Step 3: Add the page content

Step 4: Build the form

Step 5: Improve accessibility

Final Solution

Stretch Goals

Quick Checklist

Keep CompileQuestHub free

Request a topic or report an issue

Freshness and topics

Prerequisites

What you will learn

HTML Foundations

Keep going with nearby resources

Create a Semantic Navigation Bar with HTML

Build Your First Personal Profile Page with HTML

Build an Accessible FAQ Accordion with HTML and CSS

Get Clarity Before Work Gets Chaotic

Turn Projects Into Clear Next Steps