Стилизируем Contact Form 7

Contact form 7 — замечательный плагин для wordpress и он даже не нуждается в представлении у wordpress комьюнити. Этот плагин позволяет вам создавать всяческие виды форм, начиная с простой формы контактов и заканчивая полноценными опросами.

Многие пользователи этого плагина часто задаются вопросом, как же стилизировать внешний вид своей формы. Вот вам инструкция по стилизации.

Вот форма, которую мы будем стилизировать.
Все элементы формы обрамлены тегом p.

<h2>Here are some text to go with the form</h2>
<p>Your Name (required) </p>
<p>Your Email (required)[email* your-email] </p>
<p>Subject  </p>
<p>Your Message[textarea your-message]</p>
<p>[submit class:buttons_form "Send"]</p>

Вот код CSS для добавления в вашу таблицу стилей.

.wpcf7-form{
    background: #000;
    width : 375;
    height: 460px;
    overflow: hidden;
    margin: 20px;
    border: 2px solid #fff;
}
.wpcf7-form h2{
    font-size : 20px;
    text-align: center;
}
.wpcf7-form input, .wpcf7-form textarea {
    border-color: #808080 #C0C0C0 #C0C0C0 #D4D4D4;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    line-height: 16px;
    font-size: 14px;
    width: 350px;
    float: none;
    margin: 0;
}
.wpcf7-form textarea {
    line-height: 16px;
    font-size: 14px;
    height: 100px;
}
.wpcf7-form p{
    font-size : 14px;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 290px;
    padding: 0 0 10px;
    color: #fff;
}

Кнопки используют следующий класс css.

.buttons_form {
     padding: 0px;
     height: 30px;
     width: 150px !important;
     border: none !important;
     cursor: pointer;
     color: #fff;
     -webkit-border-radius: .5em;
     -moz-border-radius: .5em;
     border-radius: .5em;
     color: #faddde;
     border: solid 1px #980c10;
     background: #d81b21;
     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}

Вот так выглядит форма после применения стилей.

Очень пестро и не очень красиво, однако суть, мы надеемся, уловить можно. Естественно, необходимо подправить стили на свои для устранения дисгармонии формы с общим дизайном сайта. Все вопросы — в комментарии.
Сам плагин можно скачать по этой ссылке: http://wordpress.org/extend/plugins/contact-form-7/