這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

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:

螢幕截圖

  • Live preview window directly beneath form editor.
  • Works with your site's other scripts and styles.
  • Even check your form's validation and success messages!

安裝

  1. Upload the zip to the /wp-content/plugins/ directory and unzip
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

OR go to ‘Plugins’ > ‘Add new’, and search for ‘contact form 7 live preview’ to install through the WordPress dashboard.

評價

2021年1月29日
Update/edit: It works great on some websites, but not at all on other websites. Even though this is for the backend only, it may be the theme that causes it to not work on some sites. It also might be a plugin, though most of the plugins I have are on both a site where preview works, and on a site where it does not work. Honestly, preview should be part of CF7 itself! It is great when it works. Especially when developing a form that you do not want to include on your site yet, and do not want to create a dummy page just to display it. Prev: No longer working. Now it just shows a blank background, where it used to show a preview. It has not been updated in quite some time. Perhaps it is not compatible with latest WP versions? It look like it may no longer be maintained? 🙁 CF7 itself should include a native previewer!
2019年10月10日
Simple and easy to see just below the code window
2019年3月30日
Its not that you get to see live preview but after saving the form. Nice though.
閱讀全部10個評價

貢獻者及開發者

“Live Preview for Contact Form 7” 是一個開源的軟體。以下的人對這個外掛作出了貢獻。

貢獻者

將 Live Preview for Contact Form 7 外掛本地化為台灣繁體中文版。

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

修改日誌

1.2.0

  • Fixed a security issue allowing logged in users without the correct privileges to update the hidden contact form.

1.1.0

  • Fixed autoreloading
  • Fixed the JavaScript alert asking if you want to save before leaving
  • Added a width slider

1.0.1

  • Updates to comply with the “Contact Form 7” trademark policy

1.0.0

  • Plugin has been stable long enough to be given 1.0.0 tag

0.1.4

  • Fix a bug that displayed admin bar on front end

0.1.3

  • Fix a deactivation bug

0.1.2

  • Fix a plugin activation bug

0.1.1

  • Add support and rating links to sidebar

0.1.0

  • First release – beta