Налаштування 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: Сторінка деталей послуги
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: '+380 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.