Cloudflare Pagesにフォームを追加/設置/設定する方法
What is Cloudflare Pages?
Cloudflare Pagesとは
Cloudflare PagesはCloudflareが提供する、静的サイトのホスティングサービスです。JAMstackと略されることの多い、JavascriptやApi、Markupのデプロイ先として意欲的な開発が行われています。各種Gitサービスとのインテグレーション機能があるため、git pushするだけでページ反映、といった使い方が可能です。
Cloudflareの無料枠設定が非常に大きく、近年非常に人気を集めているサービスです。他にもDNSサービスを筆頭に、WorkersやKVなど、Cloudflare関連のサービスを利用されている方であれば、利用するハードルは非常に低く便利です。サイト訪問者に近いエッジサーバーからコンテンツが配信されるため、レイテンシが低く、より表示スピードを高めることができるのも魅力でしょう。
独自ドメイン設定や、各種静的サイトジェネレーター系のビルド連携など、豊富な機能が揃っています。Analytics機能もあり、GoogleAnalyticsを導入しなくても、簡易的なアクセス解析を行うこともできます。大量のアクセスにも強い基盤の上に構築されているため、個人のサイトからサービスサイトまで、静的なサイトのホスティングとしては今後もシェアを拡大していくことが予想されます。
Cloudflare Pagesは自社内のサービスを色々なかたちで連携することで、色々なことが実現できてしまいます。また、Javascriptを駆使して外部のメールAPIやSMTPを使えば、メール送信することも可能です。ただ単純に、できるだけ手軽に問い合わせフォームを設置したい、という場合には、外部のフォームサービスを利用するのが圧倒的にお手軽です。
Cloudflare Pages x SSGform
Cloudflare Pagesにフォームを追加する方法
Cloudflare Pagesで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Cloudflare Pagesサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Cloudflare Pagesにデプロイするページに、フォームのhtmlを記述する
Cloudflare Pagesにデプロイするページのいずれかに、<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはCloudflare Pagesにデプロイするジェネレーターのローカルサーバーから、またはCloudflare Pagesにデプロイした後に実際のURLでテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Cloudflare Pagesを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なCloudflare Pagesライフを送ってください！
