How to create contact form in html

HtmlHow-ToBeginner · 4 min read

How to Create a Contact Form in HTML: Simple Guide

To create a contact form in HTML, use the <form> element with input fields like <input> and <textarea> for user data, and a <button> or <input type="submit"> to send the form. Each input should have a name attribute to identify the data when submitted.

📐

Syntax

The basic structure of an HTML contact form includes the <form> tag, which wraps all input elements. Inside, use <label> to describe each input, <input> for single-line text fields, <textarea> for multi-line messages, and a submit button to send the form.

<form action="URL" method="POST">: Defines where and how the form data is sent.
<label for="id">: Connects text to an input for accessibility.
<input type="text" name="fieldname" id="id">: Single-line input field.
<textarea name="message" id="id"></textarea>: Multi-line text input.
<button type="submit">Send</button>: Button to submit the form.

html

<form action="/submit" 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="4" required></textarea>

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

💻

Example

This example shows a simple contact form with fields for name, email, and message. It uses labels for accessibility and a submit button to send the data.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; max-width: 400px; margin: auto; }
    label { display: block; margin-top: 15px; font-weight: bold; }
    input, textarea { width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box; }
    button { margin-top: 15px; padding: 10px 15px; font-size: 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit" 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</button>
  </form>
</body>
</html>

Output

A simple webpage with a heading 'Contact Us' and a form containing labeled fields for Name, Email, and Message, plus a 'Send' button.

⚠️

Common Pitfalls

Common mistakes when creating contact forms include:

Not using name attributes on inputs, so data won't be sent.
Missing label elements, which hurts accessibility.
Forgetting to set method="POST" or action attributes, so the form doesn't submit properly.
Using incorrect input types, like type="text" for emails instead of type="email", which disables browser validation.

Example of a wrong and right way:

html

<!-- Wrong: Missing name and label -->
<form>
  <input type="text" placeholder="Your name">
  <input type="submit" value="Send">
</form>

<!-- Right: Includes name and label -->
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Send</button>
</form>

📊

Quick Reference

Remember these tips when making contact forms:

Always use <label> for inputs for better accessibility.
Set name attributes on inputs to identify data.
Use appropriate input types like email for emails.
Use method="POST" and specify action to handle form submission.
Include required attribute to make fields mandatory.

✅

Key Takeaways

Use the

Include tags linked to inputs for accessibility and clarity.

Always add name attributes to inputs so data can be sent correctly.

Use appropriate input types like email and textarea for better user experience.

Add required attributes to ensure users fill out necessary fields.