セミナーなどの申し込みはconnpass Peatix など色々あり、来場時、QRコードを読み取って受け付けを行っているセミナーもあります。
WordPressで、申し込みからQRコードリーダーを使った受け付けシステムを作れないものかと試してみました。
 
WordPressにはContact Form 7(以下CF7)という素晴らしいフォーム作成のPlug-Inがあります。
CF7と、さらにCF7の機能を拡張するPlug-Inを検証してみました。
 

検証したもの

 QRコードリーダー


とりあえず試しなので、機能性は重視せず、安価な商品をamazonで購入しました。
検証した結果、作成したフォームから「受付番号」と「申込者の名前」をQRコードに仕込み、リーダーで読み取ってみると下の動画のような結果になりました。
 

▲受付番号は「001」、名前は「織田信長」。
 
001
49047524635344559724

 
「001」は分かりますが、数字の羅列はなんなのでしょう?
20文字あるので5文字づつの10進数かと思いましたが、織田信長だと「49061506284907050361」という数値でなければなりません。
色々と検証しましたが結局分からず、2バイト文字は含めないようにし、受付番号とメールアドレスを含める仕様にしました。
参考にしたサイト
10進数←→16進数変換プログラム 
Unicode対応 文字コード表 
 
ちなみにiPhoneとAndroidはちゃんと「織田信長」と表示します。
スマホ
▲左、iPhone。右、Androin(Zenfone 3)
 

 Contact Form 7

問い合わせや、申し込みなどのフォームを作る場合、WordPressではContact Form 7を使うのがセオリーです。
Contact Form 7
▲Contact Form 7
 
申し込みフォーム
▲インストールして有効化するとメニューに「お問い合わせ」が表示されるので新規追加で任意のフォームを作成します。
フォームタブから表示したい項目をショートコードで入力していきます。色々な項目が準備されているので試してみると良いでしょう。
上部に記載されているショートコードを任意の投稿、固定ページにペーストすると、そのページがフォームページになります。
 

申し込みフォーム
▲メールタブで掲載する内容やコメントなど、送信する受け付け完了メールの設定を行います。
管理者宛、申込者宛など、複数人に配信することもできます。
テキストメール、HTMLメールの設定もここで行います。
上図ではQRコードを生成するAPIを利用してQRコードを画像として貼り付けるタグを記載しています。※詳しくは下で解説しています。 

 Contact Form 7 Serial Numbers

CF7に通し番号を付けてくれるPlug-Inです。
Contact Form 7 Serial Numbers
▲ずいぶん更新されていないのでご注意ください。
 
設定画面
▲有効化すると「設定」に表示されるようになります。
 
設定画面
▲カウント、リセット、桁数、接頭辞などを行います。
メールタグに表示されているショートコードをCF7のメールタグに記載します。
一度カウントを設定してから「更新」をクリックするようにしてください。
「設定」をクリックすると「桁数」が「0」になってしまいますが、ちゃんと設定されているのでご安心ください。。。

 Contact Form DB

CF7をデータベースとして保存してくれるPlug-Inです。
WordPressの新規追加から検索しても見つけられません。
こちらから ダウンロードしインストールしてください。
CF7DB
▲有効化するとメニューに表示されます。
CF7で登録したものが一覧表示されExcelデータやCSVとしてダウンロードすることができます。
Serial Numberの項目もありますが、残念なことに全て「1」と表示されます。
phpMyAdminにも独自のデータベースを残しますが、PHPで操作しづらい構造になっており少々残念な仕様です。
CF7DB

 Quickchart

Quickchart 
QRコードを出力してくれるAPIです。
Quickchart
Get startedをクリックします。
 
Quickchart
▲左側のメニューからQR codesをクリックします。
 
Quickchart
▲ハイライト表示されているコードをコピーしてCF7のメールタブのメッセージ本文にペーストします。
 
下記のように記述しました。
<img src="https://quickchart.io/qr?text=[cf7_serial_number_5]%0D%0A[your-email]" alt="QRコード""/p>
 
[cf7_serial_number_5]はContact Form 7 Serial Numbersで付与した受付番号。
[your-email]は申込者のメールアドレス。
%0D%0Aは16進の改行(コード表記でいう<CR><LF>)です。

 

まとめ

申し込みフォーム
▲出来上がったフォーム。
 
受信メール
▲受信メール。
 
ハッキリ言って、惜しいところまではできますが、システムとして使うには貧弱です。
他にも、Plug-In「Flamingo」も検証してみましたが履歴を残すだけで、大掛かりなシステムには不向きかと思いました。
フォーム入力、QRコード付きメール送信まではいいのですが、受け付け時のデータベース構築化が課題になります。
QRコードを読み取り、参加者をチェックするシステムにも連動させたいので、後日、検証、作成したいと思います。
 
※QRコードの商標はデンソーウェーブの登録商標です。
 
最後まで読んでいただきありがとうございました。
 

関連記事


Pocket
LINEで送る