HTML を埋め込むだけで(サーバーサイド不要で)フォームでメールを送れる Formspree

やりたいこと

  • Webページ にメールフォームを設置したい
  • でもサーバサイドのコード書く(環境作る)のはめんどい
  • XSS とか CSRF とかもめんどい
  • 静的ページだけで完結させたい
    • GitHub Pages とか Netlify とか

そんな方へ

Formspree を使うのはいかがでしょうか。

使い方

1. ユーザ登録をする

まずトップページの右上の Gold account login をクリックします。

f:id:gregminster:20180504144311p:plain

ログインフォームが現れたら新規登録のために下の方にある Don't have an account? Register! をクリックします。Sign up for Formspree の画面が現れたらアカウントを登録しましょう。登録確認のメールが届くので、クリックして登録を確定させます。

f:id:gregminster:20180504150904p:plain

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 を押して認証します。

f:id:gregminster:20180504145926p:plain

このような経緯があるので、本番環境への設置後は最初に自分でこの認証を済ませましょう。

5. 改めて、フォームからメールを送信する

「3.」と同じようにして、再度メールを送信してみます。すると CAPTCHA の画面に遷移します。問題なければチェックを入れましょう。

f:id:gregminster:20180504150204p:plain

6. 送信完了の画面が出る

正しく送信できたならば送信完了の画面が出ます。RETURN TO ORIGINAL SITE をクリックすれば送信ページへ戻れます。

7. 送信されたフォームの内容が登録メール宛に届く

正しくフォームからメールが送信されたら、自分のアカウントの登録メール宛に送信内容が届きます。日本語も OK です*1

f:id:gregminster:20180504150326p:plain

8. 実際にフォームを設置する

あとは本番として設置したいページに Formspree のトップページの Example を参考にして フォームの HTML を書きましょう。書いた後は「4.」を経由してテストを行いましょう。

備考

  • 送信先のメールアドレス(自分のメールアドレス)をそのままフォームのコードとして埋め込むので、自分のメールアドレスはバレます
  • 「4.」で登録した認証を「削除」することはできないようです
    • 実質的には問題ないと思います*2
    • Gold Accounts になればなんとかなる?(月 9.99 ドル)
  • 無料アカウントでは「一ヶ月 1000 通 まで受信できる」とのことです
  • Gold Accounts には他にもいろいろ特典があります
  • もろもろ踏まえて、個人サイトなどのレベルでは十分すぎるサービスだと思います

*1:絵文字はコードに展開されます

*2:ドメイン契約が切れて、その後に第三者が同じドメインを取った場合……などのケースはもちろんあり得ますが

Powered by はてなブログ