Contact form 7 две колонки

Contact Form 7 в 2 или более столбца (с плагином и без плагина)

Основная идея заключается в том, чтобы эти текстовые поля, такие как Имя или Адрес электронной почты, отображались в одной строке, а не под одной. Зачем? Потому что это выглядит хорошо, поэтому это увеличивает пользовательский опыт при использовании вашего сайта. Посмотрим, какие у вас есть варианты!

Я возьму плагин Contact Form 7 в качестве примера для этого урока. Я работаю с контактной формой 7 с тех пор как начал работать с WordPress. Contact Form 7 отличный выбор, когда речь идет об использовании бесплатного плагина контактной формы для веб-сайта WordPress.

По умолчанию разметка контактной формы, созданной с помощью CF7, выглядит следующим образом:

и вывод на сайте будет:

Данное отображение будет в случае отображения Contact Form 7 формы при наличии по умолчанию темы TwentySeventeen.

Вид по умолчанию, скажем честно “так себе”. Вы хотите, чтобы формы выглядели, с учетом внешнего вида вашего сайта. Хорошей новостью является то, что построитель форм CF7 допускает разметку HTML, и мы будем использовать это в наших целях.

Далее я покажу вам 2 способа отображения этих полей в нескольких столбцах.

По умолчанию CF7 допускает только разметку HTML внутри своего редактора. Чтобы использовать шорткоды, мы должны сообщить WordPress, что мы хотим включить шорткоды для CF7. Для этого существует плагин, который называется Contact Form 7 Shortcode Enabler . Чтобы использовать плагин, перейдите в раздел Плагины-> Добавить новый, найдите контактную форму 7 Shortcode Installer, установите и активируйте плагин.

Кроме того, вы можете сделать это, добавив фильтр через functions.php вашей дочерней темы WordPress:

Column Shortcodes – это плагин, который добавляет шорткоды к функциональности вашего сайта WordPress для отображения контента в нескольких столбцах. Вы можете использовать его не только для разделения полей контактной формы на отдельные столбцы, но и для любого другого контента на вашем сайте.

Есть большая вероятность, что ваша тема уже имеет встроенные шорткоды для столбцов . Поэтому перед установкой плагина убедитесь, что вы точно не имеете системы колонок при помощи своей темы или плагина (как при помощи шорт кодов, так и при помощи классов).

Чтобы использовать плагин, перейдите в «Плагины» -> «Добавить новый», найдите ” Column Shortcodes”, установите и активируйте плагин.

После установки в редакторе WordPress вы найдете новую кнопку, благодаря которой вы можете создать шорткод столбца. Давайте проверим плагин. Я перешел на свою страницу контактов, сгенерировал шорткоды для строки из двух столбцов и поместил некоторый контент в шорткоды:

Обратите внимание, что для создания строки из 2 столбцов необходимо сгенерировать шорткод для первой половины и еще один шорткод для последней половины. Вывод должен быть похож на это:

Вот как можно разделяете содержимое страницы на два столбца. Теперь, когда вы получили эти шорткоды, давайте вернемся к редактору Contact Form 7 ( Контактные формы -> Ваша контактная форма ) и используем их с полями.

Разметка моей контактной формы становится:

И вывод становится таким:

Довольно аккуратно! Чтобы поля отображались в 3 столбцах, необходимо настроить разметку контактной формы 7 так:

… И на выходе получится:

Итак, итоги данного метода:

1. Установите плагин Column Shortcodes, чтобы включить шорткоды для разделения контента на несколько столбцов.
2. Установите плагин Contact Form 7 Shortcode Enabler, чтобы разрешить использование шорткодов в редакторе CF7

Оберните контактную форму 7 полей шорт кодами, такими, как и .

Отобразить поля контактной формы 7 в столбцах с разметкой HTML

Выше я показал, как использовать плагины для расширения функциональности WordPress по умолчанию. Следующий метод заключается в использовании стандартной / базовой разметки HTML (например, div блока) и небольшого количества CSS для разделения содержимого на столбцы. Давай сделаем это.

Я собираюсь создать ряд классов для столбцов: one-half, one-third, last . Код CSS для них:

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

Последни класс .last сбрасывает последнее значение из столбцов для идеального выравнивания контейнера. Кроме того, медиа-запрос указывает, что, если экран меньше 768 пикселей (ширина экрана планшета), отображать столбцы один под другим. Другими словами, код создает отзывчивые столбцы для Contact Form 7.

Отредактируйте форму CF7 и оберните ее элементами типа div div > . /div > .

Результатом на сайте станет:

Итоги

Независимо от того, планируете ли вы показывать поля контактной формы или любой другой тип содержимого в столбцах, решения существуют. Ваша задача – выбрать, какой метод вам подходит и как вы собираетесь его реализовать. Также имейте в виду, что ваша текущая тема может содержать все необходимые инструменты.

Не стесняйтесь делиться в комментариях своими мыслями.

Источник

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

Опубликовано: ADv Дата 10.12.2013 в рубрике Настройки 2 комментария

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

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

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

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

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

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

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

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

Источник

Создаем адаптивную форму контактов в две колокни в Contact form 7

Опубликовано: ADv Дата 13.09.2014 в рубрике Код за плагин 3 комментария

В нашей предыдущей статье, посвященной работе с плагином Contact form 7, мы показывали как создать форму в две колонки. Сегодня мы расскажем о том, как создать адаптивную(резиновую) форму из двух колонок. Форма будет отображаться в две колонки на больших разрешениях, и будет сжиматься в одну на мобильных устройствах. Итоговый вариант будет выглядеть так:

HTML разметка

Для начала создадим HTML разметку для формы. Мы обернем всю форму в ID под названием “responsive-form”, а затем укажем ей количество строк и столбцов следующем образом:

Если вы опубликуете эту форму на сайте прямо сейчас, то она будет выглядеть следующим образом:

Стили CSS

Давайте посмотрим на стили css для нашей двухколоночной сетки.

Эти стили определяют строки и столбцы. Если вы взглянете на форму сейчас, то увидите, что поля выстроились в два столбца.

Добавим немного стилей форме..

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

На компьютере

На мобильном устройстве

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Источник

Как отображать поля Contact Form 7 в 2 или более колонок

Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.

Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.

Поля Contact Form 7 в 2 колонки

Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:

Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.

Поля Contact Form 7 в 3 колонки с подтверждением

Если же вы хотите сделать горизонтальную форму, где все поля и кнопка отправки будут находится в одну линию, а поле подтверждения согласия на обработку данных под ними, то используйте подобную конструкцию.

Поля Contact Form 7 в 3 колонки без подтверждения

Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:

Поля Contact Form 7 в 4 колонки

Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:

И без подтверждения:

Как убрать автоматическую вставку тега P в Contact form 7

По умолчанию Contact Form 7 вставляет тег

когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.

1. Найдите в корневой папке вашего сайта файл wp-config.php;
2. Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That’s all, stop editing! Happy blogging. */ ;
3. Вставьте этот код define( ‘WPCF7_AUTOP’, false ); НАД надписью из пункта 2;
4. Сохраните файл.

Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Код формы:
[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 «Отправить»]

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

Источник