メインコンテンツへスキップ
← ブログ一覧に戻る
2025-04-14
静的サイトお問い合わせフォームFormspreeバックエンドReact

静的サイトにお問い合わせフォームを組み込む際のバックエンド検討

Author: Yutaro Iwamoto

はじめに

現在、コーポレートサイトをReactで作り、固定費を抑えるために静的サイトでRender.comにホスティングしています。ページレンダリングする分には問題ありませんが、お問い合わせフォームなど動的処理が必要な場合は若干ネックとなります。

しかし、最近ではBaaSなどバックエンドサービスが多数存在するため、それらをうまく活用することで、サーバーレスでも十分に機能するお問い合わせフォームを実装することが可能です。今回は、静的サイトにお問い合わせフォームを組み込む際に検討したバックエンドオプションについて紹介します。

Google App Script（GAS）を使う案

概要

  • バックエンドとしてGASを使用する方法
  • 無料で利用可能
  • GASスクリプトを書き、URLに対してReactからリクエストを送信

メリット

  • 完全無料で運用可能
  • Googleのインフラを利用するため安定性が高い
  • スプレッドシートと連携して問い合わせデータを管理できる

デメリット

  • GASのコードを自前で管理する必要がある
  • エラーハンドリングやセキュリティ対策を自分で実装する必要がある
  • GASが動かなくなった場合に検知しづらい

料金プランと制限

  • 完全無料：GASは完全に無料で利用可能です
  • 実行時間制限：1回の実行につき最大6分間
  • 1日あたりの実行時間：合計90分まで
  • トリガー制限：1プロジェクトあたり20個まで
  • メール送信制限：1日あたり100通まで（Gmailの制限に準拠）
  • スプレッドシート行数制限：最大500万行（データ管理用）

実装方法

GASを使用する場合、以下の手順で実装します：

  1. Googleスプレッドシートを作成し、問い合わせデータを保存するシートを準備
  2. スクリプトエディタでGASコードを作成（フォームデータの受け取り、スプレッドシートへの保存、メール送信など）
  3. デプロイしてWebアプリケーションとして公開し、URLを取得
  4. 静的サイト側でフォームのsubmitイベントをハンドリングし、GASのURLにデータをPOST

結論

無料で運用可能なことは魅力的ですが、GASが動かなくなった場合に検知しづらい点や、コードの保守コストが一定数発生するため見送りました。

FormMailerなどの埋込式サービスを使う案

概要

  • FormMailerなどの埋め込み型フォームサービスを利用
  • 無料枠があり、コストを抑えられる
  • iframe埋め込みで簡単にフォーム実装が可能

メリット

  • コードをほとんど書かずに実装可能
  • 保守コストが低い
  • スパム対策などの機能が標準で備わっている

デメリット

料金プランと制限

  • 無料プラン：月間100件までの問い合わせ
  • 有料プラン：月額980円〜（税込）で月間問い合わせ件数無制限
  • 添付ファイル：無料プランでは1ファイル2MBまで、合計10MBまで
  • フォームデザイン：テンプレートから選択可能、HTMLカスタマイズも一部可能
  • スパム対策：reCAPTCHA対応
  • 自動返信メール：設定可能（無料プランでも利用可能）

実装方法

FormMailerを使用する場合、以下の手順で実装します：

  1. FormMailerのアカウントを作成
  2. フォームの設定（項目、デザイン、自動返信メールなど）
  3. 生成されたiframeコードを静的サイトに埋め込む
  4. または、FormMailerの公開するエンドポイントを使用して独自フォームから送信（一部制限あり）

結論

無料枠があり、コードをほとんど書かずに保守コストを抑えられる点は良かったのですが、フォームの拡張性が若干劣るため見送りました。

Formspreeを使う案

概要

  • Formspreeを利用する方法
  • 無料枠あり（月50件までの問い合わせ）
  • 専用のReactパッケージ（@formspree/react）が公開されている

メリット

  • 拡張性が高く、Reactとの親和性が良い
  • 画面遷移等も柔軟にカスタム可能
  • BaaS的にフォーム送信時のActionもサービス側で登録可能
  • reCAPTCHAなどのスパム対策も簡単に実装可能

デメリット

  • 無料枠を超えると有料プラン（月額$10〜）が必要
  • 海外サービスのため、日本語サポートはない

料金プランと制限

  • 無料プラン（Free）：月間50件までの問い合わせ、1フォーム
  • Basic プラン：月額$10（約1,500円）で月間1,000件まで、無制限フォーム
  • Plus プラン：月額$40（約6,000円）で月間10,000件まで、高度な機能
  • 添付ファイル：無料プランでも対応（ファイルサイズ制限あり）
  • スパム対策：reCAPTCHA、ハニーポット対応
  • Webhook連携：有料プランで利用可能
  • カスタムリダイレクト：すべてのプランで利用可能
  • APIアクセス：有料プランで利用可能

実装方法

Formspreeを使用する場合、以下の手順で実装します：

  1. Formspreeのアカウントを作成
  2. 新しいフォームを作成し、フォームIDを取得
  3. Reactプロジェクトに@formspree/reactパッケージをインストール
  4. useFormフックを使用してフォームコンポーネントを実装
  5. 送信成功時の挙動やエラーハンドリングをカスタマイズ

高度な機能

  • ファイルアップロード：フォームからファイルを送信可能
  • カスタムフィールド検証：独自のバリデーションルールを設定可能
  • Hidden Fields：ユーザーには見えない追加情報を送信可能
  • Webhook連携：Slack、Discord、Zapierなどと連携可能
  • スパム対策：複数の方法でスパム対策が可能
  • メール通知のカスタマイズ：テンプレートやCCの設定が可能

結論

こちらで採用しました。Reactとの親和性が高く、拡張性も十分であり、保守コストも低いため、最適な選択肢と判断しました。

その他の検討したサービス

以下のサービスも検討対象としましたが、詳細な検証は行っていません。

Formcarry

  • 無料枠あり（月100件まで）
  • Reactとの連携も可能
  • APIが充実している

Getform

  • 無料枠あり（月50件まで）
  • ファイルアップロード機能あり
  • Webhookによる連携が可能

Netlify Forms

  • Netlifyでホスティングしている場合に便利
  • 無料枠あり（月100件まで）
  • サイトのデプロイと一緒に設定可能

Beeceptor / Hookdeck

  • APIエンドポイントのモックやプロキシとして利用可能
  • 開発段階でのテストに便利
  • 本番環境での長期運用には向かない場合も

総括

いずれの方法もコードを書けばやりたいことは実現できそうでしたが、その後発生する保守コストや安定性が争点となりました。

今回、Formspreeを利用しましたが、選定理由は以下の通りです：

  1. 無料枠が十分（月50件の問い合わせ）
  2. Reactとの親和性が高く、専用パッケージがある
  3. フォーム送信後の挙動を柔軟にカスタマイズ可能
  4. スパム対策機能が標準で備わっている
  5. 保守コストが低い

しばらく運用する中で気になる点が出てきたら、また検討し直す予定です。静的サイトでも、これらのサービスを活用することで、動的な機能を低コストで実現できることがわかりました。静的サイトで運用されてる方は、ぜひ検討してみてください！