Как создать контактную форму в две колонки, используя 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. В итоге ваша форма будет выглядеть следующим образом:

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