Перейти к содержимому
FFormhook
← Назад к блогу

Блог

Как добавить контактную форму на GitHub Pages

· 3 мин чтения

GitHub Pages отдаёт только статические файлы - никакого PHP, никакого серверного кода, никакой возможности принять POST-запрос формы. Поэтому контактной форме нужен внешний endpoint, куда отправлять данные. Вот три реальных варианта - и тот, что займёт одну минуту.

Вариант 1: бэкенд форм (рекомендуется)

Укажите в action формы адрес хостингового эндпоинта для форм:

<form action="https://formhook.app/f/fh_your-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

Закоммитили, запушили, готово. Отправки попадают в панель и присылают push-уведомление на телефон. Спам отфильтровывается honeypot-полем и ограничениями частоты запросов ещё до того, как доберётся до вас. Это работает одинаково и для обычных HTML-репозиториев, и для сайтов на Jekyll (родной генератор GitHub Pages - см. руководство по Jekyll для тематического include, либо руководство по обычному HTML).

Плюсы: один атрибут, JavaScript не нужен, спам под контролем, отправки сохраняются.
Минусы: это сторонний сервис - поэтому проверьте лимиты бесплатного тарифа и политику хранения данных у того, кого выберете. Бесплатный тариф Formhook хранит отправки вечно.

Вариант 2: ссылка mailto:

<a href="mailto:you@example.com">Email me</a>

Честно, но слабо: это работает только если у посетителя настроен почтовый клиент (на десктопе это всё реже так), открывает ваш адрес для сборщиков спама, не даёт никакой защиты от спама и ничего не говорит об оттоке посетителей. Нормально для странички README личного проекта; дорого обходится там, где каждое обращение - деньги. (Подробнее об этом компромиссе - в mailto против контактной формы.)

Вариант 3: serverless-функция где-то ещё

Можно оставить сайт на GitHub Pages и принимать POST с помощью Cloudflare Worker или чего-то подобного. Это работает - но теперь вам нужно писать и поддерживать приёмник самостоятельно: валидацию, фильтрацию спама, хранение, отправку писем и CORS. Вы заново создали именно тот бэкенд, которого GitHub Pages позволял избежать. Разумно, если вам это нравится; необязательно, если нет.

AJAX-улучшение (по желанию)

Обычная HTML-форма при отправке уводит пользователя с текущей страницы. Чтобы остаться на странице:

<script>
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(e.target.action, {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  e.target.outerHTML = res.ok
    ? "<p>Thanks - message sent.</p>"
    : "<p>Something went wrong. Please email us directly.</p>";
});
</script>

Никакой сборки, никаких зависимостей - работает в обычном репозитории GitHub Pages.

Заметка про кастомный домен

Если ваш сайт на Pages работает на собственном домене, убедитесь, что настройки формы в вашем form-сервисе (например, allowlist для CORS) включают именно этот домен, а не только username.github.io. В Formhook это одно поле в настройках формы.

Вот и вся история: GitHub Pages отвечает за ваш сайт, а form-эндпоинт - за то единственное, с чем он справиться не может. Начните бесплатно - и форма заработает раньше, чем завершится ваш следующий git push.

Рабочая форма в одну строку

Размещение в ЕС, отправки хранятся вечно, push-уведомления на любом тарифе.

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

Без банковской карты · читайте документацию

Читать дальше