HTMLフォームの作成
Formspree は基本的な HTML フォームを簡単に統合できます。ここでは、初めての HTML フォームの作成方法、特定のニーズに合わせたマークアップの変更方法、そしてフォームをウェブサイトに組み込む方法を学びます。
始める前に、Formspree アカウントにサインアップしてメールアドレスを確認してください。
新しいフォームの作成
Formspree アカウントを作成したら、ダッシュボードにログインし、左上のプラスアイコンをクリックして「New Form」をクリックすることで新しいフォームを作成できます。
フォームの ID/エンドポイントは、Formspree ダッシュボードの「Integration」セクションで確認できます。フォーム ID は「Your form’s endpoint is:」の下に表示されます。ここでは、サイトで使用できるデフォルトのフォームスニペット集も確認できます。各スニペットは、そのフォーム固有のエンドポイントを使用するように設定されています。「Integration」に表示されるデフォルトのスニペットには、メールフィールド、メッセージフィールド、送信ボタンを備えたフォームのコードが含まれています。フォームに異なるフィールドを含めたい場合は、フォームライブラリでサンプルフォームを選択できます。
フォームマークアップの変更
フォームに特定の要件がある場合は、サンプルフォームのコードを変更するか、独自のフォームコードを記述することができます。フォームコードを作成する際には、標準的な HTML フォームフィールドや属性を自由に使用できます。フォームには最低限、フォーム固有のエンドポイントを含む action 属性と、name 属性を持つフィールド入力が必要です。name 属性を持つフォーム要素はすべて送信されます。
HTML フォームの詳細については、MDN Web Docs ウェブサイトを参照してください。
フォームの実装
Formspree は、ほとんどの最新のコンテンツ管理システムやフレームワークで使用できます。フォームをサイト内のどこにでも追加して表示させることができます。AJAX を使用してフォームを送信したい場合は、JavaScript (AJAX) でフォームを送信するガイドを参照してください。
React を使用していて、カスタムバリデーション付きの複数入力フォームを作成したい場合は、こちらのガイドに従って React コンポーネントライブラリを始めることができます。
サードパーティサービスへのフォームデータの送信
フォームがウェブサイトで稼働し始めると、送信内容の受け取りを開始できます。すべてのフォーム送信内容は Formspree アカウント内に保存されます。送信内容は、フォームの設定でターゲットメールアドレスとして登録されたメールアドレスにも送信できます。しかし、CRM やスプレッドシートなど、すでに使用している外部サービスにフォームの送信データを送ることが便利な場合もあります。Formspree は、サードパーティサービスへ送信データを簡単に送るためのプラグインを多数提供しています。
プラグインの統合は、Formspree ダッシュボードの「Plugins」または「Workflow」セクションから追加できます。特定のプラグインは特定のプランでのみ利用可能であることにご注意ください。主要なプラグインの詳細はこちらで確認できます：