フロントエンドでなんとかがんばっていくブログ

WordPress【Contact Form 7】投稿情報をフォームのvalueに設定する

2021/01/24

固定ページではなく個別投稿ページにContactForm7を設置する場合、ページごとに異なる投稿情報をフォーム送信させたい場合があります。

フォームを編集する

まずはContactForm7のフォームの編集です。
ショートコードに default:shortcode_attr オプションを追記します。

[text* txt-hoge]

[test* txt-hoge default:shortcode_attr]

hidden属性で設定しておくことも可能です。

[hidden txt-hoge default:shortcode_attr]


ショートコードを編集する

次に、テンプレ側に記載するショートコードに追加する属性値を追記します。

[contact-form-7 id="123" title="Contact Form"]

[contact-form-7 id="123" title="Contact Form" txt-hoge="fugafuga"]


function.php を編集する

追加した属性値を使用出来るようにするために、function.php に下記記載を追加します。

add_filter( 'shortcode_atts_wpcf7', 'custom_shortcode_atts_wpcf7_filter', 10, 3 );
  function custom_shortcode_atts_wpcf7_filter( $out, $pairs, $atts ) {
  $my_attr = 'txt-hoge';
  if ( isset( $atts[$my_attr] ) ) {
    $out[$my_attr] = $atts[$my_attr];
  }
  return $out;
}


追加したい属性値が複数ある場合は、foreach で簡潔に書けます。

add_filter( 'shortcode_atts_wpcf7', 'custom_shortcode_atts_wpcf7_filter', 10, 3 );
function custom_shortcode_atts_wpcf7_filter( $out, $pairs, $atts ) {
  $my_attrs = array('txt-hoge', 'email-hoge');
  foreach ( $my_attrs as $my_attr ) {
    if ( isset( $atts[$my_attr] ) ) {
      $out[$my_attr] = $atts[$my_attr];
    }
  }
  return $out;
}


投稿情報を設定するには

ショートコードに直接、直接取得した投稿情報を設定すればよいです。
テンプレートファイルに直接ショートコードを貼り付ける場合は、do_shortcode を使用します。

<?php echo do_shortcode('[contact-form-7 id="805" title="ホワイトペーパーフォーム" txt-hoge="'. get_the_title() .'"'); ?>


まとめ

・フォームの編集
・ショートコードの編集
・function.php の編集
・do_shortcode で貼り付けたショートコードに投稿情報を設定する