[Contact Form 7] Welcart商品名を問い合わせ項目名として問い合わせフォームに引き継ぐ

前回の内容、WordPressプラグイン[Contact Form 7]を使って、遷移前のページの値(記事タイトル・カスタムフィールド )を引き継いでフォームに表示する、というのと同じような内容ですが、今回はGETを使ってやってみます。

今回やりたいこと

WelcartショッピングサイトでContact Form 7を使って、ECサイトでよく見かける商品ページにある「この商品について問い合わせ」というボタンをつけて、遷移したフォームに商品名が入力された状態にする

WelcartはWordPressでECサイトが構築できる無料プラグインです(日本製)
Welcart
https://www.welcart.com/

Contact Form 7
https://contactform7.com/ja/

問い合わせフォームを作成する

Contact Form 7をインストールして有効化したら、問い合わせフォームを作成します。

<label>商品名:
    [text item-name default:get readonly]</label>
<label">商品コード:
    [text item-code default:get readonly]</label>
<label> お名前 (必須):
    [text* your-name] </label>

<label> メールアドレス (必須):
    [email* your-email] </label>

<label>お問い合わせ内容 (必須):
    [textarea* your-message] </label>
<div>
[submit class:button class:expanded "送信"]
</div>

「商品名 item-name」と「商品コード item-code」を商品詳細ページから取得してフォームに表示させることにしますので、[readonly]をつけます。

readonlyをつけると、編集不可にして値を送信できます。

[default:get]はGET取得したデータを表示できます。

作成したらContact Form 7のショートコード を固定ページに貼り付けます。
★送信メールの設定も忘れずに!

[contact-form-7 id="XXX" title="この商品について問い合わせ"]

固定ページのパーマリンクは以下のようにしました。

https://mydomain.com/item-inquire

テーマファイルを編集

Welcartの商品詳細ページのテンプレートwc_item_single.phpを編集します。Welcartでない場合はsingle.php,page.phpなど用途に合わせて。

商品問い合わせボタンを設置します

<a href="<?php echo esc_url(home_url()); ?>/item-inquire/?item-name=<?php the_title(); ?>&item-code=<?php usces_the_itemCode(); ?>">この商品について問い合わせ</a>

※Welcart上の商品名と商品ページのタイトル[the_title()]を同一としていることを想定しているのでitem-nameにはthe_title()を使っています。

Welcartの登録商品名を利用する場合は以下のWelcartで用意されているテンプレートタグを使います。

<?php usces_the_itemName(); ?>

Welcart テンプレートタグ一覧

https://www.welcart.com/community/archives/799

GETを使う方法なら、functions.phpを編集しなくても簡単に設置できますね。

おまけ:問い合わせフォーム以外のページではContact Form 7のjs,cssを無効にする

Contact Form 7をインストールすると、WordPressのページ全てにContact Form 7のcssやjsが挿入されます。

利用するのは問い合わせフォームだけなので、サイトパフォーマンスの為にも問い合わせフォーム以外ではcss,jsを無効にします。

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

function my_deregister_styles() {
// 'contact' または 'item-inquire' という固定ページ以外は無効
  if (!is_page( array('contact','item-inquire'))) {
    // ハンドル名 'contact-form-7' のCSSの出力を無効化 
    wp_dequeue_style( 'contact-form-7' );
    // Contact Form 7 add confirmも使ってる場合は下記も
    wp_dequeue_style( 'contact-form-7-confirm' );
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_scripts() {
  // 'contact' または 'item-inquire' という固定ページ以外は無効
  if (!is_page( array('contact','item-inquire'))) {
    wp_deregister_script( 'contact-form-7' );
  }
}
add_action( 'wp_print_scripts', 'my_deregister_scripts', 100 );