【formspree】静的サイトに問い合わせフォームを実装する

Github Pagesにアップロードしたポートフォリオサイトに、「formspree」というサービスを使い、お問い合わせフォームの実装を行いました。

導入自体は難しくはありませんでしたが、解説されている記事が古いものばかりでしたので同じように困っている方に向けてまとめたいと思います。

①アカウント登録

「formspree」を使用するにはアカウントの登録が必要です。

f:id:hnm-n-1029:20200812181311p:plain

https://formspree.io/

上記URLにアクセスし「SIGN UP」または「GET START」をクリックするとアカウント登録画面があらわれます。


f:id:hnm-n-1029:20200812181446p:plain

Emailと任意のPasswordを入力し「REGISTER」をクリック。

登録したアドレスにメールが届くので承認するとサービスが使用可能になります。

②Formタグの設定


承認すると以下のような設定画面に遷移します。

f:id:hnm-n-1029:20200812182127p:plain


「Your form's endpoint is:」の下に記載されている「https://formspree.io」から始まるURLを自サイトのFromタグのactionに設定します。

これで設定は完了です!簡単ですね!

設定後は必ず、問い合わせ内容が設定したアドレスに届くか確認しましょう。


送信先のアドレスを変更したい場合は、「Form Details」の「Settings」で変更できます。
他にも送信完了後のサンクスページの作成などカスタマイズできるようなので、
自分の目的に合った仕様にカスタマイズしてみてください!

今回は以上になります!


↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック

kenjimorita.jp