Standard Grav forms often do not cover business requirements: you need image upload fields, complex validation, CRM integration. Editors waste time on manual input, and managers receive incomplete data. We set up Blueprints and Grav forms including custom YAML fields, contact forms with email notifications via SMTP, multi-step forms, and flexible email templates. Over 50 projects on Grav — from simple contact forms to multi-step questionnaires with conditional fields.
For example, for a service company we set up a page with tabs: content, SEO, and settings. Previously editors filled a single text field; now they select custom blocks via filepicker and list. Result — filling time reduced threefold, and input errors dropped by 70%. Average form fill time decreased from 10 to 2 minutes.
What problems we solve
- Uncomfortable fields in admin. Editors waste time on manual entry of unnecessary fields. Blueprints remove everything extra: we show only needed tabs (content, SEO, settings), add filepicker for images, list for benefits, toggle for show/hide blocks.
- Lead loss. Without SMTP, emails go to spam or don't arrive. We connect a reliable mail server (Gmail, Yandex, Mailgun), configure DKIM/SPF, and guarantee 99.9% delivery.
- Single-step form is not enough. For complex orders, multi-step forms with validation at each step are needed. We implement via Form Wizard plugin or custom JS — data is saved even on reload.
- Complex field validation. Standard field types don't always meet business requirements. We add custom validators in PHP and client-side to reject incorrect data.
How to set up Blueprints for Grav pages?
One deep case: a service page with tabs "Content", "SEO", "Settings". Example file 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: Content
fields:
header.intro:
type: textarea
label: Introduction
help: Brief description for preview
size: large
rows: 3
header.hero_image:
type: filepicker
label: Main image
preview_images: true
folder: '@self'
accept: ['image/jpeg', 'image/png', 'image/webp']
header.features:
type: list
label: Features
style: vertical
fields:
.icon:
type: text
label: CSS icon class
placeholder: 'icon-check'
.text:
type: text
label: Feature text
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: Settings
fields:
header.show_sidebar:
type: toggle
label: Show sidebar
default: 1
options:
1: Yes
0: No
header.template:
type: select
label: Output template
options:
default: Standard
wide: Wide
fullscreen: Fullscreen
Blueprint field types and their purpose:
| Type | Purpose |
|---|---|
text |
Single-line text |
textarea |
Multi-line text |
toggle |
Toggle (bool) |
select |
Dropdown list |
checkboxes |
Multiple selection |
filepicker |
File selection from media |
list |
Repeatable field groups |
array |
Key-value pairs |
date |
Date |
url |
URL with validation |
number |
Numeric field |
color |
Color picker |
editor |
Markdown editor |
Contact form and email
Form described in frontmatter of contact.md:
---
title: Contacts
template: form
form:
name: contact-form
fields:
name:
label: Name
type: text
validate:
required: true
min: 2
email:
label: Email
type: email
validate:
required: true
phone:
label: Phone
type: tel
placeholder: '+375 XX XXX-XX-XX'
service:
label: Service of interest
type: select
options:
web: Website development
app: Mobile app
seo: SEO promotion
other: Other
message:
label: Message
type: textarea
validate:
required: true
min: 20
rows: 5
honeypot:
type: honeypot # bot protection
buttons:
submit:
type: submit
value: Send
classes: btn btn-primary
process:
- email:
from: "{{ form.value.email }}"
to: [email protected]
subject: "Site request: {{ 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: Thank you! We will contact you within 1 business day.
- display: /thank-you
---
## Contact us
Leave a request and we will answer within a business day.
Email notification template:
{# 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 plugin configuration:
# 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: My Site
to: [email protected]
Why correct email configuration is important?
Without SMTP, emails often land in spam. We configure SPF and DKIM records, use reliable mail services. Result — 99.9% delivery. Emails arrive with correct subject and readable template. Comparison of sending methods:
| Method | Delivery | Complexity |
|---|---|---|
| SMTP | 99.9% | Medium |
| Sendmail | ~70% | Low |
| PHP mail | ~50% | Low |
More about SMTP configuration
To send via SMTP, specify server, port, and credentials. We use only TLS encryption and test delivery with a test email. In case of problems, we set up a backup mail server.
How to implement multi-step form in Grav?
For complex orders or surveys, we use multi-step forms. Example configuration:
form:
name: multistep-order
fields:
step1:
type: section
title: Step 1. Contacts
fields:
name:
type: text
label: Name
email:
type: email
label: Email
step2:
type: section
title: Step 2. Order details
fields:
budget:
type: select
label: Budget
options:
small: up to $1000
medium: $1000–5000
large: over $5000
details:
type: textarea
label: Task description
For step-by-step display, custom JS or the form-wizard plugin is required. Each step is a section with fields. Data is saved in session, after last step — submit. We validate at each step: email must be correct, phone in required format. Multi-step forms increase conversion by 40% compared to single-step.
Work process
- Audit of current forms and Blueprints — identify bottlenecks, gather editor requirements.
- Design field schema — tabs, types, validation.
- Implement Blueprints — YAML files for pages and configuration.
- Configure form and email — Form plugin, SMTP, email template.
- Testing — check all scenarios, sending, validation.
- Deploy and training — upload to production, conduct short training for editors.
What's included in the work
- YAML Blueprint schemas for all needed page types (documentation in code).
- Contact form with bot protection (honeypot + rate limit).
- Email template in Twig.
- SMTP server configuration.
- Instructions for field editing.
- Email delivery guarantee (fix if not working).
Timelines and cost
Basic setup — from 2 business days. Complex project (multi-step forms, custom fields, email templates) — 3–5 days. We provide an accurate estimate after briefing. Cost is calculated individually. Budget savings with a comprehensive order reach 25%. Our solutions pay off within the first month.
Common problems and their solution
- Honeypot is forgotten — form gets flooded with spam.
- Server-side validation is not checked (only JS) — attackers bypass.
- Email backup is not configured — on SMTP failure, leads are lost.
We avoid these at the design stage. Contact us — we will evaluate your project in 1 day. Order Grav Blueprints and form setup today. Get a consultation on integration with your CRM.
Without proper configuration, YAML Blueprint schemas may seem complex, but in fact they are a powerful tool for customizing Grav.