SIL Contact Drop Down

by lukerichison

HTML

<link rel="stylesheet" href="http://formalize.me/assets/css/demo.css">
<script src="http://formalize.me/assets/js/jquery.formalize.js"></script>
<fieldset id="Contact">
    <input type="checkbox" name="newsletter" id="newsletter"/>
    <label for="newsletter">Sign up for our email newsletter</label>
    <br/>
    <span class="icon-user"></span>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name"></input>
    <br/>
    <span class="icon-envelope"></span>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Email (choose preferred contact method &rarr;)" />
    <input type="radio" name="prefer" id="prefer-email" title="choose your pereferred contact method"/>
    <br/>
    <span class="icon-phone"></span>
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="Phone" />
    <input type="radio" name="prefer" id="prefer-phone" title="choose your pereferred contact method"/>
    <br/>
    <span class="icon-map-marker"></span>
    <label for="address">Address</label>
    <input type="text" name="address" id="address" placeholder="Street Address" />
    <br/>
    <span class="icon-bullhorn"></span>
    <label for="message">Message</label>
    <textarea name="message" id="message" placeholder="Send us a message, or leave this field blank if you just want the newsletter" rows="5"></textarea>
    <br/>
    <input type="submit" />
</fieldset>

CSS

@import url(http://jsfiddle.net/css/elusive-webfont.css?mahalo);
fieldset {
    position: relative;
    margin: 15px 5px 5px;
    background-color: #CCC2B8;
    border: 4px solid #4C352C;
    border-radius: 6px;
    padding: 0.5em;
    white-space: nowrap;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}
fieldset:before, fieldset:after {
    bottom: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
fieldset:before {
    border-color: rgba(76, 53, 44, 0);
    border-bottom-color: #4C352C;
    border-width: 20px;
    right: 10px;
    margin-right: 4px;
}
fieldset:after {
    border-color: rgba(204, 194, 184, 0);
    border-bottom-color: #CCC2B8;
    border-width: 14px;
    right: 10px;
    margin-right: 10px;
}
fieldset p {
    font-size: 0.875em;
    font-style: italic;
    margin: 0;
    padding-bottom: 0.25em;
}
fieldset label:not([for="newsletter"]) {
    display: none;
    width: 5em;
}
fieldset input[type="text"],
fieldset textarea {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 0.5em;
    box-shadow: inset 0 8px 24px -8px #CCC2B8, 1px 2px 6px -2px #4C352C;
    background-color: #F0f0f0;
    border-radius: 4px;
}
fieldset #email,
fieldset #phone {
    margin-right: -1.75em;
}
fieldset input[type="radio"] {
    margin-top: 4px;
}
fieldset span[class^="icon-"] {
    position: absolute;
    height: 1.8em;
    line-height: 1.8em;
    margin-left: 0.5em;
}
fieldset input[type="submit"] {
    width: 100%;
    background-color: #665049;
    background-image: none;
    margin-bottom: 0.25em;
    color: #B7A29F;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    border: 1px solid #4C352C;
    height: 2.5em;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
fieldset input[type="submit"]:hover,
fieldset input[type="submit"]:active {
    background-image: linear-gradient(to bottom, #665049 0%,#4C352C 100%);
    color: #F0F0F0;
   ...