Стандартная форма 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 и их назначение:
| Тип | Назначение |
|---|---|
text |
Однострочный текст |
textarea |
Многострочный текст |
toggle |
Переключатель (bool) |
select |
Выпадающий список |
checkboxes |
Множественный выбор |
filepicker |
Выбор файла из медиа |
list |
Повторяемые группы полей |
array |
Пары ключ-значение |
date |
Дата |
url |
URL с валидацией |
number |
Числовое поле |
color |
Цветовой пикер |
editor |
Markdown-редактор |
Контактная форма и 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% доставки. Письма приходят с правильной темой и шаблоном, удобным для чтения. Сравнение способов отправки:
| Способ | Доставка | Сложность |
|---|---|---|
| SMTP | 99.9% | Средняя |
| Sendmail | ~70% | Низкая |
| PHP mail | ~50% | Низкая |
Подробнее о настройке SMTP
Для отправки через SMTP требуется указать сервер, порт и учётные данные. Мы используем только шифрование TLS и проверяем доставку тестовым письмом. В случае проблем настраиваем резервный почтовый сервер.
Как реализовать многошаговую форму в 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% по сравнению с одношаговыми.
Процесс работы
- Аудит текущих форм и Blueprints — выявляем узкие места, собираем требования редакторов.
- Проектирование схемы полей — вкладки, типы, валидация.
- Реализация Blueprints — YAML-файлы для страниц и конфигурации.
- Настройка формы и email — плагин Form, SMTP, шаблон письма.
- Тестирование — проверяем все сценарии, отправку, валидацию.
- Деплой и обучение — загружаем на продакшен, проводим короткий тренинг для редакторов.
Что входит в работу
- YAML-схемы Blueprints для всех нужных типов страниц (документация в коде).
- Контактная форма с защитой от ботов (honeypot + rate limit).
- Email-шаблон на Twig.
- Настройка SMTP-сервера.
- Инструкция по редактированию полей.
- Гарантия доставки писем (исправляем, если не работает).
Сроки и стоимость
Базовая настройка — от 2 рабочих дней. Комплексный проект (многошаговые формы, кастомные поля, email-шаблоны) — 3–5 дней. Точную оценку даём после брифа. Стоимость рассчитывается индивидуально. Экономия бюджета при комплексном заказе достигает 25%. Наши решения окупаются в течение первого месяца.
Распространённые проблемы и их решение
- Забывают про honeypot — форма заваливается спамом.
- Не проверяют валидацию на сервере (только JS) — злоумышленники обходят.
- Не настраивают резервное копирование email — при сбое SMTP заявки теряются.
Избегаем их на этапе проектирования. Свяжитесь с нами — оценим проект за 1 день. Закажите настройку Blueprints и форм Grav уже сегодня. Получите консультацию по интеграции с вашей CRM.
Без правильной настройки YAML схемы Blueprints могут казаться сложными, но на деле это мощный инструмент для кастомизации Grav.