前回、NetlifyからCloudflare Pagesに移行したサイトのURLの正規化を行いました。
URLの正規化はできましたが、移行したことにより、NetlifyのForms機能が使用できなくなりました。

そして、どのようにCloudflare Pagesでお問い合わせフォームを実装しようか迷っていたところ、まず最初にGoogle フォームが思い浮かびました。

Googleフォームは簡単に設置できて便利ですが、デザインを柔軟に変えれません。
私は既にお問い合わせフォームのデザインを作っており、せっかくならそれを使ってお問い合わせフォームを作りたかったのです。

そこで、SSGformという素晴らしいサービスを見つけました！
今回はこの、SSGformを使ってCloudflare Pagesにお問い合わせフォームを実装していきたいと思います！

SSGformとは

SSGformとはフォームを簡単に設置できるサービスで、静的サイトはもちろん、他のWordPressや各種Webサイトにも対応してるみたいです。

SSGformの無料プラン内容はこちら⬇︎

無料にしては十分過ぎる内容ですね。
個人的にフリープランで、クレジットカードを登録しなくても良いのも、ありがたいところです。

SSGformの実装

まず、SSGformに移動し、新規登録します。

そして、上記のような管理画面になったら、+追加を選択します。

分かりやすい任意のフォーム名をつけます。
この送信先URLはformのactionに指定するURLです。
とりあえず、一旦スルーして先に進めます。

通知先メールアドレスを指定し、件名などを好きな内容に変えれます。

送信後転送URLに任意のサンキューページURLを指定すると、そこに飛ばしてくれます。
サンキューページを作ってない方は空欄にすることで、SSGformのデフォルトのサンキューページが使えます。

次に、reCAPTCHA設定(bot対策)をしていきます。
reCAPTCHAを追加する場合は、Google reCAPTCHAに移動し、使ってみるを選択します。

ラベルに任意の名前を付け、チャレンジv2を選択し、「私はロボットではありません」を選択します。
v3にしなかったのは、なんかめんどくさそうだったからです。

そしてreCAPTCHA設定するドメインを入力し、プロジェクト名はデフォルトのままで、送信で次に進みました。

サイトキーとシークレットキーが発行されるので、シークレットキーの方を、SSGformに戻って割り当てます。

シークレットキーを割り当てれたら、さらに詳しくをタップし、指定されたscriptとdivをそれぞれ自分のサイトのHTML内に埋め込んでいきます。

<form method="POST" action="SSGformの送信先URL">
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <!-- お問い合わせ内容(省略) -->

    <div class="g-recaptcha" data-sitekey="recaptchaのサイトキー"></div>
        <input type="submit" name="submit" value="送信する" />
    </div>
</form>

私はformの最初と、送信ボタンの前にそれぞれ、指定のscriptとdivを追加しました。
SSGformの送信先URLと、recaptchaのサイトキーは、ご自身のものを入れます。

SSGformの設定に戻り、後は自動応答メールの設定やチャット連携などがありましたが、今回はスルーして保存を選択しました。

変更したサイトをデプロイし、試しにお問い合わせをしてみると、しっかり反映されてました。

上記のような感じでメッセージがgmailに来ました。
name属性を指定してるかなのか、submit:送信するという文字も入ってしまってますね笑

なんにせよ、無事にお問い合わせフォームを実装できて良かったです。

参考

• SSGform - Cloudflare Pagesにフォームを追加/設置/設定する方法（参照日: 2025 年 03 月 26 日）
• Suzunatsu Web - Astro製サイトにSSGformを設置する（1）reCAPTCHAの設定（参照日: 2025 年 03 月 26 日）