之前不是很愛 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 製作,一定要先安裝這款外掛,後面的擴充外掛才能跟著生效,生效後沒意外都會集中在「聯絡表單」的欄位底下。

我不只用於 Contact Form 7 本身,我連 Contact Form 7 擴充外掛都一併限制,這邊是為了降低對效能的影響而進行限制,另外為頁面效果進行限制的還有 Meow Lightbox,這款燈箱效果主要用於文章之中,若出現在頁面有點醜,這時就幸好有 WP Plugin Manager 可以來關閉燈箱效果,只要運用得當,前端後台都頗為好用。

樣式與風格挑選-Contact Form 7 Skins

Contact Form 7 安裝好後,表單本身若沒有寫程式碼下去修飾就會很簡約,簡約到有點陽春,這也是我當初不想用的原因之一,因此這時就可以用 Contact Form 7 Skins 來修飾表單外表。

雖然顏色跟框架選擇有限,但跟之前陽春比起來好太多了,且顏色搭配大多也很好看,只要按一按就能改變,超級方便。

Contact Form 7 與擴充外掛的組合,不用撰寫程式碼也能編輯出美觀又好用的聯絡表單 1
Skins 內建提供的樣式選項

讓版面多元化-Smart Grid-Layout Design for Contact Form 7

顏色改好後,最重要的是表格排版,這時候較要出動最重要的 Smart Grid。

它主要能做到將表格劃分成兩排或是多排,這樣子表単看起來就不會太落落長,也能將選項進行摺疊或是下拉,讓表單可以更簡潔清爽,讓表格整體布局變得更多元,彈性也更大,也是因為它的出現,讓我覺得 Contact Form 7 好用極了。

Contact Form 7 與擴充外掛的組合,不用撰寫程式碼也能編輯出美觀又好用的聯絡表單 2
我直接切成兩排,並在其中一排在切兩排,這樣減省空間也不會讓表單看起來落落長

電子報訂閱扭-Add-on Contact Form 7 – MailPoet 3

如果網站有發送電子報,那麼就可以安裝該電子報的訂閱擴充外掛。就像朋友說的使用 Contact Form 7 的群眾實在太多,因此只要你的電子報不是小眾,例如像是 Mailchimp,都能找到相關的擴充外掛來使用。

Contact Form 7 與擴充外掛的組合,不用撰寫程式碼也能編輯出美觀又好用的聯絡表單 3
表單中的電子報訂閱按紐

阻擋機器人來信-Honeypot for Contact Form 7

贊助商連結
Contact Form 7 與擴充外掛的組合,不用撰寫程式碼也能編輯出美觀又好用的聯絡表單 4
原先還在的加法數字驗證碼

後來找到 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 本身,能將信件傳遞到正確信箱,雖然是很基本的功能,但是這才是重中之重,這應該也是它讓許多使用者所喜愛的主要原因。

透過這次的聯絡表單的再製作,從中挖掘了不少有用的擴充外掛,雖然現在暫時還無法派上用場,但是這些表單給了我許多靈感跟想法,等到之後有需要時再拿來重組一次,當初苦尋不到合適預約外掛的苦惱問題或許就能獲得解決了。

相關文章閱讀推薦

有 433 人閱讀過此文

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top