Стандартная форма 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.