Как сделать горизонтальную форму в 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 «Отправить»]
Буду очень благодарен если подскажите в чем ошибка
I do consider all the concepts you’ve offered for your post. They are really convincing and can certainly work. Nonetheless, the posts are too short for beginners. May just you please prolong them a bit from subsequent time? Thanks for the post.