Как создать контактную форму в две колонки, используя Contact form 7

Contact form 7 — очень гибкий плагин для создания форм в WordPress. Как мы уже писали в статье форму можно стилизировать так, как вам хочется.

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

1. С помощью конструктора форм создадим новую форму. Для правильной ее стилизации мы обрамим форму в соответствующие классы.

<div id="two-column">
<div id="left">
<p>First Name
[text* first-name]</p>
<p>Email
[email* your-email] </p>
</div>
<div id="right">
 <p>Last Name
[text* last-name] </p>
<p>Phone
[text* your-phone] </p>
</div>
<p>Subject
[text* your-subject] </p>
<p>Your message 
[textarea your-message]</p>
<p>[submit "Send"]</p>
</div>

Необходимо помнить несколько вещей.
a. Каждый элемент формы должен быть обрамлен тегом “p”, в том числе и названия полей. Мы добавили ко всему тег “br” между названиями полей и между элементами формы.
b. Вся форма обернута в css id с именем #two-column
c. Элементы, которые будут располагаться слева, обрамлены в css id с именем #left.
d. Элементы, которые будут располагаться справа, обрамлены в css id с именем #right.

2. Добавляем форму на вашу страницу и публикуем её. Теперь ваша форма будет выглядеть примерно так. Внешний вид во многом зависит от используемой темы WordPress.

3. Теперь мы добавим немного CSS в таблицу стилей темы для того, чтобы сделать контактную форму двухколоночной и немного облагородить её внешний вид.

#two-column{
        width: 550px;
}
#two-column #left{
        width: 300px;
        float: left;
}
#two-column #right{
        width: 250px;
        float: right;
}
#two-column p{
        margin-bottom: 12px;
}
#two-column input[type="text"]{
        border:none;
        border:1px solid #000;
        font-size :14px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 540px;
        padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
        width:240px;
}
#two-column textarea {
    position: relative;
    padding: 5px;
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
}
#two-column input[type="submit"]{
        padding:8px 18px;
        background:#222;
        color:#fff;
        border: 1px solid #fff;
        float:right;
        font-size: 14px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
        background: #eee;
}
#two-column input[type="submit"]:hover{
        background:#fff;
        color:#222;
        border: 1px solid #222;
}

4. В итоге ваша форма будет выглядеть следующим образом:

По всем вопросам пишите в комментариях ниже.