説明
「Kakunin」(確認) は「confirmation」を意味する日本語です。
このプラグインは、Contact Form 7 で作成したフォームに確認ステップを追加します。訪問者が送信ボタンを押すと、入力された内容がモーダルウィンドウに一覧表示されます。訪問者が内容を確認してはじめてフォームが送信されるため、メールアドレスの入力ミスや誤送信を防ぐのに役立ちます。
このプラグイン自体は送信処理を行いません。送信は Contact Form 7 (wpcf7.submit()) に委ねられ、プラグイン独自の admin-ajax や REST エンドポイントは登録しません。
機能
- 入力内容をテーブルで一覧表示する確認画面モーダル。長い値は切り捨てられず、スクロールで表示されます。
- フォームごとの設定。フォーム単位でモーダルの有効・無効を切り替え、モーダルタイトル・ボタンのテキスト・プライマリカラーを個別に設定できます。
data-labelによるラベル制御。祖先要素にdata-label属性を追加してモーダルに表示するラベルを指定でき、data-label-suffixで「必須」バッジのような装飾 HTML を付け加えられます。- リアルタイムバリデーション。必須項目がすべて入力されるまで送信ボタンは無効のままです。変更は MutationObserver で追跡され、
acceptanceフィールドにも対応しています。 data-cf7-matchによるフィールド一致バリデーション。「メールアドレス (確認用)」のようなフィールドに便利です。- Contact Form 7 Conditional Fields プラグインに対応。
.wpcf7cf-hiddenが付いたグループ内のフィールドは、バリデーション・送信ボタンの状態・モーダルから除外されます。 - 狭い画面での縦並びレイアウト (任意)。ブレイクポイントはフォームごとに設定できます。
- 送信完了後のリダイレクトをフォームごとに設定可能 (任意)。相対パスと絶対 URL の両方を指定できます。エラー時にはリダイレクトしないため、Contact Form 7 のエラーメッセージはそのまま表示されます。
- 外部サービスは不使用。データをどこにも送信せず、サードパーティのサーバーから何も読み込まず、フロントエンドでは jQuery を使用しません。
動作要件
- WordPress 5.0 以上
- PHP 7.4 以上
- Contact Form 7
注意事項
確認画面は日本のウェブサイトで一般的な慣習であるため、管理画面とモーダルのデフォルト文言は日本語で書かれています。モーダルに表示される文言はすべて設定画面から変更できます。
このプラグインは Contact Form 7 の作者とは無関係であり、承認を受けたものでもありません。
プライバシー
このプラグインは設定を WordPress のオプションテーブルにのみ保存します。個人データの収集、Cookie の設定、外部サーバーへのリクエストは一切行いません。
スクリーンショット
インストール
- 先に Contact Form 7 をインストールして有効化してください。Contact Form 7 がないと、このプラグインは有効化できません。
- 「プラグイン」>「新規追加」>「プラグインのアップロード」からアップロードするか、WordPress プラグインディレクトリからインストールします。
- プラグインを有効化します。
- 「設定」>「Kakunin Modal for Contact Form 7」に移動し、使用するフォームのセクションを開きます。
- 「このフォームで確認画面モーダルを表示する」にチェックを入れて保存します。モーダルはすべてのフォームで初期状態では無効です。
FAQ
-
既存の Contact Form 7 フォームを書き直す必要がありますか ?
-
いいえ。標準的な書き方のフォームはそのまま動作します。ラベルが期待どおりに取得されない場合にのみ、フィールドの祖先要素に
data-label属性を追加してください。 -
1つのページに複数の Contact Form 7 フォームを設置できますか ?
-
はい。ページ内の各フォームにそれぞれ独立したモーダルのインスタンスが作られ、フォームごとにモーダルの有効・無効を切り替えられます。
-
Conditional Fields プラグインに対応していますか ?
-
はい。
.wpcf7cf-hiddenクラスが付いたグループ内のフィールドは、バリデーション・送信ボタンの状態・モーダルのいずれからも除外されます。グループは MutationObserver で監視しているため、条件の切り替えは即座に反映されます。 -
モーダル内のラベルに必須マーク「*」が表示されます。削除するにはどうすればよいですか ?
-
マークを囲む要素に
data-label-required属性を追加してください。ラベルの取得時にその部分が取り除かれます。後方互換のため、class="required"を持つspanも取り除かれます。文言を完全に制御したい場合は、祖先要素にdata-labelを設定してください。 -
このプラグインに jQuery は必要ですか ?
-
いいえ。フロントエンドのコードは素の JavaScript です。jQuery を使用するのは管理画面のプラグイン設定画面のみで、そこでは元々 WordPress が jQuery を読み込んでいます。
-
モーダルのデザインを変更するにはどうすればよいですか ?
-
マークアップには
.cf7-confirm-modal__headerのような BEM 形式のクラス名を使用し、色は--cf7-confirm-modal-primary-colorのような CSS カスタムプロパティで設定しています。テーマまたは子テーマで上書きしてください。送信ボタンのプライマリカラーは設定画面からも選択できます。 -
設定はどこに保存されますか ?
-
wp_optionsテーブル内の4つのオプション (cf7_confirm_redirect_urls、cf7_confirm_show_empty_fields、cf7_confirm_empty_text、cf7_confirm_form_settings) に保存されます。プラグインを削除すると、これらも削除されます。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
0.9.1
- 必須のチェックボックス (
[checkbox*]) があるフォームで送信ボタンが無効のままになる問題を修正しました。Contact Form 7 は必須クラスを選択肢を囲む要素に付けるため、その要素の中に選択済みの項目があるかを確認するようにしました。 - モーダルに表示するチェックボックスの値を、固定の文言「チェック済み」ではなく、選択した各項目の文言にしました。ラジオボタンの値も同じ方法で文言を取得します。
0.9.0
- プラグイン名を「Kakunin Modal for Contact Form 7」に、スラッグを「kakunin-modal-for-contact-form-7」に変更。オプション名は変わらないため、設定は保持されます。
- 同梱していた日本語翻訳ファイルを削除。翻訳は translate.wordpress.org で管理するようになりました。
- WordPress.org でホストされるプラグインには不要な load_plugin_textdomain() の呼び出しを削除。
- フォームごとのリダイレクト設定のサニタイズを強化。「//example.com」のようなプロトコル相対パスは拒否され、絶対 URL は http と https に限定されます。
0.8.0
- WordPress プラグインディレクトリ向けにプラグイン名を「Confirm Modal for Contact Form 7」に変更。オプション名は変わらないため、設定は保持されます。
- 「Requires Plugins: contact-form-7」ヘッダーを追加し、WordPress 6.5 以降が Contact Form 7 への依存関係を扱えるように変更。
- プラグイン削除時にオプションを削除する uninstall.php を追加。
- 管理画面のスタイルとスクリプト、フロントエンドの設定データをインラインタグからエンキューされるファイルに移動。
- Contact Form 7 が存在しない場合にフロントエンドで致命的なエラーが発生しうる問題を修正。
- プラグイン一覧画面の設定リンクをエスケープし、テキストドメインを統一。
- フィールド一致バリデーションのエラーメッセージが、Contact Form 7 標準のエラー表示のスタイルを上書きしないように修正。
0.7.0
- 狭い画面で確認テーブルを縦並びにするフォームごとのオプションを追加 (デフォルトはオン)。
- 縦並びレイアウト用のブレイクポイント (px) をフォームごとに設定できるように変更。
- 設定画面を4つのセクションに整理。
0.6.0
data-cf7-match属性によるフィールド一致バリデーションを追加。
0.5.1
- 「確認画面モーダルを表示する」のデフォルトをオフに変更。
0.5.0
- 確認画面モーダルの有効・無効を切り替えるフォームごとのオプションを追加。
- 同一ページ内の複数の Contact Form 7 フォームに対応。
- モーダルのラベルを装飾するための
data-label-suffix属性を追加。 - ラベルの取得処理を作り直し、ラベルテキストのエスケープを統一。
0.4.1
- Contact Form 7 Conditional Fields プラグイン併用時の挙動を修正。
0.4.0
data-label属性によるラベル制御を追加。
0.3.0
- 必須項目のバリデーションを追加。
- 必須項目が入力されるまで送信ボタンを無効化するように変更。
0.2.2
- デフォルトのプライマリカラーを #00a968 から #0d6efd に変更。
0.2.1
- 設定画面の項目の並び順を変更。
0.2.0
- フォームごとの設定を追加。
- 必須マークを除外するための
data-label-required属性を追加。 - textarea の値の改行をモーダル内でも保持するように変更。
- 設定画面を改善。
0.1.0
- 最初のリリース。