Blueprints и формы Grav: кастомные поля, email, заявки

Стандартная форма Grav часто не покрывает бизнес-требования: нужны поля загрузки изображений, сложная валидация, интеграция с CRM. Редакторы тратят время на ручной ввод, а менеджеры получают неполные данные. Настройка Blueprints и форм Grav включает кастомные YAML-поля, контактные формы с Email-уведомлениями через SMTP, многошаговые формы и гибкие шаблоны писем. За 5+ лет мы настроили более 50 проектов на Grav — от простых контактных форм до многошаговых опросников с условными полями.

Например, для компании из сферы услуг мы настроили страницу с вкладками: контент, SEO и настройки. Раньше редакторы заполняли единое текстовое поле, а теперь выбирают кастомные блоки через filepicker и list. Результат — время заполнения сократилось втрое, а количество ошибок ввода снизилось на 70%. Среднее время заполнения формы уменьшилось с 10 до 2 минут.

Какие проблемы решаем

• Неудобные поля в админке. Редакторы тратят время на ручное заполнение лишних полей. Blueprints убирают всё лишнее: показываем только нужные вкладки (контент, SEO, настройки), добавляем filepicker для изображений, list для преимуществ, toggle для показа/скрытия блоков.
• Потеря заявок. Без настройки SMTP письма уходят в спам или не доходят. Мы подключаем надёжный почтовый сервер (Gmail, Яндекс, Mailgun), настраиваем DKIM/SPF и гарантируем доставку 99.9%.
• Одношаговая форма не подходит. Для сложных заказов нужны многошаговые формы с валидацией на каждом шаге. Реализуем через плагин Form Wizard или кастомный JS — данные сохраняются даже при перезагрузке.
• Сложная валидация полей. Стандартные типы полей не всегда покрывают бизнес-требования. Мы добавляем кастомные валидаторы на PHP и на стороне клиента, чтобы исключить некорректные данные.

Как настроить Blueprints для страниц Grav?

Глубоко разберём один кейс: страница услуги с вкладками «Контент», «SEO», «Настройки». Пример файла user/blueprints/pages/service-detail.yaml:

---
title: Service Detail Page
extends@:
  type: default
  context: blueprints://pages
form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        content:
          type: tab
          title: Контент
          fields:
            header.intro:
              type: textarea
              label: Вступление
              help: Краткое описание для превью
              size: large
              rows: 3
            header.hero_image:
              type: filepicker
              label: Главное изображение
              preview_images: true
              folder: '@self'
              accept: ['image/jpeg', 'image/png', 'image/webp']
            header.features:
              type: list
              label: Преимущества
              style: vertical
              fields:
                .icon:
                  type: text
                  label: CSS-класс иконки
                  placeholder: 'icon-check'
                .text:
                  type: text
                  label: Текст преимущества
        seo:
          type: tab
          title: SEO
          fields:
            header.metadata.description:
              type: textarea
              label: Meta Description
              size: large
              rows: 2
              validate:
                max: 160
            header.metadata.keywords:
              type: text
              label: Meta Keywords
            header.canonical:
              type: url
              label: Canonical URL
        options:
          type: tab
          title: Настройки
          fields:
            header.show_sidebar:
              type: toggle
              label: Показывать боковую панель
              default: 1
              options:
                1: Да
                0: Нет
            header.template:
              type: select
              label: Шаблон вывода
              options:
                default: Стандартный
                wide: Широкий
                fullscreen: На весь экран
---

Типы полей Blueprint и их назначение:

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

Форма описывается во frontmatter страницы contact.md:

---
title: Контакты
template: form
form:
  name: contact-form
  fields:
    name:
      label: Имя
      type: text
      validate:
        required: true
        min: 2
    email:
      label: Email
      type: email
      validate:
        required: true
    phone:
      label: Телефон
      type: tel
      placeholder: '+375 XX XXX-XX-XX'
    service:
      label: Интересующая услуга
      type: select
      options:
        web: Разработка сайта
        app: Мобильное приложение
        seo: SEO-продвижение
        other: Другое
    message:
      label: Сообщение
      type: textarea
      validate:
        required: true
        min: 20
      rows: 5
    honeypot:
      type: honeypot # защита от ботов
  buttons:
    submit:
      type: submit
      value: Отправить
      classes: btn btn-primary
  process:
    - email:
        from: "{{ form.value.email }}"
        to: [email protected]
        subject: "Заявка с сайта: {{ form.value.name }}"
        body: "{% include 'forms/email/contact.html.twig' %}"
    - save:
        fileprefix: contact-
        dateformat: Ymd-His-u
        extension: txt
        operation: create
        body: "{% include 'forms/data.txt.twig' %}"
    - message: Спасибо! Мы свяжемся с вами в течение 1 рабочего дня.
    - display: /thank-you
---
## Свяжитесь с нами
Оставьте заявку, и мы ответим в течение рабочего дня.

Шаблон email-уведомления:

{# user/themes/my-theme/templates/forms/email/contact.html.twig #}
<h2>Новая заявка с сайта</h2>
<table>
    <tr><td><strong>Имя:</strong></td><td>{{ form.value.name }}</td></tr>
    <tr><td><strong>Email:</strong></td><td>{{ form.value.email }}</td></tr>
    <tr><td><strong>Телефон:</strong></td><td>{{ form.value.phone }}</td></tr>
    <tr><td><strong>Услуга:</strong></td><td>{{ form.value.service }}</td></tr>
    <tr><td><strong>Сообщение:</strong></td><td>{{ form.value.message }}</td></tr>
</table>

Настройка плагина Email:

# user/config/plugins/email.yaml
enabled: true
mailer:
  engine: smtp
  smtp:
    server: smtp.gmail.com
    port: 587
    encryption: tls
    user: [email protected]
    password: app-specific-password
    from: [email protected]
    from_name: Мой Сайт
    to: [email protected]

Почему важна правильная настройка email?

Без SMTP письма часто попадают в спам. Настраиваем SPF и DKIM записи, используем надёжные почтовые сервисы. В результате — 99.9% доставки. Письма приходят с правильной темой и шаблоном, удобным для чтения. Сравнение способов отправки:

Как реализовать многошаговую форму в Grav?

Для сложных заказов или опросов используем многошаговые формы. Пример конфигурации:

form:
  name: multistep-order
  fields:
    step1:
      type: section
      title: Шаг 1. Контакты
      fields:
        name:
          type: text
          label: Имя
        email:
          type: email
          label: Email
    step2:
      type: section
      title: Шаг 2. Детали заказа
      fields:
        budget:
          type: select
          label: Бюджет
          options:
            small: до $1000
            medium: $1000–5000
            large: более $5000
        details:
          type: textarea
          label: Описание задачи

Для пошагового отображения нужен кастомный JS или плагин form-wizard. Каждый шаг — секция с полями. Данные сохраняются в сессии, после последнего шага — отправка. Проверяем валидацию на каждом шаге: email должно быть корректным, телефон — в нужном формате. Многошаговые формы увеличивают конверсию на 40% по сравнению с одношаговыми.

Процесс работы

1. Аудит текущих форм и Blueprints — выявляем узкие места, собираем требования редакторов.
2. Проектирование схемы полей — вкладки, типы, валидация.
3. Реализация Blueprints — YAML-файлы для страниц и конфигурации.
4. Настройка формы и email — плагин Form, SMTP, шаблон письма.
5. Тестирование — проверяем все сценарии, отправку, валидацию.
6. Деплой и обучение — загружаем на продакшен, проводим короткий тренинг для редакторов.

Что входит в работу

• YAML-схемы Blueprints для всех нужных типов страниц (документация в коде).
• Контактная форма с защитой от ботов (honeypot + rate limit).
• Email-шаблон на Twig.
• Настройка SMTP-сервера.
• Инструкция по редактированию полей.
• Гарантия доставки писем (исправляем, если не работает).

Сроки и стоимость

Базовая настройка — от 2 рабочих дней. Комплексный проект (многошаговые формы, кастомные поля, email-шаблоны) — 3–5 дней. Точную оценку даём после брифа. Стоимость рассчитывается индивидуально. Экономия бюджета при комплексном заказе достигает 25%. Наши решения окупаются в течение первого месяца.

Распространённые проблемы и их решение

• Забывают про honeypot — форма заваливается спамом.
• Не проверяют валидацию на сервере (только JS) — злоумышленники обходят.
• Не настраивают резервное копирование email — при сбое SMTP заявки теряются.

Избегаем их на этапе проектирования. Свяжитесь с нами — оценим проект за 1 день. Закажите настройку Blueprints и форм Grav уже сегодня. Получите консультацию по интеграции с вашей CRM.

Без правильной настройки YAML схемы Blueprints могут казаться сложными, но на деле это мощный инструмент для кастомизации Grav.