2025.06.01 / 最終更新日時 : 2025.06.06 石井よしまさ WordPress

【Contact Form 7】プライバシーポリシーページを埋め込む方法

「プライバシーポリシーに同意してください」と書いてあるけど、
リンクをクリックすると別ページに飛ばされて、戻ってきたときには入力内容が消えていた……。
そんな経験、ありませんか？

そこで本記事では、Lightningテーマの子テーマ環境で、Contact Form 7（CF7）のフォーム内に、プライバシーポリシーページの一部をそのまま埋め込んで表示する実装方法をご紹介します。

Contact Form7で作ったフォームにプライバシーポリシーページを埋め込み表示した完成イメージ

上記が完成イメージになります。

今回はLightningテーマのフォームデザインに沿った表示例として作成しています。
スクロール可能なボックス内にプライバシーポリシーページの内容がが表示され、下に同意チェックボックスがあります。

1 前提条件
- 1.1 デザインテーマLightningを使用
- 1.2 プライバシーポリシーページを事前に作成する
2 実装手順
3 まとめ

前提条件

デザインテーマLightningを使用

今回は、例としてLightningテーマの子テーマ環境を使用していますが、
デザインテーマは自身のテーマのものを使用してください。
もし同じLightningの子テーマで作成する場合は、以下の記事で子テーマのインストール方法まで解説しています。

【Lightning】無料版でヘッダー上部機能を追加する方法

プライバシーポリシーページを事前に作成する

プライバシーポリシーページが既に存在しており、表示したい範囲をform-display-targetで囲っておきます。
今回はWordPressインストール時、初期に入っているブロックエディターで作られたプライバシーポリシーページを使用します。

表示対象の箇所をグループ化

表示対象のブロックを全て選択して、グループ化します。

表示したいブロックを選択し、ブロックの右上にある「︙（オプションメニュー）」をクリックします。
表示されたメニューから「グループ化」を選択することで、複数のブロックを1つのグループにまとめることができます。

グループ化したブロックにclassを付与

グループ化したブロックを選択、右サイドバーの「高度な設定」→追加CSSクラスにform-display-targetを入力します。

ブロックエディターでなくHTMLで書かれたページの場合は、
どのようにすればいいですか？

その場合は、以下のように表示したい部分を
divタグで囲ってclassに

form-display-targetを付与すれば良いです。

<div class="form-display-target">
<h2>個人情報の取得について</h2>
<p>テキストテキストテキストテキスト</p>
</div>

<h2>個人情報の取得について</h2>

<p>テキストテキストテキストテキスト</p>

</div>

実装手順

フォームHTMLの編集（Contact Form 7）

まずは管理画面の外観→お問い合わせから対象のお問い合わせフォームを選択します。

以下のHTMLをフォームタグ内に挿入します。

<label> プライバシーポリシーへの同意</label>
<p class="form__privacy-overview">※以下の弊社のプライバシーポリシーをお読みいただき、同意する場合はチェックをいれてください。</p>
<div id="privacy-policy-box">
<div id="privacy-policy-content">
</div>
</div>
[acceptance privacy class:form__checkbox class:js-privacy-check]同意する[/acceptance]

<label> プライバシーポリシーへの同意</label>

<p class="form__privacy-overview">※以下の弊社のプライバシーポリシーをお読みいただき、同意する場合はチェックをいれてください。</p>

</div>

[acceptance privacy class:form__checkbox class:js-privacy-check]同意する[/acceptance]

JavaScriptを追加

次にプライバシーポリシーページの内容を読み込むための処理を記載したプログラムを作成します。

jsファイルの配置場所は、Lightningの子テーマを使用した場合の例になります。

ファイルパス例：/wp-content/themes/lightning-child/assets/js/script.js

jQuery(function ($) {
var privacyPolicyUrl = siteData.home_url + '/privacy-policy';
$('#privacy-policy-content').load(privacyPolicyUrl + ' .form-display-target', function (response, status) {
if (status === 'error') {
$('#privacy-policy-content').html('プライバシーポリシーの読み込みに失敗しました');
}
});
});

jQuery(function ($) {

var privacyPolicyUrl = siteData.home_url + '/privacy-policy';

$('#privacy-policy-content').load(privacyPolicyUrl + ' .form-display-target', function (response, status) {

if (status === 'error') {

$('#privacy-policy-content').html('プライバシーポリシーの読み込みに失敗しました');

}

});

siteData.home_url って、もしかしてサイトのトップページのURLでしょうか？

そうです！
次のセクションでも解説しますが、
WordPress側の処理で取得したトップページのURLを取得しています。

つまり、トップページのURL + プライバシーポリシーページのスラッグが繋がって、
全体的なプライバシーポリシーページのURLの文字列が出来上がっているんですね！

プライバシーポリシーページのスラッグは例として

privacy-policyにしているので、ここはご自身で作成されている
プライバシーポリシーページのスラッグに適宜変更してくださいませ。

functions.php にスクリプトを読み込むコードを追加

管理画面の外観→テーマファイルエディターからLightningの子テーマを選択、
右サイトバーの中からfunction.phpを選択します。

選択したファイルの内容のエディター内に以下のコードを追加します。

function my_cf7_policy_scripts() {
// jQuery（Lightningテーマには既に読み込まれているが明示）
wp_enqueue_script('jquery');
// 独自JSを読み込む
wp_enqueue_script('form-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0', true);
// URL変数をJSへ渡す
wp_localize_script('form-script', 'siteData', array(
'home_url' => home_url()
));
}
add_action('wp_enqueue_scripts', 'my_cf7_policy_scripts');

function my_cf7_policy_scripts() {

// jQuery（Lightningテーマには既に読み込まれているが明示）

wp_enqueue_script('jquery');

// 独自JSを読み込む

wp_enqueue_script('form-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0', true);

// URL変数をJSへ渡す

wp_localize_script('form-script', 'siteData', array(

'home_url' => home_url()

));

}

add_action('wp_enqueue_scripts', 'my_cf7_policy_scripts');

この form-script って、自分の作った JS ファイルを読み込んでるってことですか？

そうです！

/assets/js/script.js というパスの JavaScript を読み込んでいます。

wp_localize_script(…)

これは…どういうことですか？

実はこれ、JavaScript側にPHPの変数（今回は home_url）を渡すための仕組みなんですね。

このコードで、js側でsiteData.home_urlをグローバル変数としてJS内で使えるようになります。

なるほどー！
だから先ほどのjs側でトップページのURLを取得できたんですね！

ちなみにform-scriptという部分は「スクリプトハンドル」っていう WordPress 内でスクリプトを識別するための名前なんです。
だから、自分で自由に変えてOK！ たとえば cf7-policy-script とか my-custom-form-js とか、分かりやすい名前にしていいですよ。

では wp_enqueue_script の form-script を

my-form に変えてもいいってことですね！

はい、ただし！
wp_localize_script にも同じハンドル名を指定しないとダメなので、
その場合は、以下のようになります。

wp_enqueue_script('my-form', get_stylesheet_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0', true);
wp_localize_script('my-form', 'siteData', array(
'home_url' => home_url()
));

wp_enqueue_script('my-form', get_stylesheet_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0', true);

wp_localize_script('my-form', 'siteData', array(

'home_url' => home_url()

));

CSSでスタイリングを調整する

最後にプライバシーポリシーを表示するボックスのデザインを調整するため、CSSのコードを追加します。
ここでは子テーマ内のstyle.cssを選択し、以下のコードを追加します。

#privacy-policy-box {
border: 1px solid #ccc;
padding: 20px;
height: 250px;
overflow-y: auto;
margin-bottom: 15px;
}

#privacy-policy-box {

border: 1px solid #ccc;

padding: 20px;

height: 250px;

overflow-y: auto;

margin-bottom: 15px;

}

#privacy-policy-boxのheightの値は、
ボックス内の高さになりますので、
ご自身のサイトに合わせて適宜変更してくださいませ。

まとめ

今回は、Contact Form 7を使ったお問い合わせフォームに、別途作成されたプライバシーポリシーページの内容をそのままボックス内に表示する方法をご紹介しました。

.load()とクラス指定を組み合わせることで、リンクで別ページに遷移せず、フォーム内でそのまま内容を確認できるユーザーに優しいUIが実現できます。

またこの方法は、プライバシーポリシーに限らず、サイト内の任意のページの一部を指定して表示することも可能です。

さらに、表示元のページを直接読み込むため、同じ文章をフォーム用に二重に記述する必要がなく、修正時も元ページだけを直せば反映される点が非常に便利です。

なお、.load()は同一ドメイン内のページにしか対応していないため、外部サイトの読み込みは不可です。

ユーザーにとってわかりやすく、離脱も防げる便利な実装ですので、「別ページに飛ばさずにその場で読ませたい」といったケースにぜひご活用ください！

この記事を書いた人

石井よしまさフリーエンジニア / Webデザイナー / シンガーソングライター

歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。

コーディングで困った時のWeb制作駆け込み寺

☐Webサイトやランディングページ制作中に、うまく表示されなかったり、ページが崩れて困っている方

☐WordPressで表示崩れを修正するよう依頼されたものの、どこを直せばいいか分からず悩んでいる方

☐クライアントからの依頼に対応できるか不安だけど、とりあえず受注したもののサポートが欲しい方

そんなお悩みをお持ちの方に向けて、

「コーディングで困った時のWeb制作駆け込み寺」では、
オンライン（Zoom等）で、お客様の制作中のWebサイトやLPを画面共有しながら、
問題箇所の解決に向けて助言・指導を行っています。

詳しくは以下のページをご覧ください！

詳細を見る

カテゴリー: WordPress

タグ: Comtact Form7 Lightning