跳至主要內容

5-3 聯絡表單製作 – Contact Form7

最後更新日期: 2023 年 2 月 14 日

不論是公司的官方網站或是個人的網站,我們都會透過連絡表單來讓網站訪客留下資訊,這些資訊可能是單純的留個言、問個問題,或是合作聯繫這類的用途都很常見。所以我們這個單元要來做製作網頁表單。這篇文章會介紹幾種不同的聯絡表單製作方式,可以評估看看自己適合哪一種作法。

Contact form 7

那第一個是在 WordPress 上大家最推薦的做法,安裝 Contact form 7 外掛。

那跟 Contact form 7 齊名的表單外掛還有另外一個,是有一隻熊的外掛。這個做表單操作起來相對直觀,因為他可以用拖曳的方式來排版。不過他真的有點貴,主要核心功能幾乎都要付費,所以如果你有預算的話再考慮,我們今天就先介紹免費的 Contact form 7。

這個外掛在熱門排行長年位居第一,因為他使用上相對輕量的,功能也相對簡單好上手,所以很多人推薦。

我們可以自由定義表單的選項、一些送出表單後的設定。

也可以自行用 CSS 語法去調整,不過這可能會比較適合懂一點程式的同學來做。

當我們設定好後,可以將這個表單的短代碼直接貼到 這個網站的文章、頁面或文字小工具中,也就是你想要讓表單出現的地方。

第三方

有些時候,我們為了使用較完整的表單設計與回覆管理,所以也可能選用第三方表單服務,例如:SurveyCake 或 Google 表單。那該怎麼做呢?我們可以透過嵌入 HTML 的方式,直接在 WordPress 網頁上新增 code 元件。

Google 表單

我們在傳送的時候,可以使用 嵌入 HTML ,複製程式碼。

SurveryCake

我們可以在發布問卷的時候,選用 嵌入碼,複製程式碼。

我們回到 WordPress 的編輯器,區塊選用 自訂 HTML,貼上之後就會直接顯示了。

這幾種製作網頁表單,都是很常見的方法,各有優缺點,就看你當下的需求囉!

分類:WordPress 架站教學

搶先發佈留言

發佈留言

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

由 Compete Themes 設計的 Author 佈景主題
error: 尊重智慧財產權,請不要隨意複製使用文章喔