Контактная форма

Вы можете использовать на сайте неограниченное количество контактных форм.

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 "Отправить"]

И получится вот так:

Если вы отправите письмо с этой формы, то увидите, что информация с новых полей не приходит. Для этого переходим во вкладку «письмо». Жирным шрифтом выделены неиспользуемые теги. Вставим их в тело письма:

Сохраняем.

И теперь можно окончательно настроить внешний вид формы в кастомайзере. Для этого переходите в «Внешний вид > Настроить > Контактная форма».

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

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