Как сделать горизонтальную форму в Contact Form 7

Опубликовано 11.08.201811.12.2021 автором Денис Янчевский

По умолчанию форма, созданная с помощью плагина Contact Form 7, отображается вертикально в столбец. Разберёмся как расположить поля горизонтально.

Включаем поддержку шорткодов в Contact Form 7 и устанавливаем плагин Column Shortcodes.

Column Shortcodes позволяет отображать содержимое в несколько колонок в разных вариациях.

Соответственно, полный список шорткодов выглядит следующим образом.

[full_width][/full_width]
[one_half][/one_half]
[one_half_last][/one_half_last]
[one_third][/one_third]
[one_third_last][/one_third_last]
[one_fourth][/one_fourth]
[one_fourth_last][/one_fourth_last]
[two_third][/two_third]
[two_third_last][/two_third_last]
[three_fourth][/three_fourth]
[three_fourth_last][/three_fourth_last]
[one_fifth][/one_fifth]
[one_fifth_last][/one_fifth_last]
[two_fifth][/two_fifth]
[two_fifth_last][/two_fifth_last]
[three_fifth][/three_fifth]
[three_fifth_last][/three_fifth_last]
[four_fifth][/four_fifth]
[four_fifth_last][/four_fifth_last]
[one_sixth][/one_sixth]
[one_sixth_last][/one_sixth_last]
[five_sixth][/five_sixth]
[five_sixth_last][/five_sixth_last]

[full_width][/full_width]

[one_half][/one_half]

[one_half_last][/one_half_last]

[one_third][/one_third]

[one_third_last][/one_third_last]

[one_fourth][/one_fourth]

[one_fourth_last][/one_fourth_last]

[two_third][/two_third]

[two_third_last][/two_third_last]

[three_fourth][/three_fourth]

[three_fourth_last][/three_fourth_last]

[one_fifth][/one_fifth]

[one_fifth_last][/one_fifth_last]

[two_fifth][/two_fifth]

[two_fifth_last][/two_fifth_last]

[three_fifth][/three_fifth]

[three_fifth_last][/three_fifth_last]

[four_fifth][/four_fifth]

[four_fifth_last][/four_fifth_last]

[one_sixth][/one_sixth]

[one_sixth_last][/one_sixth_last]

[five_sixth][/five_sixth]

[five_sixth_last][/five_sixth_last]

Исходная форма расположена вертикально.

И имеет следующий код.

<label> Ваше имя 
    [text* your-name] </label>

<label> Ваш e-mail 
    [email* your-email] </label>

<label> Сообщение
    [textarea your-message] </label>

[submit "Отправить"]

<label> Ваше имя

[text* your-name] </label>

<label> Ваш e-mail

[email* your-email] </label>

<label> Сообщение

[textarea your-message] </label>

[submit "Отправить"]

Расположим поля «Ваше имя» и «Ваш e-mail» на одной строке.

Для этого, код первого поля оборачиваем шорткодом one_half, а код второго — one_half_last (последнее поле в строке всегда должно заканчиваться соответствующим шорткодом с суффиксом _last).

[one_half]<label> Ваше имя 
    [text* your-name] </label>[/one_half]

[one_half_last]<label> Ваш e-mail 
    [email* your-email] </label>[/one_half_last]

<label> Сообщение
    [textarea your-message] </label>

[submit "Отправить"]

[one_half]<label> Ваше имя

[text* your-name] </label>[/one_half]

[one_half_last]<label> Ваш e-mail

[email* your-email] </label>[/one_half_last]

<label> Сообщение

[textarea your-message] </label>

[submit "Отправить"]

Проверяем результат.

По умолчанию Column Shortcodes не добавляем отступы между колонками. Исправим это, добавив следующий CSS-код в «Внешний вид» -> «Настроить» -> «Дополнительные стили».

.full_width  {
	width: 100%;
}
.one_half {
	width: 49% !important;
	margin-right: 2% !important;
}
.one_half.last_column {
	width: 49% !important;
	margin-right: 0px !important;
}
.one_third {
	width: 32% !important;
	margin-right: 2% !important;
}
.one_third.last_column {
	width: 32% !important;
	margin-right: 0px !important;
}
.two_third {
	width: 66% !important;
	margin-right: 2% !important;
}
.two_third.last_column {
	width: 66% !important;
	margin-right: 0px !important;
}
.one_fourth {
	width: 23.5% !important;
	margin-right: 2% !important;
}
.one_fourth.last_column {
	width: 23.5% !important;
	margin-right: 0px !important;
}
.three_fourth {
	width: 74.5% !important;
	margin-right: 2% !important;
}
.three_fourth.last_column {
	width: 74.5% !important;
	margin-right: 0px !important;
}
.one_fifth {
	width: 18.4% !important;
	margin-right: 2% !important;
}
.one_fifth.last_column {
	width: 18.4% !important;
	margin-right: 0px !important;
}
.two_fifth {
	width: 39% !important;
	margin-right: 2% !important;
}
.two_fifth.last_column {
	width: 39% !important;
	margin-right: 0px !important;
}
.three_fifth {
	width: 59% !important;
	margin-right: 2% !important;
}
.three_fifth.last_column {
	width: 59% !important;
	margin-right: 0px !important;
}
.four_fifth {
	width: 79.6% !important;
	margin-right: 2% !important;
}
.four_fifth.last_column {
	width: 79.6% !important;
	margin-right: 0px !important;
}
.one_sixth {
	width: 15% !important;
	margin-right: 2% !important;
}
.one_sixth.last_column {
	width: 15% !important;
	margin-right: 0px !important;
}

.full_width {

width: 100%;

}

.one_half {

width: 49% !important;

margin-right: 2% !important;

}

.one_half.last_column {

width: 49% !important;

margin-right: 0px !important;

}

.one_third {

width: 32% !important;

margin-right: 2% !important;

}

.one_third.last_column {

width: 32% !important;

margin-right: 0px !important;

}

.two_third {

width: 66% !important;

margin-right: 2% !important;

}

.two_third.last_column {

width: 66% !important;

margin-right: 0px !important;

}

.one_fourth {

width: 23.5% !important;

margin-right: 2% !important;

}

.one_fourth.last_column {

width: 23.5% !important;

margin-right: 0px !important;

}

.three_fourth {

width: 74.5% !important;

margin-right: 2% !important;

}

.three_fourth.last_column {

width: 74.5% !important;

margin-right: 0px !important;

}

.one_fifth {

width: 18.4% !important;

margin-right: 2% !important;

}

.one_fifth.last_column {

width: 18.4% !important;

margin-right: 0px !important;

}

.two_fifth {

width: 39% !important;

margin-right: 2% !important;

}

.two_fifth.last_column {

width: 39% !important;

margin-right: 0px !important;

}

.three_fifth {

width: 59% !important;

margin-right: 2% !important;

}

.three_fifth.last_column {

width: 59% !important;

margin-right: 0px !important;

}

.four_fifth {

width: 79.6% !important;

margin-right: 2% !important;

}

.four_fifth.last_column {

width: 79.6% !important;

margin-right: 0px !important;

}

.one_sixth {

width: 15% !important;

margin-right: 2% !important;

}

.one_sixth.last_column {

width: 15% !important;

margin-right: 0px !important;

}

Сохраняем изменения и проверяем результат.

2 комментариев к записи «Как сделать горизонтальную форму в Contact Form 7»

Максим:

09.09.2019 в 11:48

Сначала думал что в посте реальные формы вставлены, а это скриншоты)) Спасибо за полезный материал, нужно будет попробовать. Хотя я в коде сейчас мало что понимаю, стандартно CF7 использую и мне хватает. А для форм чуть посложней ru.wordpress.org/plugins/stepform вот этот плагин недавно нашел в поиске.

Ответить
Виталий:

12.09.2019 в 16:36

Добрый день! Можете подсказать, у меня форма с 7 строк. Я хочу расположить первые 6 в 3 столбика, а 7 под ними.
Но неправильно отображается (какой-то непонятной лесенкой, и во второй строке последнее поле съезжает на следующую строку)

Ссылка на скриншот: http://prntscr.com/p585f2

Код формы:
[one_third]Тип транспорта
[select* menu-65 «Самолет» «Вертолет»][/one_third]
[one_third]Дата с
[date date-356][/one_third]
[one_third_last]Дата до
[date date-827][/one_third_last]
[one_third]Город отправления
[text text-801][/one_third]
[one_third]Город прибытия
[text text-942][/one_third]
[one_third]Ваше имя (обязательно)[text text-492][/one_third_last]
Телефон (обязательно)
[tel* tel-682]
Отправляя запрос, Вы соглашаетесь с нашей политикой конфеденциальности
[submit «Отправить»]

Буду очень благодарен если подскажите в чем ошибка

Ответить