Как настроить SendGrid для контактной формы

Зачем нужен SendGrid?

Когда кто-то заполняет вашу контактную форму, сайту нужен способ отправлять электронные письма — одно вам (уведомление) и одно клиенту (подтверждение). SendGrid — это сервис доставки электронной почты, который надёжно выполняет эту задачу.

Бесплатный тариф: 100 писем в день — этого более чем достаточно для большинства контактных форм малого бизнеса.

Это руководство нужно только в том случае, если вы выбрали функцию «Контактная форма» в SiteKit. Если на вашем сайте нет контактной формы, можете пропустить это руководство.

Шаг 1: Создайте аккаунт SendGrid

Перейдите на sendgrid.com и нажмите Start for Free
Заполните данные и создайте аккаунт
Подтвердите адрес электронной почты

Шаг 2: Верифицируйте домен отправителя

Это самый важный шаг. Без верификации домена ваши письма будут попадать в спам.

В SendGrid перейдите в Settings > Sender Authentication
Нажмите Authenticate Your Domain
Выберите вашего DNS-провайдера. Если ваш домен на Cloudflare, выберите Cloudflare
Введите ваш домен (например, yourbusiness.com)
SendGrid предоставит вам 3 CNAME-записи для добавления

Добавьте DNS-записи

Перейдите в панель управления Cloudflare > ваш домен > DNS:

Добавьте все 3 CNAME-записи, предоставленные SendGrid
Также добавьте следующие TXT-записи:

Запись SPF:

Type: TXT
Name: @
Value: v=spf1 include:sendgrid.net ~all

Запись DMARC:

Type: TXT
Name: _dmarc
Value: v=DMARC1; p=none; rua=mailto:your-email@yourdomain.com

Зачем все эти DNS-записи? SPF сообщает почтовым серверам, что SendGrid уполномочен отправлять письма от имени вашего домена. DKIM (CNAME-записи) добавляет цифровую подпись. DMARC объединяет их. Без этих записей письма будут помечены как спам или отклонены.

Вернитесь в SendGrid и нажмите Verify. Обычно изменения DNS распространяются в течение нескольких минут.

Шаг 3: Сгенерируйте API-ключ

В SendGrid перейдите в Settings > API Keys
Нажмите Create API Key
Дайте ему имя (например, «Contact Form»)
Выберите Full Access (или как минимум разрешение Mail Send)
Нажмите Create & View
Сразу скопируйте API-ключ — вы не сможете увидеть его снова

Шаг 4: Добавьте переменные окружения

В панели управления Cloudflare Pages:

Перейдите в ваш проект Pages > Settings > Environment variables
Добавьте следующие переменные для среды Production:

Переменная	Значение	Пример
`SENDGRID_API_KEY`	Ваш API-ключ из Шага 3	`SG.xxxxx...`
`CONTACT_EMAIL`	Куда отправлять заявки с формы	`info@yourbusiness.com`
`FROM_EMAIL`	Адрес отправителя в письмах	`noreply@yourbusiness.com`

Нажмите Save
Запустите новое развёртывание (отправьте коммит или нажмите Retry deployment в Cloudflare)

Шаг 5: Протестируйте контактную форму

Откройте ваш работающий сайт
Заполните контактную форму, указав свою электронную почту
Отправьте форму
Проверьте почтовый ящик:
- Уведомление для бизнеса — должно прийти на адрес CONTACT_EMAIL
- Подтверждение для клиента — должно прийти на адрес, указанный в форме

Проверьте также папку «Спам». Если письма попадают в спам, возможно, DNS-записи ещё не полностью распространились. Подождите час и попробуйте снова.

Устранение неполадок

Письма вообще не приходят

Перепроверьте переменную окружения SENDGRID_API_KEY в Cloudflare
Убедитесь, что верификация домена в SendGrid отображается как подтверждённая
Проверьте логи функций Cloudflare Pages на наличие ошибок (в панели управления, в разделе вашего проекта > Functions)

Письма попадают в спам

Убедитесь, что все DNS-записи на месте (SPF, DKIM, DMARC)
Используйте реальный адрес отправителя на верифицированном домене (не адрес gmail.com)
Изменения DNS могут распространяться до 48 часов

Форма работает локально, но не на продакшене

Возможно, не заданы переменные окружения. Проверьте Cloudflare Pages > Settings > Environment variables
Запрос может блокироваться CORS. Убедитесь, что ваш домен указан в разрешённых источниках в functions/api/contact.js