В этом уроке осуществим сборку страницы с контактной информации и формой обратной связи:
В выбранной теме оформления Zymphonies уже есть пример такой страницы Contact:
На этой странице расположена форма обратной связи.
На этом уроке посмотрим, как в Drupal собирают формы обратной связи и добавим на страницу недостающую информацию:
- номер телефона;
- почту;
- адрес офиса.
Среди стандартных модулей Drupal, есть модули, позволяющие собирать простые формы обратной связи. Модуль Contact включен по умолчанию в Drupal. Настройки модуля Contact находится в меню Structure:
В разделе Contact forms:
Переходим по ссылке Contact forms и видим созданные 2(две) формы:
Первая форма – это персональная форма Personal contact form, которая позволяет написать пользователю. Эту форму пока использовать не будем.
Вторая форма - эта форма обратной связи сайта Website feedback. Перейдем по кнопке Edit этой формы и произведем новые настройки:
В первом поле Label отображается название формы.
В поле Recipients указывается список получателей. Получателей может быть несколько, тогда адреса получателей указываются через запятую.
В поле Message размещается сообщение, которое показывается пользователю после того, как он отправил форму.
В поле Redirect path указывается путь, по которому будет перенаправлен пользователь после того как заполнит форму. То есть мы можем отправить пользователя, например, на страницу с благодарностью или на Главную страницу сайта или оставить на текущей странице.
В поле Auto-reply вносим сообщение, которое будет отправлено в письме пользователю, если он правильно оставил обратный адрес, то есть мы можем написать, например, “Спасибо ваше сообщение получено! Мы свяжемся с вами в ближайшее время”.
Ниже идут настройка веса Weight и признак Make this the default form, является ли эта форма, формой по умолчанию.
Также на странице Edit contact form есть стандартные вкладки, на которых можно добавить к нашей форме дополнительные поля, настроить их отображения, аналогично как на странице настроек типа материала:
В поле получателя Recipients добавим ранее созданный специальный адрес почты, по которому мы будем проверять поступление почты:
Сохраняем внесенные изменения на странице Edit contact form кнопкой Save и возвращаемся на страницу Contact forms, на которой в форме Website feedback изменился адрес почты получателя, введенный на прошлом шаге:
Нажмем на название Website feedback:
Осуществится переход на страницу нашей формы:
Поскольку в теме оформления Zymphonies используется стандартная форма обратной связи, то и на нашем сайте форма обратной связи выполнена на основе стандартной формы и имеет аналогичный вид. На нашем сайте мы зашли под зарегистрированным пользователем и Drupal уже знает наше имя admin и нашу почту admin@example.com.
Перейдем на страницу обратной связи под Анонимным пользователем (New incognito windows):
Форма для анонимного пользователя выглядит иначе:
В форме запрашивается наше имя, обратный адрес, тема и текст сообщения.
Для корректной работы формы необходимо, чтобы домен почты отправителя совпадал с доменом сайта, для которого отправляется почта, что можно настроить в пункте меню конфигурация Configuration:
В пункте System переходим по ссылке Basic site settings:
На странице Basic site settings в поле с адресом вставим наш обратный адрес, но так чтобы после @ присутствовал, домен совпадающий с доменом нашего сайта example@drupal1.drupal-server.ru:
После сохранения конфигурации Save configuration можем проверить работу нашей формы обратной связи.
Откроем нашу форму под Анонимным пользователем:
Введем тестовые данные в форму нашей обратной связи и отправим сообщение Test через кнопку Send message:
Drupal вывел наше сообщение, потому что письмо было отправлено:
Перейдем в тестовую почту и видим, что наше письмо попало в спам:
Почтовые сервисы часто не доверяют письмам, отправленным напрямую с сайта. Поэтому такие письма обычно попадают в спам. Избежать этого можно отправкой почты через сторонний почтовый сервис, но этот инструмент рассматривается в рамках другого курса.
Поскольку эта форма используется для оповещения администратора сайта и администратор сайта знает, что письма с сайта попадают в спам, вполне достаточно и такого результата. Можем настроить почтовый фильтр, который укажет почтовому сервису не отправлять такие письма в спам и продолжать использовать сервис в таком виде.
Далее нам необходимо поместить ссылку на нашу контактную форму в меню. Для этого копируем путь к нашей форме contact/feedback:
Перейдем на страницу редактирования меню Edit menu:
На странице редактирования в поле Contact переходим по ссылке Edit:
Далее поправим к нему путь, вставив в поле Link путь /contact/feedback:
После сохранения получаем сообщение:
Осуществляем переход на вкладку Contact:
Открывается страница с нашей формой:
Добавим на нашу страницу небольшой текст.
Поскольку эта страница создана модулем контактных форм, на ней нет текстовой области, но мы можем вывести сюда информацию с помощью дополнительного блока.
Начнем создание нового блока с перехода на страницу Content. На странице контент перейдем на вкладку Blocks:
На странице Content blocks кликаем по кнопке +Add content block:
На странице Add content block выбираем Basic block:
На странице Add Basic block custom block в поле Block description введем название Contact us, а в поле Body для примера вставим текст (позвоните, напишите, посетите или заполните форму):
Call us: +48883-522-381
Email us: example@drupal1.drupal-server.ru
Visit us: 31-147 Krakow Dluga 54
Or write us:
Текст выделим и оформим в стиле Boland инструментом “B” поля Body:
Теперь нам необходимо поместить созданный блок в регион Content. Для этого переходим сначала на вкладку Structure в раздел Block layout:
Далее выбираем наш регион Content и переходим по кнопке Place block:
На странице Place block выбираем Contact us и кликаем по Place block:
На странице Configure block выключаем отображение заголовка блока – снимаем метку Display title и ограничим вывод страницей формы, для этого занесем в поле Pages путь страницы формы /contact/feedback/ и отмечаем чекбокс Show for the listed pages:
После сохранения кнопкой Save block переходим на нашу страницу обратной формы, обновляем ее и наблюдаем результат:
Таким образом у нас получилась страница с данными нашей компании и формой обратной связи.