<div class="container">
  <form action="#">
    <label><input type="name" required> Name *</label>
    <label><input type="email" required> Email *</label>
    <label><input type="phone"> Phone (optional)</label>
    <label><input type="url"> Website (optional)</label>
    <select name="#" id="##">
      <option value="1">Subject (optional)</option>
      <option value="2">Option</option>
      <option value="3">Option</option>
      <option value="4">Option</option>
    </select>
    <textarea name="#" id="#" cols="30" rows="10" required>Message (required)</textarea>
    <button>Submit Form</button>
  </form>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 400px;
}

label,
button {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}

label {
  color: grey;
}

select {
  display: block;
  width: 45%;
  margin-bottom: 1em;
}

input,
select,
button {
  padding: .5em 1em;
}

button {
  border: 2px solid #aa0088;
  background-color: #cc00aa;
  color: white;
  font-weight: bold;
  padding: .75em 1em;
}

button:hover {
  cursor: pointer;
  background-color: #aa0088;
}

input,
select {
  border: 1px solid #888;
}

textarea {
  width: 98.5%;
  color: #888;
}

input:optional,
select:optional {
  background-color: #f8f8f8;
  color: #888;
}

input:required,
textarea:required {
  border-bottom: 3px solid #aa0088;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: 0 0 2px 1px #aa0088;
}

input:optional:focus,
select:optional:focus {
  box-shadow: 0 0 2px 1px #aaa;
}