<form>
  <div class="input-container">
    <label for="name">Your Name</label>
    <input name="name" id="name" type="text" required maxlength="100">
  </div>
  
  <div class="input-container">
    <label for="email">Your Email Address</label>
    <input name="email" id="email" type="email" required maxlength="100">
  </div>
    
  <div class="input-container">
    <label for="tel">Your Phone Number</label>
    <input name="tel" id="tel" type="tel" maxlength="25">
  </div>
  
  <div class="input-container">
    <label for="message">How can we help you?</label>
    <textarea name="message" id="message" required maxlength="1000">
    </textarea>
  </div>
  
  <div class="actions">
    <button type="submit">Send</button>
    <button type="clear">Clear</button>
  </div>
</form>
* { box-sizing: border-box }

:root {
  --border: #ffffff6b;
  --background: #121c29;
  --text: #ffffffdb;
  --accent: #ffde96;
  --accent-contrast: #121c29;
  --danger: #e9b9c6;
  background: var(--background);
  color: var(--text);
  font-family: sans-serif;
}

form {
  max-width: 32rem;
  margin: 2rem auto;
}

.input-container { margin: 1rem 0 }

/* add a * before the label of the required elements */
div.input-container:has(:required) label::before {
  content: "* ";
  color: var(--danger);
}

/* add (optional) after the label of the optional fields */
div.input-container:has(:where(input, textarea):not(:required)) label::after {
  content: " (optional)";
  font-style: italic;
}

label { margin-left: 15px }

input, textarea {
  display: block;
  font-family: sans-serif;
  width: 100%;
  background: var(--background);
  color: var(--text);
  border: solid 1px var(--border);
  border-radius: 24px;
  padding: 1ex 15px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
  min-height: 20ex;
}

.actions {
  display: flex;
  gap: 12px;
}

button {
  border: solid 1px var(--border);
  background: none;
  font-size: 1rem;
  color: var(--text);
  padding: 1ex 4ch;
  border-radius: 42px;
}
button:not(:disabled):hover { cursor: pointer }
button[type="submit"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.