Contact Form 7 v1.0.0

CF7 Confirm Plus UI Helper

Contact Form 7 と Confirm Plus Contact Form 7 を使ったフォームに対して、確認画面のスタイル調整・入力補助 UI・フリガナ自動入力などを管理画面から一括設定できる UI ヘルパープラグインです。バリデーションルールやメールテンプレートの追加は行いません。

ダウンロード (zip) WP 6.0以上 / PHP 7.4以上
要: Contact Form 7
任意: Confirm Plus CF7

このプラグインを作った経緯

Contact Form 7 と Confirm Plus Contact Form 7 を組み合わせると確認画面付きのフォームが作れますが、スタイリングやフリガナ自動入力の実装を毎回手書きするのが面倒でした。確認画面のレイアウト調整・必須バッジ・ボタン文言……繰り返し書くには量が多すぎます。

このプラグインと CF7 入力チェックマネージャーの2つを入れることで、バリデーション設定から確認画面のデザインまで管理画面から一括管理できます。CF7 + Confirm Plus を使ったフォーム制作がだいぶ楽になります。さらに CF7 フォームビルダーでコードを生成してから貼り付ければ、フォーム構築の最初から最後までスムーズに進められます。

主な機能

🎨

確認画面のスタイリング Confirm Plus Contact Form 7 の確認画面を自然なレイアウトで表示します。確認画面表示中は元の入力フォームを自動的に非表示にします。

📐

デザイン詳細設定 フォーム最大幅・項目名幅・角丸・ボタン角丸・線の太さ・色・影の有無などを管理画面から数値で調整できます。

🎯

対象フォームをクラス名で指定 スタイルを適用したいフォームの囲み要素にクラス名を付与し、そのクラス名を管理画面で指定することで対象を絞り込めます。

🔴

必須バッジのカスタマイズ 「必須」バッジの表示 ON/OFF・文言・色を管理画面から変更できます。

🔤

ボタン文言のカスタマイズ 入力画面・確認画面それぞれのボタン（「確認する」「送信する」「戻る」など）の文言を管理画面から変更できます。

✍️

フリガナ自動入力 氏名フィールドとフリガナフィールドのペアを指定すると、氏名入力時に自動でフリガナ欄へ変換・入力されます。複数ペア対応。

💾

設定のエクスポート / インポート 設定内容を JSON 形式でエクスポート・インポートできます。同じ設定を複数サイトに適用する場合に便利です。

👁️

文言プレビュー 管理画面でボタン文言や必須バッジの文言を変更した際、保存前に簡易プレビューで確認できます。

設定できる項目

管理画面 → 設定 → CF7 Confirm UI から設定します。

フォーム最大幅

項目名幅

確認画面の角丸

ボタンの角丸（プリセット or カスタム）

ボタンの線の太さ・線色

本文色・項目名色

背景色

ボタン色（送信ボタンのみ別色設定も可）

影の有無

適用クラス名

必須バッジ（表示・文言・色）

入力画面・確認画面のボタン文言

フリガナ自動入力のフィールドペア

設定 JSON エクスポート / インポート

フリガナペアの記述例：
last-name:last-kana
first-name:first-kana
各行に「氏名フィールド名:フリガナフィールド名」の形式で指定します。

インストール方法

ZIP をダウンロード 上部のダウンロードボタンから cf7-confirm-plus-ui-helper-1.0.0.zip を取得します。

WordPress にアップロード・有効化 管理画面 → プラグイン → 新規追加 → プラグインのアップロードから ZIP をアップロードして有効化します。Contact Form 7 が未インストールの場合は有効化できません。

設定画面を開く 管理画面 → 設定 → CF7 Confirm UI を開きます。

適用クラス名を設定 スタイルを適用したいフォームの囲み要素（例: <div class="contact-wrap">）のクラス名を設定します。

デザインを調整して保存 色・幅・角丸などを調整し、設定を保存します。変更はフロントエンドに即座に反映されます。

動作要件

WordPress 6.0 以上
PHP 7.4 以上
Contact Form 7（必須・未インストールの場合は有効化不可）
Confirm Plus Contact Form 7（任意・確認画面スタイル機能を使う場合に必要）

必須任意

変更履歴

v1.0.02026年4月

初回リリース
確認画面スタイリング・入力画面スタイリング機能を実装
フリガナ自動入力機能を追加
設定 JSON エクスポート / インポートを実装
管理画面での文言プレビュー機能を追加