Контактная форма
Вы можете использовать на сайте неограниченное количество контактных форм.
1. Устанавливаем и активируем Contact Form 7
2. Переходим в левом меню в «Контактные формы»
Как видим, уже автоматически создалась форма, которую можно использовать на сайте. Пока ее трогать не будем, а скопируем ее шорткод:
3. Открываем страницу «Контакты» и добавляем блок «Колонки»
Сделаем, например, ширину блока 800px, 2 ряда. В первый столбец добавим фотографию с помощью кнопки «Добавить медиафайл», а во вторую вставим шорткод контактной формы:
Обновим страницу и увидим нашу фотографию и контактную форму:
4. Добавим дополнительное поле, выпадающий список и чекбокс
Добавим, например, поле «Город».
Возвращаемся к контактной форме, ставим курсор на нужное место, куда будет вставлен тег нового поля, и жмем кнопку «текст»:
Здесь пишем понятное название и жмем кнопку «Вставить тег»:
Вставленный тег нужно «обернуть» в label
вот таким образом:
Теперь добавим выпадающий список. Жмем кнопку «В раскрывающемся меню»:
Вводим имя поля и значения, вставляем тег.
Оборачиваем в label.
Теперь чекбоксы, ставим галочку:
В итоге код формы выглядит так:
Сохраним форму и посмотрим изменения:
Если вы хотите, чтобы подсказки к полям были внутри, а не поверх, для этого нужно переместить их внутрь полей таким образом:
<label> [text* your-name placeholder "Ваше имя (обязательно)"] </label> <label> [email* your-email placeholder "Ваш e-mail (обязательно)"] </label> <label> [text your-subject placeholder "Тема"] </label> <label> [text city placeholder "Город"] </label> <label> [select shot-type "Вид съемки" "Свадьба" "Семья" "Портрет"] </label> [checkbox more-options use_label_element "Второй фотограф" "Фотокнига"] <label> [textarea your-message placeholder "Сообщение"] </label> [submit "Отправить"]
И получится вот так:
Если вы отправите письмо с этой формы, то увидите, что информация с новых полей не приходит. Для этого переходим во вкладку «письмо». Жирным шрифтом выделены неиспользуемые теги. Вставим их в тело письма:
Сохраняем.
И теперь можно окончательно настроить внешний вид формы в кастомайзере. Для этого переходите в «Внешний вид > Настроить > Контактная форма».
Обратите внимание, что настройка внешнего вида затронет все контактные формы, что в принципе есть хорошо — единство стиля.
Вы можете добавлять любое количество контактных форм с любым количеством полей. Использовать их для обратной связи, на странице отзывов или в всплывающих окнах.