Creating A Contact Form Using HTML

Pre-requisites

0/1

Set up an HTML Editor

Laying the HTML Foundation

0/5

Building Your First Web Page

Linking Pages Together

Adding Homepage Content

Creating an About Page Using HTML

Creating a Contact Form Using HTML

HTML Tutorial for Beginners: A Step-by-Step Guide

About Lesson

Introduction

In this tutorial, we will create a Contact page for our website using HTML. The Contact page will include:

A simple form with fields for name, email, subject, and message.
A submit button to send the form.

Step 1: Open `contact.html`

Navigate to your `contact.html` file and ensure it includes the same **navigation menu** as the other pages.

Step 2: Add a Horizontal Rule

Below the `<div>` that contains the navigation menu, add a horizontal rule (`<hr>`) to visually separate the navigation from the form.

<hr>

Step 3: Create the Form Structure

We will now create the form using the `<form>` element:

<form>

</form>

Step 4: Add the Full Name Input Field

<form>
    <div>
        <label for="fullname">Full Name</label>
        <input type="text" id="fullname">
    </div>
</form>

Now, preview your file in a browser to see how it looks.

Step 5: Add an Email Input Field

Next, add another field for the user’s email address. Notice that we set the `type` to `email`, which ensures only valid email addresses can be entered.

<div>
    <label for="email">Email</label>
    <input type="email" id="email">
</div>

Step 6: Add a Subject Input Field

<div>
    <label for="subject">Subject</label>
    <input type="text" id="subject">
</div>

Step 7: Add a Message Text Area

<div>
    <label for="message">Message</label>
    <textarea id="message"></textarea>
</div>

Step 8: Add a Submit Button

Finally, we need a **button** for submitting the form:

<div>
    <button type="submit">Submit Form</button>
</div>

Step 9: Complete Contact Form Code

Here’s how the **final `contact.html` form** should look:

<form>
    <div>
        <label for="fullname">Full Name</label>
        <input type="text" id="fullname">
    </div>
    <div>
        <label for="email">Email</label>
        <input type="email" id="email">
    </div>
    <div>
        <label for="subject">Subject</label>
        <input type="text" id="subject">
    </div>
    <div>
        <label for="message">Message</label>
        <textarea id="message"></textarea>
    </div>
    <div>
        <button type="submit">Submit Form</button>
    </div>
</form>

The final page looks as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
</head>
<body>
<h1>Contact</h1>

<div> 
   <a href="index.html">Home</a> | 
   <a href="about.html">About</a> | 
   <a href="portfolio.html">Portfolio</a> | 
   <a href="contact.html">Contact</a> 
</div>
<hr>

<form>
    <div>
        <label for="fullname">Full Name</label><br>
        <input type="text" id="fullname">
    </div>
    <div>
        <label for="email">Email</label><br>
        <input type="email" id="email">
    </div>
    <div>
        <label for="subject">Subject</label><br>
        <input type="text" id="subject">
    </div>
    <div>
        <label for="message">Message</label><br>
        <textarea id="message"></textarea>
    </div>
    <div>
        <button type="submit">Submit Form</button>
    </div>
</form>

</body>
</html>

Great job! You have successfully built a Contact Form using HTML. The next lesson is building a Portfolio Page.

Cart review