Form Plant v1.3 を公開しました — 編集画面の刷新・プレビュー・デザイン調整機能
2026.07.16
はじめに
Form Plant v1.3 を公開しました。今回のアップデートは、フォーム編集画面（管理画面）の使いやすさを大きく見直したリリースです。主な変更点は次の 4 つです。
- フィールド編集画面の刷新：モーダルからアコーディオン形式へ
- プレビュー機能：本番と同じ見た目を管理画面から確認（PC / タブレット / モバイル切替つき）
- デザイン調整機能：CSS を書かずに、色・サイズ・影などを管理画面から調整
- フィールド説明文：各入力項目に説明文を 3 箇所まで表示
v1.3 は後方互換を維持したマイナーバージョンアップです。既存のフォーム定義・ショートコード・保存済みの送信データは、更新後もそのまま動作します。プラグインの更新画面から通常どおり更新するだけで、特別な移行作業は必要ありません。
以下、それぞれの機能を順に紹介します。
1. フィールド編集画面をアコーディオン形式に刷新
これまでの Form Plant では、フィールドの設定を編集するたびにモーダル（ポップアップ）を開く方式でしたが、v1.3 では、アコーディオン形式に変更しました。フィールド一覧の行をクリックするとその場で設定欄が展開され、各項目を編集できます。カスタムフィールド系のプラグインなどで馴染みのある編集スタイルです。
各フィールドの設定項目は、「基本」「バリデーション」「詳細」の 3 つのタブに整理しました。フィールドタイプが増えて設定項目が多様化してきたため、目的の項目を探しやすくすることが狙いです。
- 基本：フィールドラベル、フィールド名、プレースホルダ、必須、タイプ固有の主要設定など
- バリデーション：バリデーションメッセージ、文字数などの入力チェック関連
- 詳細：カスタム ID・カスタムクラス、フィールド説明文（後述）など
あわせて、フィールド一覧の見た目と操作も改善しています。
- フィールドタイプごとのアイコンを、一覧とフィールド追加時の選択画面に表示。どのフィールドが何のタイプか、ひと目で分かるようになりました。
- フィールドの複製ボタンを追加。似た設定のフィールドを作るときに、設定を引き継いだコピーを 1 クリックで作れます。
- 並べ替えは従来どおりドラッグ & ドロップで行えます。アコーディオンの開閉やタブの切り替えはキーボードでも操作できます。
2. プレビュー機能：本番と同じ見た目を管理画面から確認
フォームを編集するとき、「実際のページでどう見えるか」を確認するために、設置先のページを別タブで開いて行き来していた方は多いと思います。v1.3 では、フォーム編集画面に「プレビュー」ボタンを追加しました。
このプレビューは、管理画面の中で簡易的に描画するものではなく、実際にサイトのフロント側で描画したフォームをそのまま表示します。利用中のテーマの CSS、Form Plant のデザインプリセット、フォームごとのカスタム CSS がすべて適用された、本番と同じ見た目で確認できます。
プレビュー画面には、次の機能があります。
- デバイス切替：PC / タブレット / モバイルの表示幅をワンクリックで切り替え。実機と同じようにメディアクエリ（レスポンシブ CSS）が効いた状態を確認できます。
- ズーム：50% 〜 150% の表示倍率を選べます。
- テスト送信しても記録されない：プレビュー内のフォームは入力チェック（バリデーション）や確認画面まで動作しますが、送信してもデータ保存やメール送信は行われません。動作確認で送信データが汚れる心配がありません。
なお、プレビューに反映されるのは保存済みの内容です。編集途中の内容を確認したい場合は、フォームを保存してからプレビューを開いてください。
3. デザイン調整機能：CSS を書かずに色・サイズを調整
v1.3 の目玉のひとつが、このデザイン調整機能です。フォーム編集画面に「デザイン」タブを新設し、これまで CSS を書かないとできなかった見た目の調整を、管理画面の操作だけで行えるようにしました。
調整できる対象は、次の 5 つのセクションに分かれています。
| セクション | 調整できる項目の例 |
|---|---|
| 全体 | フォーム枠（最大幅・背景色・枠線・角丸・影）、項目名（文字色・太さ・背景色）、入力欄（文字色・背景色）、説明文（文字色・文字サイズ） |
| 送信 / 確認ボタン（入力画面） | 文字色・背景色・マウスオーバー時の色・角丸・影・文字サイズ・余白・幅 |
| 確認画面：戻るボタン | 同上（確認画面を使う設定のときに表示） |
| 確認画面：送信ボタン | 同上 |
| エラーメッセージ | 文字色（エラー中の入力欄の枠線色にも適用）・背景色 |
操作面では、次の点を工夫しています。
- 色はカラーピッカー、数値はスライダーで直感的に。 角丸・文字サイズ・余白・枠線の太さなどの数値項目はすべてスライダーと数値入力の併用で、ドラッグしながら調整できます。影も「強さ 0 〜 10」のスライダーで、段階を選ぶのではなく連続的に調整できます。
- その場でサンプルプレビュー。 各セクションの右側に、そのパーツだけのサンプルが表示され、値を変えると即座に反映されます。マウスオーバー時の色もサンプル上で実際に確認できます。
- セクションごとに保存・リセット。 各セクションは個別に保存でき、ページを再読み込みせずに反映されます。リセットボタンでそのセクションだけを初期状態（プリセットのデフォルト）に戻せます。
- ボタンのマウスオーバー色は自動でも設定。 背景色だけ設定してマウスオーバー色を指定しなかった場合は、少し暗くした色が自動で使われます。もちろん明示的に指定することもできます。
デザイン調整は、既存のデザインプリセット（simple1 / simple2 / normal）の上に重ねる差分として働きます。設定していない項目はプリセットのデフォルトのままなので、「プリセットのまま、ボタンの色だけサイトのテーマカラーに合わせる」といった使い方が簡単にできます。従来どおりカスタム CSS との併用も可能です。細かな優先順位はマニュアルをご覧ください。
4. フィールド説明文：入力項目に案内文を表示
各フィールドに説明文を設定できるようになりました。フィールド編集の「詳細」タブから、表示位置の異なる 3 種類を設定できます。
- 項目名の下：項目全体の補足（例：「全角で入力してください」）
- 入力欄の上：入力直前に見せたい案内
- 入力欄の下：入力例など（例：「例: 山田 太郎」）
説明文には HTML が使えます。「プライバシーポリシーをご確認ください」のようにリンクを含めたり、一部を強調したりできます。また、説明文は入力の案内が目的なので、確認画面には表示されません。
説明文の文字色・文字サイズは、前述のデザイン調整機能（「全体」セクション）からまとめて調整できます。
5. そのほかの変更
- 「日付 (ドロップダウン)」タイプが追加画面に表示されるようになりました。 年・月・日をドロップダウンで選ぶ日付フィールドは以前から動作していましたが、フィールド追加時の選択肢に出ていませんでした。v1.3 から正式に選択できます。
- 管理画面の内部構造を刷新しました。 今回の編集 UI 刷新にあわせて、フォーム定義を扱う管理画面の JavaScript を将来の機能拡張を見据えた構造に作り直しています。画面上の見た目だけでなく、今後のアップデートの土台となる変更です。
アップデートについて
v1.3 は、WordPress 管理画面のプラグイン更新から通常どおり更新できます。
- 既存のフォームはそのまま動作します。 フォーム定義・ショートコード
[fplant id="..."]・保存済みの送信データ・確認画面・自動返信メール・埋め込み（iframe / JS）は、更新後も変更なく動作します。データの移行作業は不要です。 - フォームの見た目は変わりません。 デザイン調整機能は「設定した項目だけ」に働くため、更新しただけでフロント側の表示が変わることはありません。
functions.phpなどで PHP フックや JS Hook API を使ってカスタマイズしている場合も、既存のフックはそのまま動作します。
まとめ
Form Plant v1.3 では、フィールド編集画面のアコーディオン化、本番同等のプレビュー、CSS 不要のデザイン調整、フィールド説明文と、「フォームを作る・整える」日常の作業を短くすることを重視して機能を追加しました。
特にデザイン調整機能とプレビューは、「作る → 保存 → 確認 → 微調整」のサイクルを管理画面の中だけで完結させます。これまでボタンの色を変えるためだけに CSS を書いていた方に、ぜひ試していただきたいアップデートです。
Form Plant は WordPress.org の公式ディレクトリから無料でインストールできます。使い方の詳細はマニュアルを、MW WP Form からの乗り換えを検討中の方は移行ガイドをあわせてご覧ください。ご意見・ご要望もお待ちしています。