Building a Contact Form

A contact form lets potential clients or employers reach you without exposing your email address. At minimum it needs: Name, Email, Message, and a Submit button.

Basic Structure

<form class="contact-form">
  <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="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

Styling Tips

Use width: 100% on inputs and textareas so they fill the form width. Add a visible border and border-radius. Use :focus pseudo-class to highlight the active field.

input:focus, textarea:focus {
  outline: none;
  border-color: #00bcd4;
  box-shadow: 0 0 0 3px rgba(0,188,212,.2);
}