WordPressのお問い合わせページに表を楽して作る！ContactForm7にTablePressを連携する方法！

トップ
WEB関連
WordPress
WordPressのお問い合わせページに表を楽して作る！ContactForm7にTablePressを連携する方法！

スポンサードリンク

WordPressのお問い合わせページに表を楽して作る！ContactForm7にTablePressを連携する方法！

2016年06月12日 [WordPress]

WordPressを使ったことがない、もしくはそれほど詳しく知らないという方はあまりピンとこないタイトルですよね。

今回この記事でご紹介するのが「ContactForm7」と「TablePress」というWordPressの超有名のプラグインについてです。

両方とも導入している方も多いと思われます。「ContactForm7」はお問い合わせページを構築するためのもので、カスタマイズ性があり、入力チェックもできるくらいの高機能さがあります。「TablePress」は簡単に表を作成することができ、さらにデザインの統一化、エクセルのインポート・エクスポート機能も含まれています。

両方とも非常に洗練されたプラグインで私も日頃愛用して使っています。

ContactForm7で簡単に表を作成して使いたい！

手始めに今回の目的を箇条書きにまとめました。

お問い合わせページに楽して表を表示したい

TablePressのテーブル情報に、ContactForm 7のフォームショートコードを入れる。（[text* name]など）
ContactForm7のフォームに、TablePressのショートコードを呼び出す。
ContactForm7で生成したショートコードを固定ページで表示させる。

もしかしたら使っていて気付いた、やってみたいと思われた方もいるかもしれません。

ContactForm7を使っていて、お問い合わせページの入力項目に対して表構造で表現したくてもできないんですよね。実際にはできますが、HTMLタグを1から書いていき、タグの中に入力項目をセットするということしかできずに、非常に手間がかかります。

そうなんです。ContactForm7には表構造をつくる機能が備わっていないのです。

そこで思いつくのが、TablePressで作った表にContactForm7の入力項目を入れて、お問い合わせページに呼び出す方法です。表構造はTablePressでお問い合わせページはContactForm7に任せておけば、簡単にできると思います。

いやできると思いました！が・・・

ContactForm7とTablePressが連携できない問題

TablePressの表にContactForm7の入力項目タグを入れ込みますよね。

件名	[text* subject]
氏名	[text* your_name]
メールアドレス	[text* your_email]
内容	[textarea* comment]

これをContactForm7のお問い合わせページ構築画面で呼び出します。

ところが・・・

いざTablePressで生成したショートコードを記述しても、

ショートコードがそのまま表示されてしまい、TablePressの機能が全く使えません。

というのもContactForm7自体が専用のショートコード以外を使用できないように制御しているからです。なのでそれ以外のショートコードを使おうとしても画像のようにショートコードが変換されないまま表示されてしまうのです。

さてこの状況を打開するには、「ContactForm7上で他のショートコードを利用できるようにする」だけです。

ContactForm7でTablePressなど他のショートコードを使用可能にする

使用しているWordPressテーマのfunctions.phpに以下を追記します。

/* Contact Form 7で他のショートコードを利用可能にする. */
add_filter( 'wpcf7_contact_form_properties', function( $prop ) {
  $prop['form'] = do_shortcode( $prop['form'] );
  return $prop;
});

/* Contact Form 7で他のショートコードを利用可能にする. */

add_filter( 'wpcf7_contact_form_properties', function( $prop ) {