Contact Form 7 Markup with Sass

contact-form-7.html

<!-- Misc Form  -->
<div class="rtp-form-field"><label for="your-name">Your Name <span class="required">*</span></label>[text* your-name id:your-name]</div>
<div class="rtp-form-field"><label for="contact-email">Email <span class="required">*</span></label>[email* email id:contact-email]</div>
<div class="rtp-form-field"><label for="company-name">Company Name <span class="required">*</span></label>[text* company-name id:company-name]</div>
<div class="rtp-form-field"><label for="street-address">Street Address</label>[text street-address id:street-address]</div>
<div class="rtp-form-field"><label for="apartment-suite">Apartment/Suite</label>[text apartment-suite id:apartment-suite]</div>
<div class="rtp-form-field"><label for="city">City</label>[text city id:city]</div>
<div class="rtp-form-field"><label for="state">State</label>[text state id:state]</div>
<div class="rtp-form-field"><label for="zip">Zip <span class="required">*</span></label>[text* zip id:zip]</div>
<div class="rtp-form-field"><label for="phone">Phone</label>[text phone id:phone]</div>
<div class="rtp-form-field"><label for="fax">Fax</label>[text fax id:fax]</div>
<div><label for="help-message">How can we help you? <span class="required">*</span></label>[textarea* help-message id:help-message]</div>
<div class="btn-container clearfix">[submit "Send"]</div>

contact-form.css

.wpcf7 .rtp-form-field { clear: both; margin-bottom: 15px; overflow: hidden; }
.wpcf7 label { font-weight: bold; float: left; margin-bottom: 4px; width: 100%; }
.wpcf7 .wpcf7-form-control-wrap { float: left; display: block; margin-bottom: 0; width: 100%; }
.wpcf7 input { font-size: 1em; float: left; height: 35px; padding: 0 5px; width: 100%; }
.wpcf7 textarea { height: 100px; padding: 5px; width: 100%; }
.wpcf7 .wpcf7-submit { height: 35px; width: 100%; }
.wpcf7 .wpcf7-validation-errors { clear: both; margin: 15px 0 0; overflow: hidden; padding: 8px 10px; }
.wpcf7 .wpcf7-mail-sent-ok { clear: both; margin: 15px 0 0; overflow: hidden; padding: 10px; }
.wpcf7 .wpcf7-not-valid-tip { border: 0; color: #b94a48; font-size: 1em; left: 5px; padding: 0 2px; position: absolute; top: 7px; width: 80%; z-index: 100; }

#content .wpcf7 .btn-container { text-align: center; margin-bottom: 0; overflow: visible; position: relative; }

#content img.ajax-loader { bottom: -25px; left: 49%; margin: 10px 0 0; position: absolute; }

.ie8 .wpcf7 input { line-height: 35px; }

contact-form.scss

/* Sass: Contact form 7 Style */
.wpcf7 {
    // Field Container
    .rtp-form-field { clear: both; margin-bottom: 15px; overflow: hidden; }
    
    // Label
    label { font-weight: bold; float: left; margin-bottom: 4px; width: 100%; }
    
    .wpcf7-form-control-wrap { float: left; display: block; margin-bottom: 0; width: 100%; }
    
    // Input, Textarea, Button
    input { font-size: 1em; float: left; height: 35px; padding: 0 5px; width: 100%; }
    textarea { height: 100px; padding: 5px; width: 100%; }
    .wpcf7-submit { height: 35px; width: 100%; }
        
    // Validation
    .wpcf7-validation-errors { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; clear: both; margin: 15px 0 0; overflow: hidden; padding: 8px 10px; }
    .wpcf7-mail-sent-ok { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; clear: both; margin: 15px 0 0; overflow: hidden; padding: 10px; }
    .wpcf7-not-valid-tip { border: 0; color: #b94a48; font-size: 1em; left: 5px; padding: 0 2px; position: absolute; top: 7px; width: 80%; z-index: 100; }
    span.required { color: #b94a48; }
}

// Additional Fixing
// Button
#content .wpcf7 .btn-container { text-align: center; margin-bottom: 0; overflow: visible; position: relative; }
// Ajax Loader
#content img.ajax-loader { bottom: -25px; left: 49%; margin: 10px 0 0; position: absolute; }

// IE Fixing
.ie8 .wpcf7 input { line-height: 35px; }