FormspreeにPHPでサーバーサイドバリデーションを組み込んでみた
はじめに
初めまして。
2022年9月にポートに中途入社し、WordPress案件を中心としたバックエンド、フロントエンド、ちょこっとインフラ周りを触っている、@shoya.iikawaです。
今回は、弊社で扱っている簡易フォーム作成サービスFormspreeをちょっと便利に使う方法をお伝えしたいと思います。
Formspreeって？
一言で言ってしまうと、めっちゃ簡単にお問い合わせフォームみたいなメール送信フォームが作れるサービスになります。
詳細な手順は割愛しますが、最短3ステップでフォームの実装が行えて、送信履歴がFormspree管理画面から見れる優れもの！
【最短ステップ】
- 会員登録をする
- 管理画面からフォーム作成ボタンをクリック
- 作成されたフォームの埋め込み用
<form />タグをコピーして、埋め込みたい場所に埋め込み
| 3-1. 埋め込みタグをコピー | 3-2. タグを貼り付け | 3-3. フォームが出来上がり |
|---|---|---|
 |
 |
 |
【送信履歴も見れちゃいます】
今回行いたかった事
さて、こんな簡単に作れて良いのか？ってくらい簡単にフォームが作れるFormspree
弊社では、1サイトに複数のフォーム(通常問い合わせフォーム・資料請求フォーム・LP用フォーム・etc...)を用意する事も多いので、有料プランで使い倒しています。
しかし、実は僕はこのFormspreeを知ったのは入社してから。
Formspreeに初めましての時に、その簡単さには驚くものの、1つだけ思った事がありました。
「サーバーサイド言語無しで手軽に埋め込めるのは良いけど、逆に言うとサーバーサイドでバリデーションとか出来ないんじゃ、正確性が大事な会員登録フォームとかには使えないよなぁ、、、」
そう、管理画面のどこをどう探しても、必須項目の設定などを行える箇所が無く、バリデーションはあくまでフロントでしか出来ないんじゃなかろうか？という見た目になっていたのです。
もし思った事が正しいのであれば、1サイトで複数のフォームをFormspreeで作成しつつ、ちょっと複雑仕様なフォームになると、また別にスクラッチでPHP書くなりする必要性が出てきます。
ですが、1サイトで複数の仕様のフォームを使うのは混乱するので避けたいですよね。
なので、今回は**本当にサーバーサイドから手を加える事が出来ないのか？**を調べてみました！
サーバーサイドバリデーションの実装
結論
先に結論から言うと、、、出来ました！
Formspreeの仕様は、「<form />タグからのデータの送信先を、Formspree発行のURLにする」というものです。
なので、一回<form />のデータ送信を自前のPHPにした上で、そのPHPで処理を行った後にFormspreeにデータを投げる構成にしたら良かったのです。
以下に
- フォームが設置されたTOPページ(index.php)
- 送信完了ページ(complete.php)
のみのシンプルな構成でコードサンプルを書くので、ご覧ください。
index.php
【役割】
このファイルの役割は、以下の通りです。
- フォームの設置
- フォームが送信されたらバリデーションを行う
- バリデーションチェックがNGの場合は、フォーム内にアラートを表示し、問題ない場合はFormspreeにデータを受け渡す
- Formspreeに問題なくデータを送れたら、完了ページへ遷移
主な要点は、以下となります。
- 59行目：Formspreeからコピーした
<form />タグの、actionを変更 - 22〜35行目：PHPでPOSTされたデータを受け取り、それをcurl()でFormspreeに送信
- 36〜40行目：Formspreeに問題なくデータが送れたか確認し、送信の成否を判定
complete.php
ただの送信完了ページなので、こちらは特に説明は不要ですね。
まとめ
いかがでしたか？
今回は「メールアドレスの正規性確認のみ」といたってシンプルではありましたが、Formspreeにデータを送る前に、サーバーサイドで処理を挟む事が可能な事がお分かりいただけたかと思います。
これが可能になる事で
- 会員登録フォームとして利用し、自前のDBに会員情報を登録しつつ、メールを送る
- フォームがsubmitされた時ではなく、フォームの送信が正常に完了した場合のみをコンバージョンとした計測を行う
- 送信のタイミングで外部APIと連携を取る
といった、多少複雑な処理も問題なく行うようになりつつも、メールを送るという動作は手軽にパパッとFormspreeにお任せ、なんて使い方も出来ますね。
ちなみに余談になりますが、、、
・PORTブロードバンドというサイトで運用しているLPのフォーム送信完了時にコンバージョンタグを発火させて欲しい
という依頼を先日いただき、それがきっかけでFormspreeの手前にPHPを挟む方法を調べた、というのがこの記事を書かせていただいた切っ掛けとなります。
Discussion