[WordPress] contact form 7とcontact form DBで送信内容をDBに保存(画像含む)⇒ページへリスト表示

wp_cf

ログインしていないユーザーなど誰でも、アンケートや一言メッセージなどを画像付きで投稿できて、さらに固定ページなどへ、それらの投稿内容をリスト表示させたいのをWordpressで簡単に実現するためにプラグインのcontact form 7とcontact form DBを使った方法です。
必要なプラグイン

※インストールは管理画面のプラグインから検索してやるのが早いです。
※Contact Form DBは、PHPのバージョンが5.3以上でないとエラーがでます。その場合は、こちらからバージョンの古いものをDLしてFTPでアップロードすると使える可能性ありです。sakuraのレンタルサーバーだと、PHP5.2xxxだったりするようです。Contact Form DBのバージョンは2.9.16 でPHP5.2で動くのを確認しています。(古いものを推奨するものではありませんが。。)

気が早い方は、インストールしてすぐにContact Form DBの設定を試みるかもしれません。
しかし、フォームからの送信が1件もないと、設定ができませんので注意です。まずContact Form 7をインストールするとダミーのフォームが1つ設定されていますので、固定ページなどにショートコードを張り付けてフォームを実装してください。

手順① 下記プラグインをインストールし、有効化

手順② Contact Form 7でフォームを作成し固定ページに設置

今回は画像もアップロードするためにフォームの項目にinput type=”file”もつけてみました。

form2

手順③ フォームに入力し送信

 

手順④ 管理画面の左メニュー「Contact Form DB」を開く

cfdb

特になにも設定することなく、Contact Form 7で作成されたフォームからの送信が自動的にDBに保存されリスト表示されます。
画像もデータベースに直接バイナリで保存されてるようです。※カスタマイズで指定ディレクトリに保存することもできるようですが、未確認です。
また、リストされたデータの編集は行えませんが、データ編集モードを有効化(有料)するとテキストの修正や、カラムの追加などもおこなえるようです。

[おまけ]さらにリストされたDBのデータをExcel.xlsxやscv(Shift-JISも可)、Googleスプレッドシート、JSONなどさまざまな形式でダウンロードできます。

file

手順⑤同じく左メニュー「Contact Form DB」⇒ショートコードを開きます。

ショートコードのパターンはいくつかあります。

  • cfdb-html
  • cfdb-table
  • cfdb-datatable
  • cfdb-value
  • cfdb-count
  • cfdb-json
  • cfdb-export-link

cfdb-html以外は決まったひな形で、すぐに使えます。
cfdb-htmlだけは、各項目を設定する必要がありますが、表示する項目を調整できるし、CSSでスタイルしやすいようにclass=””も独自に記述することもできます。
特定の値が入っている列だけをリストしたり、アップされた画像をリンクURLで出力したり、ファイル名だけ出力、または<img>タグごと出力したりを簡単に指定できます。

まだまだ、使い方はたくさんありますが、この辺で。つづきはまた今度。