Контактна форма Jekyll на GitHub Pages

Formgong team ·

Контактна форма Jekyll на GitHub Pages — це звичайний HTML. GitHub вмикає safe mode, тож непідтриманий плагін не збереться. Покладіть форму в Liquid-інклюд і надішліть її у Formgong. Заявки приходять на пошту і в Telegram, а сайт лишається статичним. Плагін не потрібен.

Jekyll
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="uk">
  <label>Ім’я <input type="text" name="name" autocomplete="name" placeholder="Ваше ім’я" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>Повідомлення <textarea name="message" placeholder="Чим ми можемо допомогти?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Залиште це поле порожнім<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Надіслати</button>
</form>

Як працюють форми в Jekyll

Jekyll збирає Markdown і HTML у статичний сайт. GitHub Pages — звичний хост, і він запускає Jekyll за вас. Сервера, що чекає на POST форми, немає.

GitHub Pages фіксує safe: true у конфігу Jekyll. Непідтриманий гем не запускається. Форми в _includes/contact-form.html досить, бо браузер надсилає HTML.

Налаштування в Jekyll

  1. Створіть форму у Formgong і скопіюйте ключ доступу.
  2. Додайте інклюд. Спрямуйте action на https://formgong.com/submit і задайте access_key, _lang та botcheck.
  3. На сторінці контактів додайте front matter і {% include contact-form.html %}. Для сайту-проєкту задайте _redirect як {{ site.url }}{{ site.baseurl }}/thanks/.
  4. Не додавайте гем для форм. GitHub Pages тримає safe: true і не збере непідтриманий плагін.
  5. Запуште репозиторій. GitHub ставить JEKYLL_ENV у production. Надішліть тест на живу адресу github.io.

Formgong чи плагін Jekyll?

Локальний плагін доречний, коли ви збираєте сайт самі і Ruby потрібен під час збірки.

На GitHub Pages непідтримані плагіни не працюють. Звичайний HTML у Formgong працює після пуша.

Питання та відповіді

Чи працює це на GitHub Pages?

Так. Форма — це HTML. GitHub Pages має лише віддати файл. Власний гем не потрібен.

Чи можна тримати ключ у конфігу?

Так. Покладіть його в _config.yml і виведіть в інклюді. Ключ публічний. Пароль пошти туди не кладіть.

Чому подяка ламається на сайті-проєкті?

Сайт-проєкт живе в підшляху. Зберіть _redirect з site.baseurl, інакше браузер відкриє відсутню сторінку.

Чи потрібен гем github-pages на ноутбуці?

Лише якщо хочете той самий набір плагінів локально. Самій формі він не потрібен. Пуште HTML і перевірте живу URL.

Почати безкоштовно