Настройка Blueprints и форм Grav

Настройка Blueprints и форм Grav

Blueprints в Grav — это YAML-описание полей для форм: полей редактирования страниц в админке и конфигурации тем/плагинов. Форма (Form) — плагин для создания контактных и других форм прямо в frontmatter страниц без PHP-кода.

Blueprints для страниц

Blueprint определяет, какие поля видит редактор при редактировании страницы заданного типа. Файл располагается в user/blueprints/pages/ или user/themes/my-theme/blueprints/pages/.

# 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

Контактная форма через плагин Form

Форма описывается во 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]

Многошаговая форма

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.