No products in the cart.
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
Step 6: Add a Subject 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.