HTML Form Codes

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.

HTML Login Form Template

A login form asks for a username (or email) and a password. This template is simple and clean, and the browser checks the required fields.

HTML and CSS code

<style>
  .login-form { max-width: 320px; font-family: Arial, sans-serif; border: 1px solid #ccc; padding: 20px; border-radius: 6px; }
  .login-form label { display: block; margin: 10px 0 4px; }
  .login-form input[type="text"], .login-form input[type="password"] {
    width: 100%; padding: 8px; box-sizing: border-box;
  }
  .login-form button { margin-top: 14px; width: 100%; padding: 10px; background: #0073aa; color: #fff; border: 0; border-radius: 4px; }
</style>

<form class="login-form" action="login.php" method="post">
  <h2>Login</h2>

  <label for="user">Username</label>
  <input type="text" id="user" name="username" required autofocus>

  <label for="pass">Password</label>
  <input type="password" id="pass" name="password" required>

  <label><input type="checkbox" name="remember"> Remember me</label>

  <button type="submit">Log in</button>
</form>

Output in the browser: