Creating a Contact Form

To create a contact form in HTML, you can combine various input types with a textarea for longer messages.

A contact form is one of the most common features on any website. Usually, it consists of a few text fields for the user's name and email address, and a large box for their actual message. Using a mix of specific input types ensures that you get the right kind of data from your visitors.

Recommended Form Fields

For a standard contact form, you'll typically want to include the following elements:

Name: A standard text input.
Email: An email input to ensure the user enters a valid email address format.
Subject: Another text input for the message's main topic.
Message: A textarea element for multi-line text.

The Input Element

The input element is the most common way to collect data. For a contact form, we'll use a mix of type="text" for names and subjects, and type="email" to ensure the user provides a valid email address format:

The Textarea Element

While the input tag is for single lines of text, the textarea tag is used for longer messages. It allows users to enter multiple lines and is often resizable:

Full Working Example

The following example shows a complete, styled contact form ready to be used on a "Contact Us" page:

<!DOCTYPE html>
<html>
<head>
<title>Contact Form Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  .contact-form {
    background: #fdfdfd;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 12px;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  .contact-form h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 24px;
    color: #333;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
  }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .contact-form textarea {
    height: 120px;
    resize: vertical;
  }
  .contact-form input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    transition: background-color 0.3s;
  }
  .contact-form input[type="submit"]:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>

<div class="contact-form">
  <h2>Contact Us</h2>
  <form action="/html/tags/html_form_tag.cfm" method="post">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
      <label for="subject">Subject</label>
      <input type="text" id="subject" name="subject">
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>
    </div>
    <input type="submit" value="Send Message">
  </form>
</div>

</body>
</html>

View Output Full Screen Preview

Tip: Form Submission

While HTML and CSS can create a beautiful form, you will eventually need a server-side language (like PHP or ColdFusion) to actually process the data and send the email once the user clicks "submit". For now, we are focusing on the frontend design and structure.