Jekyllにフォームを追加/設置/設定する方法

What is Jekyll?
Jekyllとは

Jekyllは、Rubyベースの静的サイトジェネレーターです。gemとして提供されており、普段からRubyを使っている方には馴染みやすいものになっています。基本的な機能は他の静的サイトジェネレーターと似ており、マークダウンで気軽にコンテンツを書け、デプロイもスピーディーに行えます。

最初のリリースが2008年なので、静的サイトジェネレーターの中でもかなり古くからある部類になります。バージョン番号も4を超えており、実はJekyllで動いている、というサイトも多いのではないでしょうか。

Github Pagesが公式にJekyllを紹介していることもあり、Github Pages用途では特に耳にすることが多い印象です。Github Pagesでしか使えないわけではなく、主要な静的サイトホスティングサービスはJekyllのビルドに対応しているため、簡単な設定で連携、デプロイすることができます。

Rubyベースとは言え、あくまで静的サイトジェネレーターです。出力されるページを動的にすることはできません。もし、問い合わせフォームを組み込みたい、となった場合、外部のフォームサービスを利用するというのが現実的なソリューションになります。

Jekyll x SSGform
Jekyllにフォームを追加する方法

Jekyllで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。

1. SSGformアカウントを作成する

メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。

2. SSGformマイページで、フォームを作成する

好きな名前をつけてフォームを管理することができます。ここでは例えば「Jekyllサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。

3. Jekyll側にフォームのhtmlを記述する

<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)

<form action="https://ssgform.com/s/JeKyLlFoRm" method="post">
 <input type="text" name="お名前" required="required" />
 <input type="email" name="メールアドレス" required="required" />
 <textarea name="お問い合わせ内容" required="required"></textarea>
 <button type="submit">送信する</button>
</form>

4. テスト送信して、完了です

あとはJekyllのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。

「Jekyllを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なJekyllライフを送ってください!

 

Get started
まずはフリープランでスタート

フリープランでも機能制限は無し。10有効フォームURL、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。