約束の地

キャロ組

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 はてなブログ