內容簡介
我需要一個可以跨越多個頁面的聯繫表單，並且最終會發送一封帶有所有收集信息的電子郵件。這個外掛通過擴展熱門的 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 表單標籤可用於顯示一個按鈕，讓用戶返回前一步。
外掛標籤
開發者團隊
② 後台搜尋「Contact Form 7 Multi-Step Forms」→ 直接安裝（推薦）
📦 歷史版本下載
原文外掛簡介
Add multi-step forms to Contact Form 7 with full data persistence between pages and a single email on final submission. Upgrade to Pro to submit 5MB forms through sessionStorage, conditional step-skipping, and priority support.
The Original Contact Form 7 Multi-Step Plugin
Since 2012, this has been the go-to multi-step solution for Contact Form 7 users. It’s built for reliability and trusted on thousands of sites. Split your CF7 form across multiple pages, preserve data between steps, and send one complete email at the end.
It’s been running quietly on thousands of sites through every major WordPress and CF7 release. If you need multi-step forms with CF7, this is where most people start.
See it in action at https://webheadcoder.com/contact-form-7-multi-step-form/
Requires Contact Form 7 (5.2 or above) by Rock Lobster Inc. (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 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.
