kdcsライブラリー

contact form 7はサンクスページが無く、同じURLで送信完了となるためグーグルアナリティクスのコンバージョン設定が簡単にできなかった。
contact form7は最近のバージョンアップで、サンクスページが無くてもコンバージョンが計測できるようにイベントタグを公開した。これはGA4に対応したもので、従来のユニバーサルアナリティクスには非対応と思われる。

function.phpに記述

add_filter( 'wp_footer', function() {
  if ( is_page('contact')) {
  ?>
  <script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    gtag('event', 'Submit', {
      'event_category' : 'Form',
      'event_label' : 'contact'
    });
  }, false );
  </script>
  <?php
  }
} );

is_pageで指定したページのwp_footerでgtagが出力されるようになっている。
イベント名：Submit
イベントカテゴリー：Form
イベントラベル：contact

名前は自由っぽい

後はGA4側でイベントの設定を行う
GA4→設定→イベント→イベントを作成→作成（カスタムイベント）
上記のgtag設定より、カスタムイベント名（任意）を入力し、event_nameに「Submit」を入力
多分これだけでよい。反映に時間がかかる（一晩くらい）

設定が反映されるとイベントリストに表示されるので「コンバージョンとしてマークを付ける」をオンにする

GA4→設定→コンバージョン
設定が反映されるとコンバージョンイベントリストに表示されるので「コンバージョンとしてマークを付ける」をオンにする

Contact Form7のメールフォームを個別記事ページに掲載して記事タイトルを送信データに付加させたい場合、
[_post_title]というコードがあるが、カスタム投稿タイプでは使用できない。

カスタム投稿タイプでタイトルを付加させる方法
※コードは「post_title」

function.phpに以下記述

/* ---------------------------------------------------------------------------------------
   ◆◆◆ contactform7（個別記事用フォーム）にカスタム投稿タイプのタイトルを挿入する######
------------------------------------------------------------------------------------------*/
function set_post_title_to_cf7_tag( $tag ){
    if ( ! is_array( $tag ) ){
        return $tag;    
    }
 
    $name = $tag['name'];
    if( $name == 'post_title' ){
        $res_get_the_title = get_the_title();
        $tag['values'] = (array)$res_get_the_title;
    }
    return $tag;
}
add_filter( 'wpcf7_form_tag', 'set_post_title_to_cf7_tag', 11 );

Contact Form7の編集ページ、フォームに以下記述
非表示にする場合、hiddenを入れる

<p>[hidden post_title]</p>

Contact Form7の編集ページ、メールに「post_title」を記述する

メールフォームの送信ボタンをクリックした時、正常に送信されたら送信完了ページを表示したい場合

function.phpに記述する方法

$contact = 'contact';
$thanks = 'thanks';

//お問い合わせフォームの送信後にサンクスページへ飛ばす
add_action( 'wp_footer', 'redirect_thanks_page' );
function redirect_thanks_page() {
  global $contact;
  global $thanks;

  if( is_page($contact)  ) {
  ?>
  <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = '<?php echo home_url('/'.$thanks); ?>'; // 遷移先のURL
    }, false );
  </script>
  <?php }
}

html内に記述する方法

<script>document.addEventListener('wpcf7mailsent',function(event){ location='//example.com/thanks/'; },false);</script>

Contact Form 7の入力フォームで郵便番号から住所を自動入力させる方法

function.phpに記述する方法は「wp_enqueue_script」がエラーになるので
header.phpのhead内に記述

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

コンタクトフォームを固定ページに貼り付けるコードに「html_class=”h-adr”」を付ける
※ idの数字はその時々で違うのでセッティング時にコピペする

[contact-form-7 id="xxxx" title="お問い合わせフォーム" html_class="h-adr"]

コンタクトフォームの入力フォーム例

<label> 郵便番号
    [text your-zip-code class:p-postal-code] 例）107-0052</label>
<label> ご住所（都道府県・市区町村）
    [text your-address class:p-region class:p-locality class:p-street-address] </label>
<label> 番地・建物名など
    [text your-address2 class:p-extended-address] </label>

郵便番号を3桁と4桁に分ける場合

〒[text your-zip-code class:p-postal-code maxlength:3] - [text your-zip-code2 class:p-postal-code maxlength:4]

日本語で入力しないとエラーになる海外からのスパムメール対策

function.phpに記述する
下記の例はタイトル（your-subject）に日本語が含まれない場合にエラーとする

function wpcf7_validate_spam_message( $result, $tag ) {
  $value = str_replace(array(PHP_EOL,' '), '', esc_attr($_POST['your-subject']));
  if (!empty($value)) {
    if (preg_match('/^[!-~]+$/', $value)) {
      $result['valid'] = false;
      $result['reason'] = array('your-subject' => '日本語で入力してください');
    }
  }
  return $result;
}
add_filter( 'wpcf7_validate', 'wpcf7_validate_spam_message', 10, 2 );