26 Янв
2019
comments off2019
Contact form 7 готовые шаблоны-форма поиска тура
Контактная форма в 2 колонки для поиска выгодного тура c выпадающими списками.
Важно! Стили приведенные в примере только создают форму в 2 колонки, для визуального оформления необходимо задать свои стили.
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 | #responsive-form-turu{ max-width:610px /*-- change this to get your desired form width --*/; margin:0 auto; width:100%; } .form-ryad { width: 100%; } .column-pervaya, .column-full { float: left; position: relative; padding: 0.65rem; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .clearfix:after { content: ""; display: table; clear: both; } /**---------------- Media query ----------------**/ @media only screen and (min-width: 48em) { .column-pervaya{ width: 50%; } } |
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 | <div id="responsive-form-turu" class="clearfix"> <div class="form-ryad"> <div class="column-pervaya"><h4>Ваше имя (*)</h4> [text* your-name]</div> <div class="column-pervaya"><h4>Тип тура</h4> [select your-browser1 include_blank "Автобусные туры по Европе" "Самая выгодная Европа" "Авиатуры" "Отель+авиа (пакетные туры)" "Отдых на море" "Бюджетные туры" "Туры выходного дня" "Туры в безвизовые страны" "Туры по Украине" "Базы отдыха Украины" "Чартерные программы" "Активный отдых" "Круизы" "Образовательные программы" "Гастрономические туры" "Горнолыжные туры" "Детские туры" "Экзотика" "Корпоративные туры" "SPA Курорты" "Лечебные туры" "Туры на 8 марта" "Событийный туризм" "Новогодние туры" "Рекламные туры" "Туры на майские праздники" "Свадебные туры" "Яхты"]</div> </div> <div class="form-ryad"> <div class="column-pervaya"><h4> Ваш e-mail (*)</h4>[email* your-email]</div> <div class="column-pervaya"><h4>Куда едем?</h4> [select your-browser2 include_blank "Предложите мне!" "Австралия" "Австрия" "Азербайджан" "Албания" "Андорра" "Аргентина" "Армения" "Бельгия" "Болгария" "Бразилия" "Ватикан" "Великобритания" "Венгрия" "Вьетнам" "Гватемала" "Гондурас" "Греция" "Грузия" "Дания" "Доминиканская республика" "Египет" "Замбия" "Занзибар" "Зимбабве" "Израиль" "Индия" "Индонезия" "Остров Бали" "Иордания" "Иран" "Ирландия" "Исландия" "Испания" "Италия" "Камбоджа" "Канада" "Люксембург" "Маврикий" "Мадагаскар" "Канарские острова" "Кения" "Кипр" "Китай" "Куба" "Лаос" "Латвия" "Литва" "Лихтенштейн" "Мальдивы" "Мальта" "Мексика" "Монако" "Мьянма" "Непал" "Нидерланды" "Новая Зеландия" "Норвегия" "ОАЭ" "Перу" "Польша" "Португалия" "Россия" "Румыния" "Сан-Марино" "Сингапур" "Словакия" "Словения" "США" "Таиланд" "Танзания" "Турция" "Уганда" "Украина" "Филиппины" "Финляндия" "Франция" "Французская" "Полинезия" "Хорватия" "Черногория" "Чехия" "Чили" "Швейцария" "Швеция" "Шотландия" "Шри-Ланка" "Эквадор" "Эстония" "ЮАР" "Южная Корея" "Япония"]</div> </div> <div class="form-ryad"> <div class="column-pervaya"><h4>Телефон</h4> [tel tel-643 class:tel]</div> <div class="column-pervaya"><h4>Желаемые даты</h4> c [date date-317] по [date date-318]</div> </div> <div class="form-ryad"> <div class="column-pervaya"><h4>Сколько человек</h4> [text text-555]</div> <div class="column-pervaya"><h4>Примерный бюджет</h4> [select your-browser include_blank "До 100 долл" "до 200" "до 300" "до 400" "до 500" "до 600" "до 700" "до 800" "до 1000" "до 1200" "до 1500" "до 2000" "до 2500" "до 3000" "до 3500" "до 4000" "до 4500" "до 5000" "свыше 5000 долларов"]</div> </div> <div class="form-row"> <div class="column-full"><center>[submit class:send-tour "Предложите мне выгодный тур!"]</center></div> </div> </div> |
Простое редактирование Contact form 7 Стилями
Давайте начнем с внесения некоторых общих правок, которые будут применяться ко всей форме. Мы можем сделать это, используя селектор класса .wpcf7, а затем добавив стили под ним.
1 2 3 4 5 6 7 8 9 10 | /* Contact Form 7 Styles ---------------------------------*/ .wpcf7 { background-color: #F0F0F0; border: 5px solid #666666; } |
Теперь отредактируем внутренние элементы формы:
1 2 3 4 5 6 7 8 | .wpcf7-form { margin-left: 25px; margin-right: 25px; margin-top: 25px; } |
Поля имя, почта и тема регулируются селектором — .wpcf7 input
1 2 3 4 5 | .wpcf7 input { width: 50%; /*ширина полей */ } |
Редактируем также поле — Ваше сообщение
1 2 3 | .wpcf7-textarea { width: 50%; } |
