內容簡介
在建立表單時即時預覽表單。
Contact Form 7 預覽
Contact Form 7 是個很好的 WordPress 外掛，但使用表單標籤來建立表單時，必須不斷地儲存、切換分頁和重新整理以查看更改，這可能會讓你感到痛苦和緩慢。
Contact Form 7 Live Preview 可以在表單編輯器的下方直接顯示表單的即時預覽，以緩解這種痛苦。
它是如何運作的
Contact Form 7 Live Preview 創建一個「虛擬」表單，並在即時預覽窗格中顯示它。每當你對表單進行更改時，它會將當前狀態保存到虛擬表單中並刷新預覽。這意味著你不需要儲存表單以查看更改，尤其是如果你的表單當前已經上線。
虛擬表單設置為 demo_mode: on，這意味著你可以測試驗證和成功訊息，但不會傳送任何電子郵件。
注意: 它可能無法與某些主題或外掛兼容
預覽視窗僅顯示表單。只要透過 hooks 正確地 enqueue，即可加載你的站點腳本和樣式。如果預覽中的某些內容看起來不正確，請確認你的腳本和樣式是否已被正確地 enqueue，並且未被條件式載入（例如 is_page('contact'))）。
如果它對你不起作用，請不要直接留下差評。請在論壇中告訴我，我們將找出問題是否出現在外掛或你的主題上。如果問題出現在外掛上，我將嘗試解決它。
特點:
即時預覽表單的更改
在不發送電子郵件的情況下測試驗證和錯誤訊息
設置預覽的背景色（如果你的表單在上線後將位於不同的背景色上，這非常有幫助）
可與大多數 CF7 外掛兼容，以影響表單的外觀和行為
經過測試的外掛:
Material Design for Contact Form 7
Conditional Fields for Contact Form 7
外掛標籤
開發者團隊
② 後台搜尋「Live Preview for Contact Form 7」→ 直接安裝（推薦）
原文外掛簡介
View a live preview of your form as you’re building it.
Contact Form 7 Preview
Contact Form 7 is great, but building your forms using form tags can be painful and slow when you have to constantly save, switch tabs and refresh to see your changes.
Contact Form 7 Live Preview relieves this pain by displaying a live preview of your form directly underneath the form editor.
How does it work
Contact Form 7 Live Preview creates a “dummy” form and displays it in the live preview pane. Whenever you make changes to a form you’re working on, it saves your current state to the dummy form and refreshes the preview. This means you don’t have to save your form to see your changes, which can be especially important if your form is currently live.
The dummy form is set to demo_mode: on, which means you can test the validation and success messages and no emails will be sent.
Note: It may not work with some themes or plugins
The preview window displays just the form. It loads your site’s scripts and styles as long as they’re enqueued properly via hooks. If something isn’t looking right in the preview, make sure your scripts and styles are enqueued correctly, and aren’t loaded conditionally (E.g. is_page('contact')).
If it doesn’t work for you, please don’t go straight for leaving a bad review. Let me know in the forums and we’ll figure out if the problem is with the plugin, or with your theme. If it’s a problem with the plugin I’ll try and fix it.
Features:
Live preview changes to your form
Test validation and error messages without sending emails
Set the background colour of the preview (helpful if your form is going to be on a different coloured background once live)
Works with most CF7 addons that affect the look and behaviour of your form
Tested with:
Material Design for Contact Form 7
Conditional Fields for Contact Form 7