いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【WordPress】Contact Form 7 に値を渡すメモ

こんにちは、ふいにフォームに値を渡したい時って、ありますよね(*´ω`*)

そんな時、いつもどうやるんだっけーと思い出すのが面倒くさいので、メモします(´・ω・`)<知ってるよ!って人は生暖かい目で見て下さい(笑)

Contact Form 7に値を渡す方法

Contact Form 7をインストール

WordPressでフォームのプラグインはいくつかあります、私は最近MW WP Formをよく使っていますが、今回はみんなだいすき!Contact Form 7を使用します(´・ω・`)!管理画面からインストール、どん!そして有効化。

値を渡すページ

値を渡したいので、値を渡すページまたは投稿などのところに通常と同じフォームを書きます(´・ω・`)<普通にね、POSTで渡します。
phpに表示したい分岐させて書いちゃうと楽かも♪

<form action="URL" method="post">
<input type="hidden" name="★" value="☆">
<input type="submit" value="フォームへ">
</form>

 入力させたい場合はhiddenじゃなくてOK(*´ω`*)

また、カスタムフィールドの場合は(※Advanced Custom Fieldsプラグイン使用として)こんな感じ

<form action="URL" method="post">
<input type="hidden" name="★" value="<?php the_field('★',$post->ID); ?>">
<input type="submit" value="フォームへ" class="submitbtn">
</form>

 値を渡すファンクション追加

function.phpに追加。

/* contact form7 値引き渡し */
function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;
  if(isset($_POST['★'])){
    $name = $tag['name'];
    if($name == '★')
      $tag['values'] = (array) $_POST['★'];
  }
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter');

 複数もOKです。こんな感じで増やせます(*´ω`*)↓

/* contact form7 値引き渡し */
function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;
  if(isset($_POST['★'])){
    $name = $tag['name'];
    if($name == '★')
      $tag['values'] = (array) $_POST['★'];
  }
  if(isset($_POST['☆'])){
    $name = $tag['name'];
    if($name == '☆')
      $tag['values'] = (array) $_POST['☆'];
  }
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter');

 Contact Form 7側で受け取って表示

[text ★ class:readonly readonly]

 textでもなんでも(*´ェ`*)ちなみにclassにreadonly入れたのは、CSSでボーダーとったりなんだりしたいからです(笑)

これだけです!超簡単~(∩´∀`)∩

※Contact Form 7のバージョンもあるかも?だけど、readonlyにならない人は下記jQueryでreadonlyにしちゃえw

jQuery(".readonly").attr('readonly', 'readonly');

ついでに確認画面もつけちゃえ

株式会社オルタさんが出してくれてるライブラリ使えば簡単にできちゃいます(ノ´∀`*)

参考 http://aulta.jp/library/wordpress/contactForm7Confirm.html

STEP1. 下記読み込ませる

contact-form7-confirm.css
contact-form7-confirm.js

STEP2. 下記修正する

contact-form7-confirm.js を開いて、最初の方にある「’path’ : 」の値を確認画面付けたいフォームのパスに変えます。

例) ’path’ : [‘/contact/’],
複数例) ‘path’ : [‘/contact/’,’/order/’],

STEP3. Contact Form 7 に反映させる

送信ボタンに指定クラス「submit-button」をつける

例)

<p class="submit-button">[submit "送信"]</p>

 これも超簡単(ノ´∀`*)ありがとうございますw

以上でOKです(/・ω・)/<フリーなのにスバラシー!ありがたいー!