<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.