<h1>Message</h1>
<form action="#" id="contact_form" class="contact-form contact-grid">
    
  <div class="form-field name">
    <label class="label" for="fname">full name *</label>
    <input id="fname" type="text" required>
  </div>

  <div class="form-field email">
    <label class="label" for="email">email *</label>
    <input id="email" type="email" required>
  </div>
    
  <div class="form-field phone">
    <label class="label" for="phone">phone *</label>
    <input id="phone" type="tel" required>
  </div>
    
  <div class="form-field subject">
    <label class="label">subject *</label>
    <select name="subject" form="contact_form" required>
      <option value="appointment" selected>Appointment</option>
      <option value="cancellation">Cancellation</option>
      <option value="order">Order</option>
      <option value="other">Other</option>
    </select>
  </div>
    
  <div class="form-field comment-box">
    <label class="label">message</label>
    <textarea name="comment-box" id="message"></textarea>
  </div>
  
  <div class="submit-button">
    <button id="submit-btn" class="btn" type="submit" value="submit" onclick="validateForm()">submit</button>
  </div>
    
</form>
/* ============ universal styles ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============ .contact-form CSS grid ============ */

/* contact form CSS grid layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 35px;
}

/* grid item */
.submit-button {
  justify-self: center;
}

@media screen and (min-width: 736px) {
  
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px 40px 140px 40px;
    grid-gap: 35px;
  }

  /* --- grid items --- */
  .comment-box {
    grid-column: 1 / -1;
  }
  
  .submit-button {
    justify-self: start;
  }
  
}

/* ============ form styles ============ */

/* adds space on top for label */
.contact-form {
  margin-top: 30px;
}

/* positioning .form-field relative, so .lable can be positioned on-top (absolute) */
.form-field {
  position: relative;
}

/* label styles */
.label {
  position: absolute;
  left: 0;
  top: -25px;
  line-height: 26px;
  font-weight: 400;
  text-transform: capitalize;
  color: #888;
  cursor: text;
}

/* input styles */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {

  border: none;
  height: 40px;
  padding: 0 10px;
  width: 100%;
  background-color: rgb(247,247,247);
  color: rgb(85,85,85);
}

/* text area styles */
textarea {
  height: 140px !important;
  padding: 10px 10px;
  
}


/* ============ submit button styles ============ */
.btn {
  background-color: rgb(61,197,223);
  color: white;
  border: 2px solid rgb(61,197,223);
  display: inline-block;
  padding: 12px 30px;
  min-width: 200px;
  margin-top: 15px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.btn:hover {
  background-color: white;
  color: rgb(61,197,223);
}

.btn:active {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.