Блог Кинзябулатова Рамиля

  • 2022-07-13

Верстка контактной формы в Drupal

Предисловие.

 У нас есть две задачи. Первая задача - это создать контактную форму на сайте, и темизировать её, вторая задача - это научиться темизировать формы вообще. Итак, давайте сначала рассмотрим те решения, которые подсказывает нам сообщество Drupal.

 1. Если мы наберём в гугле формы в Drupal, то нам сразу же выйдет одноименный модуль, который называется Webforms. Что с ним не так? Если мы с ним начнём работать, то сразу же поймем, что этот модуль как отдельный CMS внутри самой CMS, потому что он имеет свои шаблоны форм, свою контентную модель, свои плагины, плагины к плагину и другие подобные вещи. А нам всего лишь нужно web форму создать. Давайте вспомним ту самую картинку, которая имеется, когда мы говорим про Drupal:

drupal_skills

Одна из причин, почему так сложно освоить Drupal, потому что люди, которые начинают работать с этим, они сразу упираются, исходя из этих задач, в один из этих модулей, именно в этот Webforms, и это их очень сильно озадачивает, когда такую простую задачу нужно решать через такой огромный модуль, отдельный модуль, не просто модуль, а как отдельный CMS внутри CMS. 

2. Второй вариант решения (Webforms я, например, не использую) - это темизирование с помощью форм, которые дает Drupal. И вот здесь мы сталкиваемся с одним нюансом. Все формы по умолчанию в Drupal имеют один и тот же шаблон форм form.html.twig. И мы все формы, в принципе, должны темизировать через него. Конечно можно, если вы мега программист, написать webhook, который будет переопределять ваш шаблон, то есть, отдельный шаблон для вашей формы, но это путь, который каждый раз надо проходить, и в котором нужно знать, как этот hook написать, и каждый раз нужно новый hook писать. Вот, чтобы это обойти, вам достаточно принять решение.

 Решение

Для того, чтобы темизировать web формы, я предлагаю следующее. Вы добавляете в вашу тему trinion5.theme файл следующую функцию:

function trinion5_backend_theme_suggestions_form_alter(array &$suggestions, array $variables) {

$suggestions[] = 'form__' . $variables['element']['#form_id'];

}

где trinion5 - название вашей темы

И теперь для каждой web формы, формы каждой ноды, любой формы можно будет указать отдельный шаблон, который будет иметь вид - название темы, нижнее подчеркивание (там видно), элемент и id формы.Пример вы можете видеть на картинке.

form_drupal

После того, как мы это создадим, у нас в форме появится новое предложение по web форме. 

И в нем мы уже можем темизировать нашу форму, то есть, любая форма, которую мы создаем, теперь может иметь свой шаблон. Что важно понимать? Что сам по себе, файл нужно будет создавать. Мы берем для примера файл, (вы можете взять мой файл) копируем его, и называем так, как нам надо, после чего темизируем.

Как мы темизируем? Здесь есть вопрос, как получить наименование полей. Для этого у нас существует код {{ dump(element|keys) }}, который выводит информацию о том, какие поля и какие атрибуты есть у данной формы.

название_темы

Для того чтобы увидеть комментарии у вас должна быть включена отладка twig template отладка Drupal. Необходимую информацию об этом вы можете найти по ссылке https://www.drupal.org/docs/theming-drupal/twig-in-drupal/debugging-twig-templates

Мы берем те, которые отвечают за ввод форм, и темизируем его, как простой html, как простой twig. Для примера, для того, чтобы вывести название той формы, которую я приложил, я использую bootstrap, тему bootstrap. Вот код, который я вам и предлагаю. То есть, все достаточно просто.

Кроме того, необходимо не забывать следующий момент: сами поля, которые выводятся в этой форме, они по умолчанию выводятся с различными оболочками, с различными стилями, которые нам не нужны. Рекомендую обратить внимание на файлы: textarea.html.twig, select.html.twig, radios.html.twig, input.html.twig, input--submit.html.twig, input--radio.html.twig ...

список_файлов

Саму файл тему я приложил. Вы можете просто взять, скопировать, и по аналогии темизировать не только контактные формы, но и модуль, что касается контактных форм, и любые формы вывода данных, которые вы хотите. То есть, если вы, для примера, хотите темизировать ввод данных, как мы (например, у нас есть темизация ввода данных заказа клиента), то вам необходимо сделать то же самое через механизм, который был мною описан в этой статье.

instructor

Рамиль Кинзябулатов

Бизнес-консультант
  • 500+ клиентов
  • 120+ статей на Habr
  • 3 IT книги

Рамиль Кинзябулатов — бизнес-консультант с большим практическим опытом работы в России и в зарубежье (США, Италия, Германия). Автор многочисленных публикаций и нескольких книг по оптимизации и автоматизации бизнеса.

Рамиль является одним из первооткрывателей бизнес-моделирования в России с опытом работы бизнес-консультантом более 17 лет. Так же является автором перевода стандарта IDEF0 на русский язык под собственной редакцией.