Contact Form 7

Contact Form 7 plugin allows you to build contact forms with additional fields. Original plugin documentation is located at http://contactform7.com/docs/.

How to Style Contact Form 7? #

If you want to display form fields with original Impreza styling (as built-in Contact Form element) you need to use special semantics when editing a form:

<div class="w-form-row for_name">
<div class="w-form-row-field">
[text* your-name placeholder "Your Name *"]
</div>
</div>
<div class="w-form-row for_email">
<div class="w-form-row-field">
[email* your-email placeholder "Email *"]
</div>
</div>
<div class="w-form-row for_phone">
<div class="w-form-row-field">
[tel your-phone placeholder "Phone Number"]
</div>
</div>
<div class="w-form-row for_message">
<div class="w-form-row-field">
[textarea* your-message placeholder "Message *"]
</div>
</div>
<div class="w-form-row form_submit">
<div class="w-form-field">
[submit class:w-btn class:color_primary "Send Message"]
</div>
</div>

And append next code to Theme Options > Custom Code > Custom CSS:

.wpcf7 .w-form-row.for_name .w-form-row-field::before,
.wpcf7 .w-form-row.for_email .w-form-row-field::before,
.wpcf7 .w-form-row.for_phone .w-form-row-field::before,
.wpcf7 .w-form-row.for_message .w-form-row-field::before {
    z-index: 1;
    top: 15px;
    transform: initial;
    transition: initial;
}
.wpcf7 input[type="text"], 
.wpcf7 input[type="password"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="search"],
.wpcf7 textarea, .wpcf7 select {
    padding: 8px 12px 8px 50px;
}