Руководство

Контактная форма Jekyll (без бэкенда)

Jekyll собирает статический HTML, что значит: контактная форма Jekyll - это просто обычная HTML-форма в Liquid-шаблоне. Это редкое решение для контактной формы, которое работает на GitHub Pages из коробки, потому что список разрешённых плагинов Jekyll от GitHub не важен, когда бэкенд где-то ещё.

Сниппет

contact.Jekyll

---
# _pages/contact.html
layout: default
permalink: /contact/
---

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="{{ '/thanks' | absolute_url }}" />
  <button type="submit">Send</button>
</form>

Как это работает

Сниппет использует front matter Jekyll, чтобы объявить permalink и layout страницы. Сама форма - обычный HTML - Jekyll трогает только кусок {{ '/thanks' | absolute_url }}, который на этапе сборки разворачивается в правильный URL с применённым baseurl. Форма POST'ит в Formhook из браузера посетителя, так что build-sandbox GitHub Pages тут ни при чём.

Что происходит дальше

Отправка попадает в панель Formhook в течение секунды.
Push-уведомление срабатывает на каждом включённом устройстве.
Отвечайте прямо из панели (Pro и выше) - особенно удобно для сайтов GitHub Pages, у которых нет другого механизма исходящей почты.

Запустите вашу контактную форму на Jekyll сегодня.

Зарегистрируйтесь бесплатно, создайте форму, вставьте API-ключ. Пять минут.

Начать бесплатно

Бесплатный тариф: 5 форм · 250 отправок/мес · Без банковской карты.

Контактная форма Jekyll - FAQ

Работает ли это на GitHub Pages со стандартной сборкой Jekyll?

Да. Поскольку бэкендом служит Formhook, allowlist плагинов GitHub не важен - вам нужен только обычный HTML в собранном выводе.

Можно ли иметь несколько форм (например, контакты и рассылку) на одном сайте Jekyll?

Да. Создайте одну форму Formhook на каждый случай, вставьте action каждой в нужный шаблон. Бесплатный тариф включает пять форм.

Как перенаправить на страницу благодарности на сайте GitHub Pages?

Включите скрытое поле _redirect. Используйте фильтр absolute_url Jekyll на значении, чтобы оно работало с вашим baseurl. Целевой URL должен быть в списке разрешённых origins вашей формы.

Руководства для других фреймворков

Migrating from Formspree? See how Formhook compares.