前言介紹
- 這款 WordPress 外掛「Contact Form 7 Multi-Step Forms」是 2013-04-14 上架。
- 目前有 50000 個安裝啟用數。
- 上一次更新是 2025-01-27，距離現在已有 98 天。
- 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
- 有 49 人給過評分。
- 論壇上目前有 4 個提問，問題解答率 50%
外掛協作開發者
外掛標籤
form | contact | contact form 7 | multiple pages | multistep form |
內容簡介
我需要一個可以跨越多個頁面的聯繫表單，並且最終會發送一封帶有所有收集信息的電子郵件。這個外掛通過擴展熱門的 Contact Form 7 外掛來實現這一點。
這個外掛的工作示例可以在https://webheadcoder.com/contact-form-7-multi-step-form/上找到。
需要 Takayuki Miyoshi 的 Contact Form 7 外掛，版本為 4.8 或以上。
使用方法
為多步驟表單過程中的每一步創建一個頁面或文章。如果您有 3 步驟，請創建 3 個頁面/文章。創建表單時，您需要它們的 URL。
創建一個 Contact Form 7 表單。
將光標放在表單末尾。
在 Contact Form 7 表單的“表單”選項卡上，點擊名為“multistep”的按鈕。
在彈出的窗口中，如果這是多步驟表單的第一步，請勾選“第一步”旁邊的複選框。如果這是多步驟表單的最後一步，請勾選“最後一步”複選框。所有其他複選框都是可選的。
下一頁的 URL 是包含下一個表單的 URL。如果這是最後一步的表單，您可以將 URL 欄留空。
點擊“插入標籤”
保存完成的表單，並將表單的短碼放入您在第 1 步中創建的相應頁面/文章中。
為多步驟表單過程中的每個表單重複此操作。
在最後一步，您可能希望發送一封電子郵件。請確認在第五步中勾選了“發送電子郵件”複選框。在“郵件”選項卡上，只需像平常一樣輸入郵件標記即可。例如，如果您的第一個表單有欄位 your-email，您可以在最後一個表單的郵件選項卡中包含 [your-email]。注意：CF7 會認為這是一個錯誤，因為 your-email 可能不會在當前表單中顯示。您可以安全地忽略此錯誤。
Multistep 標籤選項
Name - 這個 multistep 表單標籤的名稱。這是必需的，但目前沒有使用。
First Step - 除了標記多步驟表單的第一步外，這還允許任何表單充當第一步，並在沒有提交任何先前數據時顯示。當您希望某些用戶跳過第一步時，這很有用。
Last Step - 除了標記您的多步驟表單的最後一步外，這還會從用戶的瀏覽器中清除數據。一旦他們提交這個表單，他們就不會再看到自己的數據填充表單了。
Send Email - 如果勾選了此選項，該表單將像正常的 Contact Form 7 提交一樣發送電子郵件。
Skip Save - 如果您使用 Flamingo 或 CFDB7 將提交保存到數據庫中，則可以選擇跳過保存此表單提交。
下一頁的 URL - 這是用戶提交表單後跳轉的 URL。
其他標記
[multiform "your-name"]
multiform 表單標籤可用於顯示先前步驟的字段。將 your-name 替換為您的欄位名稱。此標籤僅適用於表單選項卡，此標籤在郵件選項卡中不起作用。
[previous "Go Back"]
previous 表單標籤可用於顯示一個按鈕，讓用戶返回前一步。
原文外掛簡介
I needed a contact form that spanned across multiple pages and in the end would send an email with all the info collected. This plugin adds onto the popular Contact Form 7 plugin to do just that.
Sample of this working is at https://webheadcoder.com/contact-form-7-multi-step-form/
Requires the Contact Form 7 plugin, version 5.2 or above, by Takayuki Miyoshi.
Usage
Create one page or post for each step in your multi-step form process. If you have 3 steps, create 3 pages/posts. You will need the urls to these when creating your forms.
Create a Contact Form 7 form.
Place your cursor at the end of the form.
On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”.
In the window that pops up, check the checkbox next to “First Step” if this is the first step of your multi step forms. If this is your last step in the multi step forms, check the “Last Step” checkbox. All other checkboxes are optional.
The Next Page URL is the url that contains your next form. If this form is the last step, you can leave the URL field blank.
Click “Insert Tag”
Save your completed form and place the form’s shortcode into the appropriate Page/Post you created in step 1.
Repeat for each form in your multi-step form process.
On the last step, you probably would want to send an email. Make sure to check the “Send Email” checkbox in step 5. On the Mail Tab, simply enter the mail-tags as you normally would. For example if your first form has the field your-email you can include [your-email] in the Mail tab on your last form. Note: CF7 will see this as an error because your-email may not be displayed on the current form. You can safely ignore this error.
Multistep Tag Options
Name – The name of this multistep form-tag. This is required, but is currently not being used.
First Step – Besides marking the first step of your multistep forms, this allows any form to act as the first step and show when no previous data has ben submitted. This is useful when you want some users to skip the first step.
Last Step – Besides marking the last step of you multistep forms, this clears the data from user’s browsers. Once they submit this form they won’t see their data populating the forms anymore.
Send Email – If this is checked the form will send an email like a normal Contact Form 7 submission.
Skip Save – If you use Flamingo or CFDB7 to save submissions to the database this prevents saving this form submission.
Next Page URL – This is the URL your users will go to after the form is submitted.
[multistep multistep-123 last_step send_email skip_save “/thank-you”]
Additional Tags
[multiform "your-name"]
The multiform form-tag can be used to display a field from a previous step. Replace your-name with the name of your field. This is only for use on the Form tab, this tag will not work in the Mail tab.
[previous "Go Back"]
The previous form-tag can be used to display a button to go to a previous step. Replace Go Back with text you want to show in the button.
Messages Tab
When a visitor to your site visits the 4th step in your multi step form without filling out the 1st step, the message “Please fill out the form on the previous page.” will be displayed. You can change this on each form in the Messages tab.
What this plugin DOES NOT do:
This plugin does not support file uploads on every form. If you need to use file uploads make sure to place it on the last step.
This plugin currently does not support “pipes” in the select field. See https://contactform7.com/selectable-recipient-with-pipes/ for more on what “pipes” is on the Contact Form 7 site.
This plugin does not load another form on the same page. It only works when the forms are on separate pages. Many have asked to make it load via ajax so all forms can reside on one page. This plugin does not support that.
PRO Version
If you expect to have a lot of data submitted through your multi-step forms, the Pro version may be able to help you better. The PRO version uses Session Storage so it is able to handle roughly 1,000 times more data for your multiple forms. In total it can handle about 5MB vs 4KB in the free version. Currently the Pro version REQUIRES the WordPress REST API and Contact Form 7 AJAX Submission to be enabled.
Another feature the Pro version offers is the ability to skip steps with the “Contact Form 7 – Conditional Fields plugin”. Learn more here.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Contact Form 7 Multi-Step Forms」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.3 | 1.4 | 1.5 | 1.6 | 2.0 | 2.1 | 2.2 | 3.0 | 3.1 | 3.2 | 4.0 | 4.1 | 4.2 | 4.3 | 4.4 | 1.01 | 1.02 | 2.21 | 2.22 | 2.23 | 2.24 | 2.25 | 2.26 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | 2.0.1 | 2.0.2 | 2.0.3 | 2.0.4 | 2.0.5 | 2.0.6 | 2.0.7 | 2.0.8 | 2.0.9 | 3.0.1 | 3.0.2 | 3.0.3 | 3.0.4 | 3.0.7 | 3.0.8 | 3.0.9 | 3.1.1 | 3.1.2 | 4.0.1 | 4.0.2 | 4.0.7 | 4.0.8 | 4.0.9 | 4.1.1 | 4.1.2 | 4.1.4 | 4.1.5 | 4.1.6 | 4.1.7 | 4.1.8 | 4.1.9 | 4.2.1 | 4.3.1 | 4.4.1 | 4.4.2 | trunk | 4.1.91 | 4.1.92 |
延伸相關外掛（你可能也想知道）
Contact Form 7 Database Addon – CFDB7 》「CFDB7」外掛可將「聯絡表單7」的提交內容保存在WordPress資料庫中，並可匯出CSV檔案。, 只要安裝此外掛，它便會自動開始捕捉來自聯絡表單7的表單提交。, CF...。
ReCaptcha v2 for Contact Form 7 》Contact Form 7 v5.1 於 2018 年 12 月停止支援 reCaptcha v2，以及 [recaptcha] 標籤。此外掛從 Contact Form 7 5.0.5 重新帶回了這項功能，同時重新加入了 ...。
Contact Form 7 Captcha 》使用這個外掛，您需要透過 Google 網站註冊 API 金鑰：https://www.google.com/recaptcha/admin, 此外掛實現了「我不是機器人」複選框。在生成金鑰時，請選擇...。
Contact Form 7 – Dynamic Text Extension 》Contact Form 7 是一個出色的 WordPress 外掛，也是免費 WordPress 聯絡表單外掛的首選之一。 Contact Form 7 - Dynamic Text Extension (DTX) 通過添加動態...。
Conditional Fields for Contact Form 7 》此外掛可以讓您的 Contact Form 7 表單加入條件式邏輯。, 當您編輯您的 CF7 表單時，您會看到一個額外的標籤，名為「條件式欄位群組」。您放置在起始標籤和結...。
Contact Form 7 Extension For Mailchimp 》WordPress Extension for Mailchimp (Chimpmatic Lite)可將Contact Form 7與Mailchimp Audience集成。使用Mailchimp的最新API自動將Contact Form 7提交的信息...。
Contact Form 7 Image CAPTCHA, WPForms Image CAPTCHA, Contact Form 7 Spam Image CAPTCHA, WPForms Spam Image CAPTCHA, GDPR 》在你的Contact Form 7表單中添加一個SVG圖像驗證和蜜罐。這個驗證符合GDPR要求，因為圖像是內嵌的SVG格式，所以這個外掛程序不會像Google的ReCAPTCHA那樣通過...。
Advanced Contact form 7 DB 》p>這是一個簡單易用的外掛程式，可儲存透過 Contact Form 7 表單收到的所有查詢詳細資料。只需安裝並啟用此外掛程式，就可以在 wp-admin 中存儲所有詢問。, ...。
Database for Contact Form 7, WPforms, Elementor forms 》Contact Form 7 Entries 外掛程式會自動將使用者在 Contact Form 7、WPforms、CRM Perks Forms 及其他流行聯絡表單外掛程式提交的表單儲存到 WordPress 資料...。
Ultimate Addons for Contact Form 7 》ate a grid or column layout with Contact Form 7 using the Columns / Grid Layout Addon in Ultimate Addons For Contact Form 7. This allows you to dis...。
Drag and Drop Multiple File Upload for Contact Form 7 》拖放多檔案上傳器是一個簡單、直接的 WordPress 外掛擴充套件，可與 Contact Form7 一起使用，讓用戶可以使用拖放功能或網頁表單的常見瀏覽檔案來上傳多個檔...。
Country & Phone Field Contact Form 7 》「Country & Phone Field Contact Form 7」外掛是一個 Contact Form 7 的附加功能。這個外掛會在 Contact form 7 中添加兩個新的表單欄位：國家清單（表...。
CF7 Google Sheets Connector 》CF7 Google Sheet Connector是一個外掛插件，可在您的WordPress基於Contact Form 7表單和Google Sheets之間建立一個橋樑。 ** 🚀 是一個最受歡迎的WordPress...。
Date Time Picker for Contact Form 7 》此插件可以透過 CSS 類別將 Contact Form 7 文字欄位轉換為日期選擇器、時間選擇器或日期時間選擇器。安裝完插件後，您只需要在 Contact Form 7 CSS 類別編輯...。
Form Vibes – Database Manager for Forms 》Form Vibes 是一個提交管理外掛程式，你可以使用它來儲存從 Contact Form 7 和其他表格建立外掛程式（如 Elementor Form、Beaver Form 等）中提交的資料到資...。