WordPressのContact Form 7のフォームに自動で記事のタイトルを設定する方法

はじめに

実務経験であった案件の指示書の中に記事の個別ページで使用するお問い合わせフォームに記事のタイトルを自動で反映させるという内容があったので紹介します。

実装環境

WordPress バージョン6.3 カスタムテーマ

使用プラグイン Contactform7 バージョン 5.8

自動的に記事のタイトルをフォームに設定する方法

1.Contact Form 7プラグインのインストールと有効化

ダッシュボードから「プラグイン」を選択し、「新規追加」をクリック。

「Contact Form 7」を検索し、インストールと有効化を行います。

2.フォームの作成

Contact Form 7メニューから「新規追加」を選択。

必要なフィールドを追加し、フォームの基本設定を行います。

3.記事のタイトルフィールドを追加

フォームエディタ内で、記事のタイトルを受け取るためのフィールドを追加します。

通常は「テキスト」フィールドを使用し、記事タイトルを表示させる部分で下記を追加します。

変更ができないようにreadonlyを加えています。

[text post_title readonly]

4.functions.phpファイルへのコード追加

function auto_title_form( $tag ) {
  // *1
  if ( ! is_array( $tag ) ) {
      return $tag;    
  }

  // *2
  $name = $tag['name'];
  if ( $name == 'post_title' ) {
      $auto_post_title = get_the_title();
      // *3
      $tag['values'] = (array) $auto_post_title;
  }
  return $tag;
}
add_filter( 'wpcf7_form_tag', 'auto_title_form', 11 );

*1

今回$tagは配列であるため!is_array($tag)で$tagが配列でなかったときは$tagの値をそのまま返し、特別な処理や変更がされないようにしています。セキュリティ的に意味がある記述です。

*2

配列$tagからフォームタグの名前に指定した値(name属性)を取得
*3
(array)でキャストしておかないとエラーが出る
テーマのfunctions.phpにコードを追加することを必要とします。コードを追加する前に、バックアップを取ることをおすすめします。また、正常に動作することを確認するために事前にテスト環境で試すことをお勧めします。

5.実装できているか確認

フォームを保存し、記事のタイトルがフォームに自動的に表示されるか確認してください。

下記のように自動で記事のタイトルがフォームに設定されるはずです。

    プラン名必須

    お名前必須

    メールアドレス必須

    お電話番号必須

    お問い合わせ内容

    まとめ

    上記で紹介した方法を使用することで、Contact Form 7プラグインを使ったフォームに、自動で記事のタイトルが表示されるようになります。実務経験であった案件の紹介ではありましたが、ユーザーが記事のタイトルを手動で入力する手間を省くことができるのは、ユーザーエクスペリエンスを向上させることに繋がります。

    他のフォーム関係の記事

    関連記事

    国際番号つきのお問い合わせフォームのサンプルです。クライアント様からの直接依頼で作成をしました。#お問い合わせフォームの国際対応

    >お問い合わせはこちら

    お問い合わせはこちら