還在用Google表單?來學超簡單客製化表單教學吧! – WordPress外掛:Fluent Form

都用WordPress架好網站了,想做一個活動報名表單,但不知道怎麼放在自己的網站上?

還在用連結串接傳統的Google表單?

要用Google表單也不是不可以,但就是少了那麼一點專業的感覺…

Fluent Form是一款WordPress表單外掛,可以快速製作出精美專業的表單,完美嵌入在網頁中!

Fluent Form可以在網站上放表單,讓讀者問問題、活動報名、訂閱Email…

還可以串接真人驗證機制,防止網路機器人攻擊。

Fluent Form有免費版跟付費版,付費版功能更多,有興趣可以到這裡參考看看。

以下為Fluent Form免費版外掛教學,請享用。

安裝外掛

到WordPress後台/安裝外掛,搜尋Fluent Form,安裝並啟用它。

安裝完成後,左邊選單看到Fluent Forms,代表已經安裝成功。

Fluent Forms最常用的表單有兩種模式:傳統式跟對話式。

傳統式就是我們一般看到的表單,適合穿插在既有的頁面上。

對話式會像有一個人在跟你對話,適合放在一個全新的頁面。

這兩種我都會教,繼續往下看吧!

新增表單(傳統式)

左邊選單點選Fluent Forms,會看到2個預設表單範本,

你可以點選「Add a New Form」新增一個全新的表單。

我們直接來修改「Contact Form Demo」當示範。

滑鼠移到「Contact Form Demo」,點選「Edit」。

點選「Edit」之後,會到「Editor」的區域,

這裡會看到一些預設好的欄位,我們來修改欄位的資訊。

點選第1個欄位「First Name」,

右邊的「Input Customization」,可以編輯欄位資訊。

Admin Field Label:輸入辨識欄位用途的名稱,只有你自己看得到。

Name Fields:因為這是姓名欄位,預設會有First Name、Middle Name、Last Name,我們不需要這麼多,留一個就好。

Label Placement:欄位名稱的位置。

點擊「First Name」右邊三角形符號,可以做細部設定。

Label:設定欄位名稱,這裡的名稱才會顯示在網頁上。

Default:欄位預設值。

Placeholder:欄位值提示,一旦輸入資訊便會消失。

Help Message:欄位說明。

Required:設定是否為必填欄位。

要新增欄位,在右邊點選「Input Fields」。

Fluent Form提供很多常見的欄位格式,例如姓名、Email、日期時間、純文字…等等。

找到你想要新增的欄位,直接拖曳到左邊的表單中。

欄位都調整好之後,到「Settings Integrations」/「Form Settings」,這裡可以設定填完表單後的動作。

Confirmation Type:這裡選擇不同的Confirmation Type,下面就會產生相對應不同的設定欄位。

Same Page:填完表單維持在同一個頁面。

To a Page:填完表單導至某一個頁面。

To a Custom URL:填完表單導至特定的網址。

接下來用Elementor把表單放到網頁上。

在左邊找到「Fluent Form」元素,直接拖曳到右邊的網頁,

然後再選擇你要放的表單名稱(記得要先建立好表單,這裡才會選得到)。

按下更新,就完成在網頁上新增表單了!

在「Entries」可以看到所有已填完表單的資料。

新增表單(對話式)

除了上述我們常看到的傳統表單,Fluent Form還可以建立對話式的表單。

什麼是對話式的表單?

就是一次只顯示一個問題,填寫完後按下Enter才會顯示下一個問題,就像真的有人在跟你對話一樣。

按下「Add a New Form」。

選擇「Conversational Form」,按下「Create Form」。

這裡欄位調整的方式跟傳統表格是一樣的。

調整完成後,到右上方把「短碼」複製起來。

到頁面用Elementor編輯,找到「短碼」小工具,拖曳到右方的頁面,然後貼上剛剛複製的短碼,按下更新。

這樣就完成囉,到網頁來看一下成果。

「我不是機器人」驗證

我們常常在別的網站填寫表單時,會看到「我不是機器人」的驗證,這裡來教你怎麼新增!

到「Global Settings」,左邊點選「reCAPTCHA」,這裡要輸入串接的金鑰,在這之前,先點擊右上方的連結去申請免費的reCAPTCHA。

點選「v3 Admin Console」。

在「標籤」輸入你的網域,reCAPTCHA類型選擇「reCAPTCHA v2」/「我不是機器人」核取方塊,填寫網域,服務條款打勾,按提交。

把金鑰跟密鑰複製起來。

回到Fluent Form,把金鑰跟密鑰複製上去。

接著到編輯表單的頁面,把「Input Fields」裡面的「reCaptcha」直接拖曳到你的表單。

這樣你的表單就會出現「我不是機器人」的驗證選項囉!

Email自動通知設定

前面有說到,當有人填完表單後,我們可以到「Entries」查看所有已填寫的資料,但如果沒主動去看就不會知道。

其實我們可以設定Email自動通知,這樣有人填完表單後,我們就能馬上知道!

首先我們要先開通主機的發信功能。

這裡以Cloudways為例,進入「Add-ons」。

找到「Elastic Email」,按下右邊的編輯圖示。

選擇「1000 Emails」,每個月支付0.1美元就能有1000封Email的可用數量,非常便宜,推薦直接使用它!

接著按下「盾牌」符號,設定網域認證。

填上你的網域,按下「VERIFY DOMAIN」,你會看到底下很多認證都呈現紅色,代表還沒認證成功。

我們點右下的連結,直接對照官方說明文件來做網域認證。

這份說明文件主要是教你如何開通Email,我們直接看到認證網域的部分。

這裡列出了SPF、DKIM、Tracking、MX、DMARC認證的方式,登入網域管理商,把文件裡面寫的認證方式照抄上去就可以了,這裡我以Gandi來說明。

登入Gandi,到「DNS紀錄」,點選新增紀錄。

這裡我直接列出SPF、DKIM、Tracking、MX、DMARC的官方認證方式,全部新增上去就完成了。

SPF

類型:TXT

名稱:@

文字參數:”v=spf1 a mx include:_spf.elasticemail.com ~all”

DKIM

類型:TXT

名稱:api._domainkey

文字參數:”k=rsa;t=s;p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbmGbQMzYeMvxwtNQoXN0waGYaciuKx8mtMh5czguT4EZlJXuCt6V+l56mmt3t68FEX5JJ0q4ijG71BGoFRkl87uJi7LrQt1ZZmZCvrEII0YO4mp8sDLXC8g1aUAoi8TJgxq2MJqCaMyj5kAm3Fdy2tzftPCV/lbdiJqmBnWKjtwIDAQAB”

Tracking

類型:CNAME

名稱:tracking

文字參數:api.elasticemail.com.

MX:依照官方說明文件不用特別設定。

DMARC

類型:TXT

名稱:_dmarc

文字參數:”v=DMARC1; p=none;”

設定成功之後,回到Cloudways,你會看到認證的項目變成綠色(有可能須等待一段時間才會認證完成)。

接著到Cloudways的SMTP設定選項,選擇「Elastic Email」,按下ENABLE。

最後到「Applications/Application Settings」,在「DEFAULT EMAIL SENDER」填上發信的Email地址,這裡要寫剛剛已經認證過的網域地址喔!

這樣我們就完成了Cloudways發信功能設定囉!

接著回到WordPress後台,我們來設定一旦有人完成表單,Email就自動發信通知。

到Fluent Forms表單編輯頁面,點選「Settings & Integrations」/「Email Notifications」。

右方點選「Add Notification」。

填入以下資訊:

Name:自己識別的通知名稱。

Send To:Enter Email。

Send to Email:希望收到信的Email地址。

Subject:Email主旨。

Email Body:Email內容。

最後按下Save就完成囉,之後有人填寫完成表單,上面填的Email就會收到通知喔!

到「All Entries」也能查看所有表單的回應內容。

Fluent Form是一款很強大的表單外掛,光是免費版就已經非常好用!

付費版還有更多功能,比如說可以在表單上放上付款功能、更多的表單範本、可以上傳圖檔…等等。

付費版有分以年授權及永久授權,根據授權網域的個數來定價。

如果對Fluent Form付費版有興趣,可以到官網去購買,不滿意的話14天內能提供退款。

來用Fluent Form來建立自己想要的表單吧!

[延伸閱讀:使用WordPress快速架設網站的4堂課 – 第1堂課:主機篇 – Cloudways]

相關文章

回到頂端