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

What is Github Pages?
Github Pagesとは

Gihub PagesはGithubが提供する、静的サイトのホスティングサービスです。HTMLやCSS、Javascriptを、Githubのレポジトリからそのまま読み込むことで公開することができる便利なサービスです。独自ドメインの設定にも対応しており、Githubをお使いの方であれば、git pushでデプロイができるため、非常に効率的に管理することができます。独自ドメインを利用しない場合にはGithubの用意したドメインを利用することもできます。

利用制限として、Github Pagesを利用するレポジトリのサイズ制限が1GB程度まで、というものがあります。通常のサイトであればこの制限が問題になることはないと思いますが、動画や画像でリッチに構成したサイトであれば、すべてを同じリポジトリに含めないなどの工夫が必要になります。

ページをGithub Pagesで公開する方法としては、専用のレポジトリを作成してレポジトリ直下から公開するか、既存のレポジトリの/docs配下にコンテンツを配置してそこをrootに見立てるかの2つの方法があります。編集権限者をわけたい場合は別レポジトリを、そうではなく、レポジトリをできる限りまとめて管理したい場合には/docs配下で管理することができます。

2022年8月時点、Github Pagesの利用は有料プランの利用者に限定されていますが、Githubの公式サービスとして、Github Actionsとの連携も可能になっており、様々なトリガーや前処理、後処理も容易に構成できるため、複雑なデプロイフローも実現できてしまう柔軟性は魅力の一つです。Githubを有料の組織プランで加入している場合などには、有力な選択肢になるでしょう。

Github Pagesの詳細な説明は以下をご参照ください。
» Github Pages公式ドキュメント

Github Pagesはあくまで静的サイトのホスティングサービスのため、フォーム送信を受け付け、メールを発信するようなプログラムを動かすことができません。Github Pagesをホスティングとしてフォーム機能を実現するには、Javascriptを駆使して外部のメールAPIやSMTPを使ってメール送信するか、外部のフォームサービスを利用するのが選択肢になりますが、圧倒的にお手軽なのは、外部のフォームサービスを利用する方法です。

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

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

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

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

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

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

3. Github Pagesにデプロイするページに、フォームのhtmlを記述する

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

<form action="https://ssgform.com/s/GiThUbPaGeFoRm" 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. テスト送信して、完了です

あとはGithub Pagesにデプロイするジェネレーターのローカルサーバーから、またはGithub Pagesにデプロイした後に実際のURLでテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。

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

 

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

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