用《Fluent Forms外掛》製作一份全新的聯絡表單。電子報教學系列第6集

前情提要

之前分享了我如何只用一年 420 元的預算搞定本站的電子報訂閱系統，這一篇是加碼教學，也跟電子報訂閱有一點點相關，繼續看下去就知道囉。

第四集中分享了如何用 Fluent Forms 外掛製作出訂閱電子報的表單。本篇為電子報教學的第六集，主要針對如何用 Fluent Forms 外掛製作一份全新的聯絡表單。

一起學習吧！

製作出客戶填寫的介面

1. 登入 WordPress 後台
2. 點選 Fluent Forms
3. ( 可以直接修改官方製作的聯絡表單，也可以跟著我直接重新做一份 )
4. 點選藍色 +Add New Form 按鈕

製作出姓名欄位

1. 按黑色加號
2. 點選 Name Fields
3. 在右方面板修改欄位細節設定
4. 點選 First Name 右方三角形
5. 修改 Label 欄位：姓名
6. 修改 Placeholder 欄位：姓名
7. Required 點選 Yes
8. Error Message 點選 Custom，輸入：必填欄位
9. 取消勾選 Last Name

製作出 Email 欄位

1. 按黑色加號
2. 點選 Email
3. 在右方面板修改 Email 欄位細節設定
4. 修改 Placeholder 欄位：example@email.com
5. Required 點選 Yes
6. Error Message 點選 Custom，輸入：必填欄位
7. Validate Email 點選 Yes
8. Error Message 點選 Custom，輸入：請填入正確格式

製作出聯絡需求欄位

1. 按黑色加號
2. 點選 Radio Field
3. 在右方面板修改欄位細節設定
4. 修改 Element Label：聯絡需求
5. Options 請自行按需要製作，舉例：
   1. 我想分享
   2. 我要建議
   3. 我是廠商
6. Required 點選 Yes
7. Error Message 點選 Custom，輸入：必填欄位

製作出訊息欄位

1. 按黑色加號
2. 點選 Text Area
3. 在右方面板修改欄位細節設定
4. 修改 Element Label：訊息
5. 修改 Placeholder 欄位：請填入訊息
6. Required 點選 Yes
7. Error Message 點選 Custom，輸入：必填欄位

製作出送出按鈕

1. 點選預設藍色 Submit Form 按鈕右方的鉛筆，在右方面板修改送出按鈕的細節設定
2. 在 Submit Button Text 中填入：送出
3. 在 Button Style 選單中選擇 Custom，把按鈕顏色換成適合自己部落格的配色。
4. Normal State 指的是預設樣式，依序修改背景色、框線顏色、文字顏色
5. Hover State 指的是鼠標懸停時的樣式，一樣依序修改三種顏色
6. 點選右上方藍色 Save Form 按鈕

設定客戶填寫完畢時顯示的訊息

1. 點選上方 Settings & Integrations
2. 修改 Confirmation Settings
3. 填入想顯示的訊息，記得善用右方 Add ShortCodes 按鈕。範例：
   謝謝您完成填寫，站長會盡快回覆您。
   以下是您填入的信息
   {inputs.names.first_name}
   {inputs.email}
   {inputs.input_radio}
   {inputs.message}
   歡迎訂閱電子報
   fluentform id=” “
4. 點選右上方藍色 Save Settings 按鈕

說明

{inputs.names.first_name} 是客戶自己填寫的姓名
{inputs.email} 是客戶自己填寫的 Email
{inputs.input_radio} 是客戶自己填寫的聯絡目的
{inputs.message} 是客戶自己填寫的訊息內容

fluentform id=” ” 會顯示訂閱電子報的欄位，要注意改成正確的格式，這裡可以找到：

1. 登入 WordPress 後台
2. 點選 Fluent Forms
3. 在 ShortCode 欄位可以直接複製正確的代碼，不用再做修改

不直接串接此表單到 FluentCRM 是因為有聯絡需求不代表就要訂閱電子報。本來我想說可否像留言區的方式，勾選同意後就可以直接訂閱，但目前沒有研究出來，因此使用上述替代方式，如果客戶也想要訂閱電子報，就可以直接複製上面的自己填寫的 Email 做訂閱。

如果還有其他想要顯示的內容，也別忘了使用右上角灰色 Add Shortcodes 按鈕找找看有沒有符合需求的唷。

開啟聯絡通知

1. 點選 Settings & Integrations
2. 點選 Email Notifications
3. 預設已經有一個 Admin Notification Email，點選右方綠色齒輪按鈕修改
4. 清空 Subject 欄位選項後，點選右方的三個點選單自訂，或是照抄範例：{inputs.names.first_name}：{inputs.input_radio}
5. 完成後通知信件的主旨會長像是這樣：「王大明：我有建議」
6. Email Body 則可以不做調整，預設的狀態是 {all_data} 就會直接呈現所有資訊
7. 點選下方藍色 Save Notification 按鈕
8. 自動跳轉回到 Email Notifications 頁面後，Status 改成 Enabled

把聯絡表單放入「與我聯絡」頁面

1. 登入 WordPress 後台
2. 點選頁面
3. 點選新增頁面
4. 新增標題：與我聯絡
5. 點選黑色加號
6. 搜尋 Fluent Forms
7. 選擇剛剛做好的聯絡表單
8. 點選右上方藍色發佈按鈕
9. ( 記得新增到自己的選單中 )

結語

終於全部完成啦！祝站長們經營順利！

全系列教學在這邊：安寶寶的電子報系列教學

電子報系列教學就到此結束了，我身為新手站長，很希望能夠幫助到有類似需求的站長們。如果喜歡這篇文章的話，也歡迎訂閱我的自學電子報，已經開始發送了喔。

您可能也會有興趣的文章

• 一年只要420元就可以開始發電子報!(Cloudways用戶適用)
• 用《Cloudways Rackspace Email add-on 》低成本收信。電子報教學系列第1集
• 用《Fluent SMTP外掛》和《Cloudways Elastic Email Add-on》順利寄出每封信。電子報教學系列第2集
• 用《 FluentCRM 外掛》開啟訂閱電子報兩步驟驗證。電子報教學系列第 3 集
• 用《 Fluent Forms 外掛》製作一份全新的電子報訂閱表單。電子報教學系列第 4 集
• 用《 FluentCRM 外掛》寄送大宗郵件。電子報教學系列第 5 集
• 用《 Fluent Forms 外掛》製作一份全新的聯絡表單。電子報教學系列第 6 集