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