HTML Contact Form Template

Here is a clean contact form that you can copy to your site. It has name, email, subject and message fields, simple CSS, and the browser checks the required fields before sending.

HTML and CSS code

<style>
  .contact-form { max-width: 420px; font-family: Arial, sans-serif; }
  .contact-form label { display: block; margin: 12px 0 4px; font-weight: bold; }
  .contact-form input, .contact-form textarea {
    width: 100%; padding: 8px; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box;
  }
  .contact-form button {
    margin-top: 14px; padding: 10px 20px; background: #0073aa; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  }
</style>

<form class="contact-form" action="contact.php" 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="subject">Subject</label>
  <input type="text" id="subject" name="subject">

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

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

Output in the browser:

Important: the form needs a server file

HTML alone cannot send an email. The action="contact.php" file must read the values and send the mail. A PHP example is in PHP mail function. Always check and clean the values on the server, and consider a spam check like a CAPTCHA.

Related: HTML Forms.

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.