之前不是很愛 Contact Form 7 這款超多人用,知名度也超高的表單外掛,雖然周邊的工程師們都在用,只是我有一點吃外貌,能不能跟網站融合一起的外表,很大程度會決定我要不要用該外掛,就像外掛圖示如果很可愛或漂亮,我就會不自覺的點進去看那是什麼外掛。
隨著網站技術力增加,對於 Contact Form 7 操做也比較理解,後來某次在測試各家表單外掛時,朋友還是建議我先從 Contact Form 7 去看,畢竟「Contact Form 7 已經自成一個生態圈」,這句話勾起我的興趣,於是以英文下去尋找,真的找到很多有趣的擴充外掛,再將其相互搭配之下做出心目中理想的聯絡表單。
找尋到的眾多外掛,當中還是有些目前現階段用不到,可是未來也許會用到的相關擴充外掛,想要收藏起來,以後就不用再去將其撈出來用,然放在 WordPress.org 內的個人收藏也很不實際,因為裡面沒辦法更細分,一堆外掛在裡面找起來也很阿雜。所以就乾脆獨立一篇文章來收藏跟介紹,除了自己未來要用方便外,也希望讓更多新手對 Contact Form 7 有進一步的認識與了解
自家聯絡表單的組合技成員
聯絡表單這東西看起來就是個表格,但實際操作下去後卻發現排版沒有想像中容易,有換過幾套表単外掛,只是要不是達不到想要的效果,要不就是想要的效果得用進階到付費版,再要不然就是效果 OK 也不用付費版,但就是收不到信。因此我在表單這一欄位做的很敷衍,抱著反正也沒幾位會聯繫我,就半放生聯絡表單。
直到某天心血來潮想認真面對聯絡表單,在朋友的建議下開始研究起 Contact Form 7,這才驚覺原來 Contact Form 7 的擴充外掛居然有這麼多,只要選對組合,就能做出不輸付費表單外掛的精美表單,於是就一頭砸下去花個三四天,完成我心目中的表單樣式。
表單主體就是用 Contact Form 7 製作,一定要先安裝這款外掛,後面的擴充外掛才能跟著生效,生效後沒意外都會集中在「聯絡表單」的欄位底下。
安裝完 Contact Form 7,若有人覺得安裝完後網站速度有拖,除了用程式碼微調效能外,到建議還可以安裝 WP Plugin Manager 來管理外掛效能。它的主要功能是讓外掛公用在某些頁面狀態呈現關閉狀態。通常外掛啟用後,是網站全面都能受到影響,然某些情況下,我們只在單一或少數頁面有需要用到該外掛,若全站啟用對網站來講也是一種負擔,這時就能透過 WP Plugin Manager 協助我們關閉用不到的頁面,藉此降低對網站的負荷。
我不只用於 Contact Form 7 本身,我連 Contact Form 7 擴充外掛都一併限制,這邊是為了降低對效能的影響而進行限制,另外為頁面效果進行限制的還有 Meow Lightbox,這款燈箱效果主要用於文章之中,若出現在頁面有點醜,這時就幸好有 WP Plugin Manager 可以來關閉燈箱效果,只要運用得當,前端後台都頗為好用。
樣式與風格挑選-Contact Form 7 Skins
Contact Form 7 安裝好後,表單本身若沒有寫程式碼下去修飾就會很簡約,簡約到有點陽春,這也是我當初不想用的原因之一,因此這時就可以用 Contact Form 7 Skins 來修飾表單外表。
雖然顏色跟框架選擇有限,但跟之前陽春比起來好太多了,且顏色搭配大多也很好看,只要按一按就能改變,超級方便。
讓版面多元化-Smart Grid-Layout Design for Contact Form 7
顏色改好後,最重要的是表格排版,這時候較要出動最重要的 Smart Grid。
它主要能做到將表格劃分成兩排或是多排,這樣子表単看起來就不會太落落長,也能將選項進行摺疊或是下拉,讓表單可以更簡潔清爽,讓表格整體布局變得更多元,彈性也更大,也是因為它的出現,讓我覺得 Contact Form 7 好用極了。
電子報訂閱扭-Add-on Contact Form 7 – MailPoet 3
如果網站有發送電子報,那麼就可以安裝該電子報的訂閱擴充外掛。就像朋友說的使用 Contact Form 7 的群眾實在太多,因此只要你的電子報不是小眾,例如像是 Mailchimp,都能找到相關的擴充外掛來使用。
我用的這套 MailPoet 雖然在台灣名氣不大,不過我很喜歡它操作介面、排版方式,細緻度超棒的,不虧是浪漫大國法國團隊所開發的,這款電子報使用者也頗多,加上 Contact Form 7 使用者規模龐大,才有開發者願意開發這款訂閱電子報外掛,用普及率高的外掛的好處,在此體現的淋漓盡致。
阻擋機器人來信-Honeypot for Contact Form 7
為了預防收到機器人來信,這時候就要安裝個認證碼來過濾下,原先我是用 Easy Math Captcha for CF7 的數字認證,輕巧簡單好用,很適合我這種小咖網站。只是後來該外掛因安全性問題讓官方下架了,雖說還能用,但為了網站的未來安全著想,還是要去找其他類似的外掛來頂上。
後來找到 Honeypot 這款,當初一看到時還以為是 Antispam Bee 這款外掛開發者開發的,結果一切是我想太多了。簡單說這款的重點是透過信件提交時間來判定是否為機器人,而非透過驗證碼來辨認,開發者表示他覺得驗證碼太麻煩太醜,所以開發了這款外掛,且這款也由阿力獅完成本地化,操作上更簡便了。
這款很適合我這種小型網站,畢竟沒啥人會寫信,但不設驗證碼又怕機器人來垃圾信,不想讓自家信箱給圾垃信塞爆,刪除信件也是件麻煩工作。若是也同開發者一樣覺得驗證碼不好看,卻又不得不設時,可以考慮這款 Honeypot。
重新轉向指定頁面-Successful Redirection for Contact Form 7
一般來說,當聯絡表單按下傳送後,頁面會跳轉回首頁,但若是希望跳轉畫面不是首頁,而是其他頁面則可以使用 Successful Redirection 來讓頁面跳轉到指定頁面去。我安裝這款純粹是覺得可以讓體驗流程更加豐滿,就像訂閱電子報後會跳出「感謝訂閱」的字樣,感覺電子信件也可以來一個。
其他不錯用的衍生擴充外掛
在找尋適合我的狀況時,有找到一些不錯的外掛,只是現階段用不到,怕未來要用還要找尋,所以就放在下方作為參考。
來函表單資訊儲存-CFDB7 – Contact Form 7 資料庫附加元件
由於 Contact Form 7 本身並不會保留訪客留下的各種聯絡訊息,若是回信時不小心刪除,那後續就真的找不回資訊了,因此就有開發出可以儲存表単資料的擴充外掛。若有需要將訪客資訊進行保留的網站,這款外掛就很適合。
用認證碼擋機器人-Advanced noCaptcha & invisible Captcha (v2 & v3)、Contact Form 7 Image Captcha
如同前面說過的認證碼的用意是在於阻擋機器人發來的垃圾信,像我是用比較輕巧的外掛來檔,若檔不住的話,就會需要更複雜的認證碼設定外掛來協助,而 Advanced noCaptcha & invisible Captcha 就能完成這項工作,只是因為要跟 Google 串接,有點小麻煩,加上現在 Honeypot 運作正常,暫時沒打算要裝。
在用數字認證之前,本來有想要安裝 Contact Form 7 Image Captcha 這款圖形認證碼外掛,後來考量到出現的字是英文字,怕有訪客對英文不熟按錯,會造成使用感體驗不佳,所以先暫時放棄了,不然他的幾何圖片都做得挺可愛的。
分頁/多步驟更有專業感-Multi Step for Contact Form 7
這個功能比較常在網路商店下單時看,訂購車按結帳後,進入折扣碼或是在確認頁面,最後才是結帳畫面,然後上放還有進度條可以參考進展到哪一階段。感覺很好用,但目前還沒想到要怎麼用,所以就先放著,等想到之後再來用。
製作更彈性的預約格式-Date Picker by Input WP – Sync bookings with external Calendars (.ics)
有一陣子很需要預約表格,結果安裝了許多預約外掛都沒有找到適合的,最後還是使用第三方功能來解決問題。雖然目前不需要了,總覺得未來還是有可再度用到,要避免像上次那樣找到抓狂,就先存放著,未來有機會再來套用看看。
小結-Contact Form 7 擴充外掛之多,讓人看到聯絡表單的無限可能
有點小後悔太晚知道 Contact Form 7 的強大,雖說這次只是用於聯絡表單,但我也沒想過表單能做這樣多排列形式,又能跟網站顏色相匹配,這是好多嘗試過好多款外掛都沒能達到的成效,且不只外觀好看,最重要的收信功能也是安全穩定的,畢竟發信還是靠 Contact Form 7 本身,能將信件傳遞到正確信箱,雖然是很基本的功能,但是這才是重中之重,這應該也是它讓許多使用者所喜愛的主要原因。
透過這次的聯絡表單的再製作,從中挖掘了不少有用的擴充外掛,雖然現在暫時還無法派上用場,但是這些表單給了我許多靈感跟想法,等到之後有需要時再拿來重組一次,當初苦尋不到合適預約外掛的苦惱問題或許就能獲得解決了。
相關文章閱讀推薦
- 5 款 9 種從登錄就開始保護網站安全 | WordPress 推薦外掛分享清單 01
- 10 款 14 種網站內部管理外掛分享 | WordPress 推薦外掛分享清單 02
- 15 種類別 26 款讓文章寫作與管理上更便捷的 WordPress 外掛 (上)
- 15 種類別 26 款讓文章寫作與管理上更便捷的 WordPress 外掛 (下)