<form>
<header class="form-header">
<h2>Contact Us</h2>
<p>This is an example contact form that might appear on a design agencies website. It features a form header and footer along with required fields and some notes.</p>
</header>
<div class="form-group">
<label for="input-username">Your Name <span class="req">*</span></label>
<div class="row">
<div class="col col-6">
<input type="text" class="input" placeholder="First Name" required>
</div>
<div class="col col-6">
<input type="text" class="input" placeholder="Last Name" required>
</div>
</div>
</div>
<div class="form-group">
<label>Email Address <span class="req">*</span></label>
<p class="note">Your email will not be shared with anyone.</p>
<input type="email" class="input" placeholder="example@gmail.com" required>
</div>
<div class="form-group">
<label>What are you interested in? <span class="req">*</span></label>
<select class="input" required>
<option disabled selected>Select One...</option>
<option>Web Design</option>
<option>Development</option>
<option>Content Creation</option>
<option>Search Engine Stuff</option>
</select>
</div>
<div class="form-group">
<label>Your Message</label>
<textarea class="input" rows="4"></textarea>
</div>
<footer class="form-action">
<button class="button green">Submit Form</button>
<div class="note input-align float-right">
<p><em>* Required fields</em></p>
</div>
</footer>
</form>
form {
max-width: 600px;
margin-left: auto;
margin-right: auto;
background: $white;
background-clip: padding-box;
border: 1px solid rgba($black, 0.1);
@include box-shadow(0 1px 6px rgba($black, 0.1));
@include border-radius();
}
form .form-group {
padding: 0 20px;
}
form .form-header {
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
padding: 20px;
text-shadow: 0 1px 1px rgba($black, 0.1);
background: $blue;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: rgba($black, 0.1);
@include linear-gradient(top, $blue, $blue-darker);
@include border-radius-top();
h2 {
color: $white;
}
p {
color: rgba($white, 0.75);
}
}
form .form-action {
padding: 20px;
background: $blue-pale;
border-top: 1px solid rgba($black, 0.1);
@include border-radius-bottom();
}