やりたいこと
- Webページ にメールフォームを設置したい
- でもサーバサイドのコード書く(環境作る)のはめんどい
- XSS とか CSRF とかもめんどい
- 静的ページだけで完結させたい
- GitHub Pages とか Netlify とか
そんな方へ
Formspree を使うのはいかがでしょうか。
使い方
1. ユーザ登録をする
まずトップページの右上の Gold account login
をクリックします。
ログインフォームが現れたら新規登録のために下の方にある Don't have an account? Register!
をクリックします。Sign up for Formspree
の画面が現れたらアカウントを登録しましょう。登録確認のメールが届くので、クリックして登録を確定させます。
2. フォーム経由でメールが届くかどうかを確認するために、テストフォームにアクセスする
ここでいきなり自分のページにフォームを埋め込んでもいいのですが、まずはちゃんと届くかテストをします。Formspree のテストページに行きます。
3. HTML ソースに自分のメールアドレスを埋め込み、テストメールを送ってみる
- 左側の
Edit your form here
のところのaction
部分に自分のメールアドレスを埋め込みます<form method="POST" action="https://formspree.io/your@email.address.com">
- そうしたら右側の
Test it here
のところに内容を入力し、SEND
ボタンを押しますYour email
の箇所には送信者のアドレスを入れます(メールアドレスの体をなしていれば何でもよいです)Your message
の箇所には送信メッセージを入れます
4. そのドメインからの「一番最初の送信」では確認が求められる
そのドメイン(正確にはページ)からの「一番最初の送信時」には、そのままでは送信できません。「本当にこのドメインからの送信を受け付けてよいか?」を尋ねるメールが届きます。問題ないならば Confirm Form
を押して認証します。
このような経緯があるので、本番環境への設置後は最初に自分でこの認証を済ませましょう。
5. 改めて、フォームからメールを送信する
「3.」と同じようにして、再度メールを送信してみます。すると CAPTCHA の画面に遷移します。問題なければチェックを入れましょう。
6. 送信完了の画面が出る
正しく送信できたならば送信完了の画面が出ます。RETURN TO ORIGINAL SITE
をクリックすれば送信ページへ戻れます。
7. 送信されたフォームの内容が登録メール宛に届く
正しくフォームからメールが送信されたら、自分のアカウントの登録メール宛に送信内容が届きます。日本語も OK です*1。
8. 実際にフォームを設置する
あとは本番として設置したいページに Formspree のトップページの Example を参考にして フォームの HTML を書きましょう。書いた後は「4.」を経由してテストを行いましょう。
備考
- 送信先のメールアドレス(自分のメールアドレス)をそのままフォームのコードとして埋め込むので、自分のメールアドレスはバレます
- 「4.」で登録した認証を「削除」することはできないようです
- 実質的には問題ないと思います*2
Gold Accounts
になればなんとかなる?(月 9.99 ドル)
- 無料アカウントでは「一ヶ月 1000 通 まで受信できる」とのことです
Gold Accounts
には他にもいろいろ特典があります- もろもろ踏まえて、個人サイトなどのレベルでは十分すぎるサービスだと思います