Как сделать горизонтальную форму в Contact Form 7
По умолчанию форма, созданная с помощью плагина Contact Form 7, отображается вертикально в столбец. Разберёмся как расположить поля горизонтально.
Включаем поддержку шорткодов в Contact Form 7 и устанавливаем плагин Column Shortcodes.
Column Shortcodes позволяет отображать содержимое в несколько колонок в разных вариациях.
Соответственно, полный список шорткодов выглядит следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[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] |
Исходная форма расположена вертикально.
И имеет следующий код.
|
1 2 3 4 5 6 7 8 9 10 |
<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).
|
1 2 3 4 5 6 7 8 9 10 |
[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-код в «Внешний вид» -> «Настроить» -> «Дополнительные стили».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.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; } |
Сохраняем изменения и проверяем результат.
Сначала думал что в посте реальные формы вставлены, а это скриншоты)) Спасибо за полезный материал, нужно будет попробовать. Хотя я в коде сейчас мало что понимаю, стандартно CF7 использую и мне хватает. А для форм чуть посложней ru.wordpress.org/plugins/stepform вот этот плагин недавно нашел в поиске.
Добрый день! Можете подсказать, у меня форма с 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 «Отправить»]
Буду очень благодарен если подскажите в чем ошибка