Contact Form 7とQRコード。

投稿日：2020年7月12日

更新日：2022年6月2日
セミナーなどの申し込みはconnpass やPeatix など色々あり、来場時、QRコードを読み取って受け付けを行っているセミナーもあります。
WordPressで、申し込みからQRコードリーダーを使った受け付けシステムを作れないものかと試してみました。

WordPressにはContact Form 7（以下CF7）という素晴らしいフォーム作成のPlug-Inがあります。
CF7と、さらにCF7の機能を拡張するPlug-Inを検証してみました。

検証したもの

QRコードリーダー

Contact Form 7

Contact Form 7 Serial Numbers

Contact Form DB

Quickchart

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

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

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

Contact Form 7 Serial Numbers

CF7に通し番号を付けてくれるPlug-Inです。

▲ずいぶん更新されていないのでご注意ください。

▲有効化すると「設定」に表示されるようになります。

▲カウント、リセット、桁数、接頭辞などを行います。
メールタグに表示されているショートコードをCF7のメールタグに記載します。
一度カウントを設定してから「更新」をクリックするようにしてください。
「設定」をクリックすると「桁数」が「０」になってしまいますが、ちゃんと設定されているのでご安心ください。。。

Contact Form DB

CF7をデータベースとして保存してくれるPlug-Inです。
WordPressの新規追加から検索しても見つけられません。
こちらからダウンロードしインストールしてください。

▲有効化するとメニューに表示されます。
CF7で登録したものが一覧表示されExcelデータやCSVとしてダウンロードすることができます。
Serial Numberの項目もありますが、残念なことに全て「1」と表示されます。
phpMyAdminにも独自のデータベースを残します~~が、PHPで操作しづらい構造になっており少々残念な仕様です。~~

2021年4月29日追記
下記のソースコードで名前とメールアドレス、タイプスタンプを取得できます。

<?php
ini_set('display_errors', "On");
// ▼▼▼ 初期化
$name = null;
$mail = null;
$submit_time = null;

$dbh = null;

try {
  // ▼▼▼ データベース接続
  $dbh = new PDO('mysql:host=ホスト名; dbname=データベース名; charset=utf8', 'ユーザーID', 'パスワード');

  // ▼▼▼ テーブルから取得
  $name = "SELECT * FROM wpcf7dbplugin_submits WHERE field_order='0'";
  $mail = "SELECT * FROM wpcf7dbplugin_submits WHERE field_order='1'";
  $submit_time = "SELECT submit_time FROM wpcf7dbplugin_submits WHERE field_order='0'";

  // 名前を取得
  foreach ($dbh->query("SELECT * FROM wpcf7dbplugin_submits WHERE field_order='0'") as $value) {
    echo "$value[field_value]";
  }

  // メールアドレスを取得
  foreach ($dbh->query("SELECT * FROM wpcf7dbplugin_submits WHERE field_order='1'") as $value) {
    echo "$value[field_value]";
  }

  // タイムスタンプを取得
  foreach ($dbh->query("SELECT FROM_UNIXTIME(submit_time) FROM wpcf7dbplugin_submits WHERE field_order='0'") as $value) {
    $submit_time_val = explode('.', "$value[0]"); // ←小数点以下のタイムスタンプを削除
    echo "$submit_time_val[0]";
  }
} catch (PDOException $e) {
  echo $e->getMessage();
  die();
}
$dbh = null;
?>

▲タイプスタンプはFROM_UNIXTIME()関数でUnixtime型からData型に変換する必要があります。
FROM_UNIXTIME()関数で取得しても2020-07-12 21:29:13.6309のように小数点以下も拾ってしまいます。
そこで31行目、explode('.', "$value[0]");のようにexplode()関数を使用し小数点以下を取得しないようにしました。

Quickchart

Quickchart
QRコードを出力してくれるAPIです。

▲Get startedをクリックします。

▲左側のメニューからQR codesをクリックします。

▲ハイライト表示されているコードをコピーしてCF7のメールタブのメッセージ本文にペーストします。

下記のように記述しました。
<img src="https://quickchart.io/qr?text=[cf7_serial_number_5]%0D%0A[your-email]" alt="QRコード">

[cf7_serial_number_5]はContact Form 7 Serial Numbersで付与した受付番号。
[your-email]は申込者のメールアドレス。
%0D%0Aは16進の改行（コード表記でいう<CR><LF>）です。

まとめ

▲出来上がったフォーム。

▲受信メール。
ハッキリ言って、惜しいところまではできますが、システムとして使うには貧弱です。
他にも、Plug-In「Flamingo」も検証してみましたが履歴を残すだけで、大掛かりなシステムには不向きかと思いました。
フォーム入力、QRコード付きメール送信まではいいのですが、受け付け時のデータベース構築化が課題になります。
QRコードを読み取り、参加者をチェックするシステムにも連動させたいので、後日、検証、作成したいと思います。
2022年6月2日追記
上記について再検証した受付システムについての内容を以下のブログに書きました。