The Web Design Survival Guide | Simple Contact Form

by todaly1

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<style>

  #contact-form {
  width: 420px;
  height: 200px;
  border: #666666 solid 1px;
  padding: 10px;
  margin: 20px auto 20px auto;
  font-family: Helvetica, Arial, sans-serif;
  }  

  .form-group-1 {
  float: left;
  margin-bottom: 8px;
  }

  .form-group-2 {
  float: right;
  margin-top: px;
  }
  
  .clear{
  clear: both;
  padding-top:10px
  };

</style>
</head>

<body class="contact-form">


  <form action="contact_form.php" method="post" id="contact-form">

    <h2> Contact Form</h2>

    <div class="form-group-1">
      <input type="text" placeholder="Your Name" size="36" id="name" >
    </div>

    <div class="form-group-2">
      <textarea cols="24" rows="5" placeholder="Your Message" id="message"  ></textarea>
    </div>

    <div class="form-group-1">
      <input type="email" placeholder="Your Email" size="36" id="email">
    </div>

    <div class="form-group-1">
      <input type="tel" placeholder="Your Phone" size="36" id="phone">
    </div>

<div class="clear">
      <button type="submit">Send Message</button>
                
      <div class="form-group-2">
        <select name="inquiry-type">
          <option value="sales">Sales Question</option>
          <option value="support">Support Question</option>
          <option value="general">General Question</option>
          <option value="donate">How to Donate</option>
        </select>
      </div>
    </div>

  </form>

</body>
</html>