Formspree を使ってウェブサイトにフォームを追加する方法
Chris Chen
ウェブサイトにフォームを追加するのは簡単そうに思えます。しかし、バックエンドのことを考え始めると、話は複雑になります。サーバーの構築、送信データの処理、メール通知の送信、スパムのフィルタリング、データの保存先の確保が必要です。シンプルなお問い合わせフォームにしては、やることが多すぎます。
Formspree はこれらすべてを処理してくれます。フォームの送信データを受け取り、必要な場所に転送するフォームバックエンドサービスです。
なぜ Formspree なのか？
- バックエンド不要。 フォームを Formspree のエンドポイントに向けるだけで完了です。
- スパム対策。 内蔵フィルタリング機能で受信トレイをクリーンに保ちます。
- 多様な連携。 Email、Discord、Slack で通知を受け取ったり、Google Sheets、Airtable などにデータを直接送信できます。
このガイドでは、Formspree の設定方法と、動作するコード例を使って Next.js アプリケーションに統合する方法を学びます。
Formspree を始める
1. アカウントを作成する
formspree.io にアクセスして、無料アカウントを登録します。無料プランでは月に 50 件の送信が可能で、ほとんどの個人プロジェクトや小規模サイトには十分です。
2. フォームエンドポイントを作成する
ログイン後：
- ダッシュボードで Add New -> New Form をクリック
- フォームに名前を付ける（例：「Contact Form」）
- Formspree が https://formspree.io/f/xyzabcde のような固有のエンドポイント URL を生成します
注意：この URL の最後の部分（ xyzabcde ）が Form ID です。ウェブサイトに統合する際に必要になります。
3. 連携オプション
Formspree はあらゆる技術スタックで動作します。ダッシュボードから、さまざまな連携方法のコード例を確認できます：
- HTML：action 属性を使用した従来のフォーム
- AJAX：JavaScript の fetch/XHR リクエスト
- React：公式の @formspree/react ライブラリを使用
静的な HTML サイトなら、HTML スニペットをコピー＆ペーストするだけで動作します。モダンな React/Next.js アプリでは、React ライブラリが hooks と状態管理によって、より良い開発体験を提供します。
Next.js で Formspree を使う
Formspree の公式 React ライブラリを使って、Next.js でお問い合わせフォームを作成してみましょう。
1. セットアップ
パッケージをインストールします：
npm install @formspree/react2. フォームコンポーネントの作成
新しいコンポーネントファイル components/ContactForm.jsx を作成します：
import { useForm, ValidationError } from '@formspree/react';
function ContactForm() {
const [state, handleSubmit] = useForm("xyzabcde"); // Replace with your Form ID
if (state.succeeded) {
return <p>Thanks for your message! We'll get back to you soon.</p>;
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name</label>
<input
id='name'
type="text"
name="name"
required
/>
</div>
<div>
<label htmlFor="email">Email</label>
<input
id='email'
type="email"
name="email"
required
/>
<ValidationError
prefix="Email"
field="email"
errors={state.errors}
/>
</div>
<div>
<label htmlFor="message">Message</label>
<textarea
id='message'
name="message"
rows="5"
required
/>
<ValidationError
prefix="Message"
field="message"
errors={state.errors}
/>
</div>
<button type="submit" disabled={state.submitting}>
{state.submitting ? 'Sending...' : 'Send Message'}
</button>
</form>
);
}
export default ContactForm;仕組み：
- useForm hook は Form ID を受け取り、フォームの状態と送信ハンドラーを返します
- state.submitting はフォーム送信中に true になります
- state.succeeded は送信成功後に true になります
- state.errors には Formspree からのバリデーションエラーが含まれます
- ValidationError コンポーネントはフィールドごとのエラーを自動的に表示します
これで、任意のページでコンポーネントを使用できます：
import ContactForm from '@/components/ContactForm';
export default function ContactPage() {
return (
<main>
<h1>Contact Us</h1>
<ContactForm />
</main>
);
}以上です。フォームは Formspree に送信され、送信ごとにメール通知を受け取れます。
3. オプションの拡張機能
環境変数
Form ID を直接記述しても問題ありませんが、環境変数を使う方がスマートです。開発環境と本番環境で異なるフォームを使う場合に特に便利です。
.env.local ファイルを作成します：
# Replace with your Form ID
NEXT_PUBLIC_FORM=xyzabcdeコンポーネントを更新します：
const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORM);クライアントサイドバリデーション
上記の例では基本的な HTML バリデーション（ required 、 type="email" ）を使用しています。より複雑なバリデーションが必要な場合は、React Hook Form や Zod を Formspree と併用することを検討してください。
reCAPTCHA によるスパム対策
Formspree は reCAPTCHA 連携をサポートしています。Formspree ダッシュボードのフォーム設定で有効にした後、reCAPTCHA コンポーネントを追加します：
import { useForm, ValidationError } from '@formspree/react';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
function ContactForm() {
const { executeRecaptcha } = useGoogleReCaptcha();
const [state, handleSubmit] = useForm("xyzabcde", {
data: { "g-recaptcha-response": executeRecaptcha }
});
// ... rest of the form
}ワンクリックで EdgeOne Pages にデプロイ
Formspree を統合済みの Next.js テンプレートを用意しました。基本的なバリデーションとエラーハンドリングを備えたお問い合わせフォームがすぐに使えます。ワンクリックで EdgeOne Pages にデプロイできます。
始め方：
- Formspree でフォームを作成し、Form ID をコピー
- 下のデプロイボタンをクリックして、デプロイページを開く
- 環境変数セクションで NEXT_PUBLIC_FORM に Form ID を設定
- デプロイを完了
開始から完了まで約 5 分です。デプロイ後は、フォームのフィールドやスタイルをカスタマイズしたり、サイトにフォームを追加したりできます。
ご質問がありましたら、お問い合わせください。お手伝いします。