Kakunin Modal for Contact Form 7
v0.9.0プラグイン名を「Kakunin Modal for Contact Form 7」に変更

Contact Form 7 に、確認画面モーダルを追加。

Kakunin Modal for Contact Form 7 は、Contact Form 7（CF7）のフォームに送信前の確認画面（モーダル）を追加する、無料の WordPress プラグインです。

サーバー通信ゼロ。送信は CF7 公式 API をそのまま使用。

ダウンロード導入手順
ライセンス
GPLv2+
対応PHP
7.4+
バージョン
v0.9.0

入力内容の確認

会社名 株式会社サンプル
ご担当者名 山田 太郎
部署・役職 マーケティング部 課長
電話番号 03-1234-5678
メールアドレス t.yamada@example.co.jp
お問い合わせ種別 お見積もり依頼
ご予算規模 50万円〜100万円
ご検討時期 1ヶ月以内
お問い合わせ内容 ECサイトのリニューアルを検討しております。 商品数は約300点で、現在は他社CMSで運用中です。 詳しくお話を伺いたく、ご連絡いたしました。
戻る送信する
PREVIEW実際にユーザーへ表示される確認画面モーダル
FEATURES

機能の全体像。

誤送信はサポートコストを増やし、フォームの信頼を下げる。
確認ステップを1枚挟むだけで、送信の精度とユーザーの安心が変わる。

CONFIRM

送信前の確認画面モーダル

クリック1回でユーザーに入力内容を見せられる。入力ミスや誤送信を減らし、サポートコストを下げる。

  • 表形式で整然と表示
  • 長文も縦スクロールで省略なし
  • 狭い画面ではラベルと内容を縦並びに切替可能
LABEL

data-label でラベル制御

祖先要素に1行足すだけ。フォーム上の見た目と、モーダル上の文言を別々にコントロールできる。

  • 必須マークの混入を防止
  • 装飾はsuffixで分離
  • 5パターンの自動フォールバック
VALIDATE

リアルタイムバリデーション

必須項目が埋まるまで送信ボタンは無効。CF7 Conditional Fields の非表示グループも自動で除外。

  • MutationObserverで条件監視
  • acceptanceフィールド対応
  • data-cf7-match で一致検証
PER-FORM

フォーム単位の設定

1つのページに複数フォームを置いても、それぞれ独立して有効/無効・タイトル・色を切り替えられる。

REDIRECT

送信成功時のリダイレクト

wpcf7mailsent を捕まえ、相対パス・絶対URLの両方に対応。エラー時はリダイレクトせずエラーを表示。

CLIENT-ONLY

サーバー通信なし、依存なし

プラグイン本体はサーバーと通信しない。送信や検証はすべてCF7本体に委ね、フロントだけで動作する。

  • admin-ajax / REST エンドポイント未登録
  • 送信は wpcf7.submit() でCF7に委譲
  • jQuery不要・Vanilla JSと単一PHPファイル
SCREENSHOTS

スクリーンショット

Kakunin Modal for Contact Form 7 の主要画面のスクリーンショットを掲載しています。クリックで拡大できます。

INSTALL

Contact Form 7 に確認画面を5分で追加。

既存のContact Form 7のフォームに、特別な書き換えは不要。
プラグインを入れて有効化するだけで動く。

  1. STEP01

    プラグインをダウンロード

    ダウンロードページから最新版のZIPを取得する。

  2. STEP02

    WordPress管理画面からアップロードして有効化

    WordPress 管理画面の「プラグイン → 新規追加 → プラグインのアップロード」からZIPをアップロードし、続けて「Kakunin Modal for Contact Form 7」を有効化する。Contact Form 7 本体が先に有効である必要がある。

  3. STEP03

    フォームごとに有効化

    「設定」→「Kakunin Modal for Contact Form 7」を開き、対象フォームのアコーディオンで「このフォームで確認画面モーダルを表示する」をON。

  4. STEP04

    CF7の自動整形を無効化（推奨）

    wpcf7_autop を切ることで、より正確なHTML構造が保たれラベル取得が安定する。

    functions.php 
    // Contact Form 7 の自動 <p> / <br> 挿入を無効化
add_filter( 'wpcf7_autop_or_not', '__return_false' );
CONFIGURATION

フォーム単位で、設定可能。

管理画面の「設定 → Kakunin Modal for Contact Form 7」を開くと、 フォームごとにアコーディオンが並ぶ。文言・色・リダイレクト先まで、すべてフォーム単体で設定できる。

同一ページに複数のフォームがあっても、それぞれ独立して動作する。例：問い合わせフォームは確認画面モーダルON、 ニュースレターはOFF、といった使い分けが可能。

確認画面モーダルの表示

項目 デフォルト値
確認画面モーダルの有効化
このフォームで確認画面モーダルを表示するか
デフォルト
OFF
未入力項目の表示
空欄の項目も確認画面モーダルに含めるか
デフォルト
OFF
未入力時の表示テキスト
未入力項目を表示する際のプレースホルダー
デフォルト
（未入力）

モーダルの文言

項目 デフォルト値
モーダルタイトル
確認画面モーダルの上部に表示されるタイトル
デフォルト
入力内容の確認
戻るボタンのテキスト
モーダルを閉じてフォームに戻るためのボタン文言
デフォルト
戻る
送信ボタンのテキスト
モーダル内の最終送信ボタンの文言
デフォルト
送信する

見た目とレイアウト

項目 デフォルト値
プライマリカラー
モーダル内の送信ボタンの背景色
デフォルト
#0d6efd
スマホ表示の縦並び
狭い画面で見出しと内容を縦並びに切り替える
デフォルト
ON
縦並びのブレイクポイント
縦並びに切り替える画面幅の上限（px）
デフォルト
576px

送信完了後の振る舞い

項目 デフォルト値
リダイレクトURL
送信完了後に遷移するURL。空欄なら完了メッセージを表示
デフォルト
（空欄）
HTML PATTERNS

既存のフォームに、
ほぼ書き換えなしで馴染む。

プラグインはdata-label→label[for]→親要素内のlabel→…の順でラベルを自動取得。

data-label 
<table>
  <tr data-label="お名前">
    <th>
      <label for="your-name">
        お名前<span class="required">*</span>
      </label>
    </th>
    <td>[text* your-name id:your-name]</td>
  </tr>
</table>
MODAL OUTPUT

data-label

祖先要素に data-label を付与する最優先パターン。フォーム上とモーダル上の文言を別々に制御できる。

確認画面モーダル内の表示
お名前山田 太郎
DATA ATTRIBUTES

5つのdata属性で、モーダルを思いどおりに。

すべて任意の属性。指定しなくても自動推測で動作。
必要なところだけ書き、必要なときだけ細かく制御しましょう。

data-label

モーダルに表示するラベルを明示的に指定する

祖先要素に付与すると、その値がそのままモーダルのラベルになる。フォーム上の <label> はそのまま残してよく、モーダル側だけ別の文言にしたいときに使う。

ラベル制御
設定する場所
フィールドの祖先要素（<tr> / <div> / <p> など）
値の型
プレーンテキスト
エスケープ
される
HTML
data-label 
<table>
  <tr data-label="お名前">
    <th>
      <label for="your-name">
        氏名（フルネーム）<span class="required">*</span>
      </label>
    </th>
    <td>[text* your-name id:your-name]</td>
  </tr>
</table>
モーダル内BEFORE（属性なし）
氏名（フルネーム）*山田 太郎
モーダル内AFTER（属性あり）
お名前山田 太郎
  • 他のすべてのラベル取得方法より最優先で使用される
  • HTMLエスケープされるため < や & を含めても安全
data-label-suffix

ラベル末尾に HTML として装飾要素を差し込む

モーダル側だけに必須バッジなどの装飾を加えたいときに使う。値は HTML として解釈される。エスケープされないので、ユーザー入力を渡してはいけない。

装飾
設定する場所
フィールドの祖先要素（data-label と同じ場所）
値の型
HTML文字列
エスケープ
されない（HTML として挿入）
HTML
data-label-suffix 
<tr
  data-label="メールアドレス"
  data-label-suffix='<span class="cf7-confirm-required">必須</span>'
>
  <th>
    <label for="your-email">
      メールアドレス<span class="ml-1 text-red-500">※</span>
    </label>
  </th>
  <td>[email* your-email id:your-email]</td>
</tr>
モーダル内BEFORE（属性なし）
メールアドレスtaro@example.com
モーダル内AFTER（属性あり）
メールアドレス必須taro@example.com
  • data-label と独立して動作する
  • 値の中で改行しないこと（CF7の autop で意図しない変換が起きる）
data-label-required

ラベル取得時にこの要素を除外する（必須マーク等の混入防止）

<label> 内の「必須」「*」などをラベルテキストから取り除きたいときに付ける。フォーム上の見た目には影響しない。span class="required" は後方互換で自動除外。

除外
設定する場所
<label> 内の除外したい要素（<span> 等）
値の型
値不要
エスケープ
—
HTML
data-label-required 
<th>
  <label for="your-phone">
    電話番号<span data-label-required>必須</span>
  </label>
</th>
<td>[tel* your-phone id:your-phone]</td>
モーダル内BEFORE（属性なし）
電話番号必須090-1234-5678
モーダル内AFTER（属性あり）
電話番号090-1234-5678
data-cf7-match

別フィールドと値の一致を blur 時に検証する

パスワード確認・メールアドレス再入力などで、対象フィールドと同じ値かを検証する。CF7 標準と同形式の wpcf7-not-valid-tip がフィールド直下に挿入される。一致するまで送信ボタンも非活性。

バリデーション
設定する場所
確認用フィールドの祖先要素
値の型
対象フィールドの name
エスケープ
される
HTML
data-cf7-match 
<tr>
  <th><label for="email">メールアドレス</label></th>
  <td>[email* email id:email]</td>
</tr>
<tr data-cf7-match="email">
  <th><label for="email-confirm">メールアドレス（確認用）</label></th>
  <td>[email* email-confirm id:email-confirm]</td>
</tr>
フォーム上エラー表示
メールアドレス（確認用）
taru@example.com
入力内容が一致しません。
  • 入力中（input/change）は新規エラーを出さず、blur 時のみ検証
  • 対象フィールド側の blur でも再チェック
  • 送信時にも保険として再検証
data-cf7-match-message

data-cf7-match のエラーメッセージを上書きする

省略時は「入力内容が一致しません。」と表示される。フィールドごとに文言を変えたいときに併用する。

バリデーション
設定する場所
data-cf7-match と同じ要素
値の型
プレーンテキスト
エスケープ
される
HTML
data-cf7-match-message 
<tr
  data-cf7-match="email"
  data-cf7-match-message="メールアドレスが一致しません。"
>
  <th><label for="email-confirm">メールアドレス（確認）</label></th>
  <td>[email* email-confirm id:email-confirm]</td>
</tr>
フォーム上エラー表示
メールアドレス（確認）
taru@example.com
メールアドレスが一致しません。
FLOW

Contact Form 7 のフローに、
確認画面を1ステップだけ差し込む。

送信処理は Contact Form 7 の公式APIに委譲する。
Ajax・サーバー側バリデーション・成功/失敗ハンドリングはすべてCF7のまま。

  1. 01

    送信ボタンクリック

    CF7のイベントよりも先にキャプチャフェーズで処理。必須フィールド・acceptanceの空チェック。

  2. 02

    バリデーション分岐

    NGならCF7にそのまま送り、通常のエラーメッセージを表示。OKなら確認画面モーダルを開く。

  3. 03

    ユーザーが確認

    表形式で入力内容を確認。改行や複数選択肢も整形して表示される。

  4. 04

    モーダルで送信

    wpcf7.submit(form) で公式API経由で送信。CF7のAjaxフローに完全に乗る。

  5. 05

    結果に応じて分岐

    成功 → リダイレクトまたは完了メッセージ。エラー（invalid / spam / mailfailed）→ モーダルを閉じてエラー表示。

FAQ

よくある質問

  • いいえ。Contact Form 7 本体には送信前の確認画面（確認モーダル）機能は搭載されていません。確認画面を追加するには、本プラグインのようなアドオンを利用する必要があります。

導入サポートもしています。

  • Contact Form 7 と Confirm Modal の導入
  • フォームに合わせた設定
  • モーダルのデザイン変更
  • プラグイン本体のカスタマイズ
  • 本番反映と動作確認
設置代行を相談する

※ 相談と見積もりは無料です

※ 株式会社ノーブルウェブが対応します