Contact Form 7で作成しているフォームをリアルタイムでプレビューできるプラグイン「Live Preview for Contact Form 7」

Contact Form 7で作成しているフォームをリアルタイムでプレビューできるプラグイン「Live Preview for Contact Form 7」

お問い合わせフォームを新規作成する時、このようなお悩みはありませんか？

こんな時に便利なのが、お問い合わせフォーム作成画面でプレビューができる「Live Preview for Contact Form 7」。
インストールするだけですぐ使えますので必要な方は取り入れてみてください。

Contact Form 7で作成しているフォームをリアルタイムでプレビューできるプラグイン「Live Preview for Contact Form 7」インストール方法

ログイン後管理画面の「プラグイン」をクリックします。

新規追加ボタンをクリックし、キーワード入力欄に「Live Preview for Contact Form 7」と入力しましょう。
※Live Previewだけでも上位に表示されました。

今すぐインストール、有効化のボタンをクリックしましょう。 これでインストールは完了です。
実際にお問い合わせフォーム作成画面に移動してみましょう。

「Live Preview for Contact Form 7」でお問い合わせフォームプレビューを確認してみる

管理画面＞お問い合わせ＞該当のお問い合わせフォームを開きます。
今回はマルチステップ1のお問い合わせフォームを開いてみました。
公開画面ではこのようなデザインです。

Live Preview for Contact Form 7で見たプレビュー画面です。
フォームタブのフォーム作成画面のすぐ下に表示されています。

コンテンツ幅とプレビュー幅が異なるのでチェックボックスが一部折り返していないなどはありますが、どのような項目があり順番なども確認できるので、十分な機能ですね。
px指定はできませんが、横幅を調整できるバーがありますので気になる方はそちらで実際のコンテンツ幅と同じくらいに揃えてください。

【ご注意】Backgroundはお問い合わせフォームの背景に色が付く＆あくまでもプレビューなので公開画面では反映されない

プレビュー画面の上に背景色選択ができ、カラーピッカーや色番号で指定ができます。
ただ、これはお問い合わせフォーム内の背景色です。
そしてそのまま変更を保存してもあくまでもプレビュー機能のプラグインのため公開画面には影響がないです。
実際に色を変更したい場合はフォーム作成画面で直接指定もしくはclass名を付けて微調整をしてください。