2026年10月24日
Astroで作ったサイトのフォームにはどんな選択肢がありますか？ AstroのサイトにFormspreeでフォームを付ける手順は？ FormspreeのフォームIDを環境変数で管理するには？ Studioのフォーム項目をAstroのフォームで再現するときの注意点は？ # Astroで作ったサイトのフォームにはどんな選択肢がありますか？ Studioではフォームパーツを置くだけで通知メールまで届いていたので、Astroに移ったとたん「フォームはどうするの？」と手が止まる人は多いでしょう。Astroには、Studioのように送信を受け取って通知まで済ませる機能が最初から付いているわけではありません。作り方は大きく3通りあります。
作り方 サイト側でやること 気をつける点 Formspreeなどのフォームサービスへ送る HTMLのフォームを書き、送信先URLを入れる 送信件数はサービスのプランに左右される Astro Actionsで受信処理を書く 受け取る処理を自分で実装する フォームのactionから呼ぶページはオンデマンド描画にする。保存やメール通知は別に用意する Googleフォームを埋め込む 発行された埋め込みHTMLを貼る フォームを公開しないと回答者が開けない
主な選択肢のひとつが、Formspreeのような外部フォームバックエンドの利用です。Astroで生成した静的HTMLのformタグから指定エンドポイントへPOST送信するだけで完結します。サイト側にJavaScriptやサーバー側の受信プログラムを追加せずに済むため、静的サイトの軽快さを損ないません。
もうひとつの方法は、Astro公式のActions機能ガイド に記載されているAstro Actionsを活用する実装です。受信時の検証や後続の処理を、自分の書いたコードで柔軟に組める方法です。静的サイトとして公開しているなら、まずはFormspreeで作ってみて、足りない所が出てから自前の処理を考えても遅くありません。
# AstroのサイトにFormspreeでフォームを付ける手順は？ 静的なAstroサイトにFormspreeを導入するには、具体的にどのような手順を踏めばよいのでしょうか。何から手を付けるか迷ったら、Formspreeで送信先を作る、Astroのページにフォームを書く、手元で送ってみる、の順で進めます。
Formspreeでアカウントを作り、管理画面の「Add New > New Form」からフォーム名と受信先のメールアドレスを決める 作成後に表示されるForm Endpoint（formspree.io の /f/ に続くURL）を控える src/pages/contact.astro にフォームを置き、actionにそのURL、methodにPOSTを入れるnpm run dev で開発サーバーを起動し、ターミナルに出るlocalhostのアドレスを開いてテスト送信する開発サーバーのURLが開けないときは、ターミナルに表示されたアドレスを確かめてください。FormspreeのAstro向け案内 で解説されている通り、静的HTML方式であればクライアント側のJavaScriptやハイドレーションを追加しなくてもそのまま動作します。
フォームの各入力欄を記述する際は、input要素やtextarea要素に必ずname属性を付与してください。name属性を省略した入力欄は、訪問者が文字を入力しても送信データに含まれなくなります。
# FormspreeのフォームIDを環境変数で管理するには？ たとえばテスト用の受信設定と本番用の受信設定を分けたい場合、FormspreeのフォームIDをコードへ直接書き込まず、環境変数に切り出す設計が役立ちます。
Astroではプロジェクトのルートディレクトリに「.env」を配置し、「FORMSPREE_FORM_ID=xxxxxxx」のように定義しましょう。npm run dev で動かしている間は .env.development の値が優先され、本番ビルドでは .env の値が使われます。.env は本番だけで読まれるファイルではなく、どのモードでも読まれる共通の設定で、モード名の付いたファイルがあればそちらが勝つ、という仕組みです。開発中のテスト送信が本番の受信箱に紛れ込まなくなりますね。
テンプレートとなる.astroファイルのフロントマター部分では、「const formId = import.meta.env.FORMSPREE_FORM_ID;」と記述して値を取り出します。取り出したformIdを、Formspreeの送信先URL（formspree.io/f/ の後ろ）につなげてactionに指定すれば、HTMLの送信先をIDごとに切り替えられます。Astroのクライアント側スクリプトから直接読む環境変数には「PUBLIC_」という接頭辞が欠かせませんが、サーバー側でHTMLを生成する.astroファイル内であれば、接頭辞なしの変数もそのまま参照可能です。
本番環境をCloudflare Pagesでビルドして公開する場合は、管理画面側での変数設定も欠かせません。Cloudflare Pagesのビルド設定手順 に従い、対象プロジェクトの「Settings」から「Environment variables」を開いて本番用のFORMSPREE_FORM_IDを登録しておきます。
ただし、環境変数に置いてもIDが秘密になるわけではありません。生成されたHTMLのactionにURLの一部として書き出されるので、ページのソースを見れば誰でも読めます。環境変数は本番とテストの切り替えのために使うもの、と考えてください。
# Studioのフォーム項目をAstroのフォームで再現するときの注意点は？ Studioで作った入力画面を見慣れていると、コードでHTMLを書く際にどの属性を設定すべきか戸惑うことがあります。Studio公式のフォーム項目設定ヘルプ にもある通り、Studioのエディタ上では項目ごとに項目名や入力タイプ、必須設定、プレースホルダーなどを指定していました。どの欄が必須だったかは、エディタで一つずつ開いて確かめるのが早いです。
通知先のメールアドレスと、これまでの回答はフォームダッシュボード側で管理されています。エディタの「通知先の設定・集計結果」から移れるので、移行前に通知先を書き写し、必要な回答はこの時点で控えておきます。Formspreeへ自動で引き継がれるものはありません。
Astro側では、Studioの項目を次のように置き換えます。
項目名はlabelの文字と、input・textareaのnameに分けて書く 必須にしていた欄にはrequiredを付ける メールアドレスや電話番号は、入力タイプに合わせてtypeを選ぶ プレースホルダーはplaceholderに移す nameは通知メールで項目を見分ける手がかりになるので、field1のような番号ではなく、companyやemailなど何の欄かわかる名前にすると受け取った後に迷いません。
はまれぽの移管では、Studioの標準フォームを同じ項目のまま、送信内容がメールで届く形へ置き換えます。フォームの数で料金は変わらず、月額3,000円〜（運用込み）／単発98,000円〜（税別）です。
こんな聞き方も Astroで作ったサイトのフォームはどうすればよいですか？ astro フォーム どうする astro formspree 設定 AstroでFormspreeを設定するにはどうしますか？ formspree astro フォーム AstroのサイトにFormspreeでフォームを付けるにはどうしますか？ AstroのサイトでFormspreeを使ってフォームを作れますか？ あわせて知りたい（関連する疑問） Q Formspreeの無料プランで受け付けられる件数は？ Formspreeを無料で使い始めた場合、月に何件まで問い合わせを受け付けられるのでしょうか。Formspreeの無料プラン（Free tier）で提供されている送信件数は、Formspreeのプラン一覧 にある通り月間50件までとなっています。Formspree公式のアカウント制限案内 にある通り、無料枠であっても作成できるフォーム数やプロジェクト数自体には制限がなく、無制限に作成可能です。
問い合わせが月に数件程度の会社案内や個人サイトなら、50件の枠で足りるでしょう。気になるのは、キャンペーンの告知などで送信が急に増えた月です。
上限数を超えても、Webサイト上のフォーム自体がエラーで送信できなくなるわけではありません。訪問者が送信ボタンを押せば受付処理自体は行われます。ただし、超過した送信データについては通知メールの配信や外部プラグインの連携実行が一時的にストップします。データそのものはFormspreeのアカウント内に保存され、上限に達した旨を知らせる通知が管理者に届く仕組みです。
問い合わせが途切れたと感じたら、管理画面の受信一覧を開いて、保存だけされている回答が無いか見てください。毎月のように50件を超えるなら、有料プランへの切り替えを考える時期です。
Q FormspreeでもStudioと同じく回答がサービス側に残りますか？ Studioではダッシュボードで回答を見返していた、という人なら、Formspreeでも同じように見られるか気になりますよね。Formspreeでは、受信した送信データがサービス側のアカウントに保存される仕組みになっています。管理画面にログインすれば過去の回答一覧を閲覧できますが、閲覧可能な範囲にはプランごとのアーカイブ上限が設けられています。無料プランの場合、回答アーカイブの保存期間は30日です。30日を過ぎた回答は見られなくなる前提で、残したいものはメールやスプレッドシートに移しておきます。また、月間上限である50件を超えた回答もアカウント内に保存されますが、不要になった超過データは手動で削除可能です。なお、この削除操作は取り消せないため慎重に行います。
一方で、移行元のStudioでは保存に関する挙動を柔軟に切り替えられました。Studio公式の保存設定ヘルプ に記載されているように、Studioでは通知先メールを設定したうえで全体設定の「フォームの結果をStudioに保存」を無効にできました。この設定を選ぶと、ダッシュボードにメッセージを残さず通知先メールだけで受け取る運用が可能です。移行前のサイトがどちらの運用だったかで、Formspreeで揃えたい形も変わります。
Q Astroのフォームでファイルのアップロードはできますか？ Astroのフォームでもファイルは送れます。ファイル選択欄（input type="file"）を置き、formにmethodのPOSTとenctype="multipart/form-data"を指定すれば、送信データにファイルが入ります。
ただし、送信先としてFormspreeを利用する場合、ファイル添付機能は無料プランでは動作しません。Formspree公式のファイル送信仕様 で示されている通り、Personal、Professional、Businessといった有料プランの契約が前提となります。旧プランのGoldやPlatinumの一部も対象外です。また、Formspreeで回答の保存を無効にしていると、アップロードされたファイルも保存されません。
違いが出るのは受け取れるファイルの数と大きさです。
項目 Studioのフォーム Formspree 1回で送れるファイル アップロードパーツ1個につき1点（複数ならパーツを増やす） 1回の送信で最大10点 1ファイルの上限 20MB 25MB その他の条件 通知メールだけで受け取る設定ではファイル不可 送信全体で100MBまで、30秒以内に送り終える
大容量ファイルの送信を想定している場合は、回線環境やタイムアウトへの配慮も欠かせませんね。Studioで履歴書や写真を受け付けていたフォームを移すなら、Formspreeを有料にするか、添付をやめてメールでの返送をお願いする形にするかを先に決めます。
Q Googleフォームを埋め込んだままAstroへ移せますか？ StudioのEmbed機能を使ってGoogleフォームを埋め込んでいた場合、Astroへ引っ越したあとも同じ運用を続けられるのか、気をもむ方は少なくないでしょう。埋め込みに使っていたHTMLは、Astroのコンポーネントにもそのまま置けます。.astroファイルに書いた普通のHTMLは、そのコンポーネントを使ったページにそのまま出力されるためです。
埋め込み用のHTMLが手元に無ければ、Googleフォームの編集画面から取り直せます。右上のその他メニューで「HTML を埋め込む」を選ぶと埋め込みコードが表示 されるので、コピーしてお問い合わせページの.astroに貼り付けます。iframeの幅や高さは、新しいサイトのレイアウトに合わせて直してください。
サイトを移しても、Googleフォーム側の設定は何も変わりません。また、社外の一般ユーザーから問い合わせを募る目的であれば、アクセスできる回答者の権限設定も確認しておきます。組織内のユーザーのみに制限されていると、サイトを訪れた一般の閲覧者が入力できない事態に陥ってしまいます。
回答はこれまでどおりGoogleフォーム側に集まるので、Formspreeの月の件数や保存期間を気にせずに済みますね。その一方で、見た目はGoogleフォームのままなので、サイトのデザインに合わせたい場合はFormspreeで作り直すことになります。
前のQ&A Studioから移る場合、Webflowのフォーム機能はStudioと比べてどう違いますか？次のQ&A Studioから移るとき、WordPress・microCMS・EmDashの運用費用は何が違いますか？
