Contact Form 7:五分鐘内建立網頁表格

更新於 發佈於 閱讀時間約 4 分鐘

Contact Form 7 是個建立網頁表格極簡易及免費的方案,這方案只有一個限制,那就是一定得建立在 WordPress 之上。

如果你並不是用 WordPress 平臺,那你可以暫時跳過這個方案,然後看我提出的其它方案,否則你可以繼續讀下去。

Contact Form 7 是 WordPress 平臺上的插件之一。爲了要達到我們網頁表格的基本需求,我們需要安裝兩個插件。


在發布這篇文章時,Contact Form 7 在 WordPress 上的安裝率為 5百多萬。。。我想,5百多萬用戶的選擇不太可能出錯。。。對吧?


先睹為快



先決條件檢查

  • 基本需求
    一切從基本需求開始,包括最初設計

  • 平臺
    Contact Form 7 僅在 WordPress 平臺上運作。開始前先確認你的網頁平臺,如果你不確定,請向友善的挨踢部門查詢。
  • 電郵
    很多共享網頁托管服務已經提供了基本的電郵。如果你用的是雲端服務,或擁有專用主機,你得先確認你的 SMTP 服務是運作的。什麽?你不曉得什麽是 SMTP 服務?好吧。。。是時候再問一下友善的挨踢部門。。。
  • 少量代碼
    你需要面對少量的 HTML 代碼。如果你對代碼感到不舒適,或面臨代碼是會導致驚恐症發作。。。我只能說,這方案不適合你。
  • 足夠的權限
    如果你到目前爲止還沒被我嚇壞,那我很肯定你對這方案游刃有餘。最後要提醒的是,確保你的權限足以讓你安裝插件。


下載和安裝所需的插件

首先,先下載所需插件,之後再安裝和激活。

raw-image
raw-image
raw-image

設置 Contact Form 7

1. 點擊 “Add New” 建立新的表格

raw-image

2. 跟著以下的例子架設網頁表格

raw-image

3. 你可以直接拷貝和黏貼以下的代碼

<label> Your name
[text* your-name] </label>

<label> Your email
[email* your-email] </label>

<label> Your phone
[tel* tel-536] </label>

<label> Title
[text* your-title] </label>

<label> Your message (optional)
[textarea your-message] </label>

[submit "Submit"]

4. 儲存了之後,轉到 “Mail” 的標簽, 繼續架設電郵設定

raw-image

5. 你可以拷貝和黏貼以下的代碼來作爲電郵的内容

From: [your-name] 
Subject: [your-title]
Email: [your-email]
Phone: [tel-536]

Message Body:
[your-message]

6. 好了,現在可以拷貝此表格的 short code,我們需要把它放到某個頁面去。

raw-image

7. 在 “Page” 的菜單下,建立一個頁面。這頁面將會裝載你剛建立的網頁表格。你可以在頁面的模塊裏選擇 Contact Form 7,然後再選擇你剛建立表格的名字。

raw-image

8. 完成后,你可以隨時預覽和開始測試!

raw-image
CFDB 不需要任何設置,它就這樣神奇的默默運作起來。

試試看

1. 好啦,你建立了網頁表格,也放在頁面上了,現在剛測試了。我們先隨便提交一些資料。

raw-image

2. 資料提交后,你可以馬上檢查你的電郵。如果你要從後臺查詢你剛提交的資料,可以在“Contact Forms” 菜單下,你會找到剛提交的資料就在其中一個表格(假設你有多於一個表格)

raw-image

3. 選擇正確的表格,然後找到你的資料再點擊進去,你會看到你剛提交的資料完完整整就躺在那裏。

raw-image
raw-image



留言
avatar-img
留言分享你的想法!
avatar-img
Victor Tai@lowcode101的沙龍
1會員
6內容數
2023/05/12
AI 圈子裡隨著 Google Bard 公布讓 180 個國家測試後越來越熱鬧。我們此次選了 Google Bard, OpenAI GPT4 和 AI21 Jurassic 來對決,現存說一個笑話開始。
2023/05/12
AI 圈子裡隨著 Google Bard 公布讓 180 個國家測試後越來越熱鬧。我們此次選了 Google Bard, OpenAI GPT4 和 AI21 Jurassic 來對決,現存說一個笑話開始。
2023/05/08
是否在煩惱要如何翻譯圖片裡的文字?尤其是文字以列表的方式呈現?這裡倒有個快速的解決方案,就是把 ChatGPT 與 Excel 一起並用!
2023/05/08
是否在煩惱要如何翻譯圖片裡的文字?尤其是文字以列表的方式呈現?這裡倒有個快速的解決方案,就是把 ChatGPT 與 Excel 一起並用!
2023/04/11
我熱愛電影,尤其是那些充滿科幻元素、展示人工智能的影片。由於人工智能的熱度猶如跑步機上的機器人一樣迅速攀升,我精選了一些具有引人入勝的人工智能概念的電影,讓你不禁懷疑這些電影是否很快就會成為我們的現實。那麼,准備好爆米花,一起深入了解吧! 魔鬼終結者(1984)/ 魔鬼終結者 2 (1991) 魔鬼
Thumbnail
2023/04/11
我熱愛電影,尤其是那些充滿科幻元素、展示人工智能的影片。由於人工智能的熱度猶如跑步機上的機器人一樣迅速攀升,我精選了一些具有引人入勝的人工智能概念的電影,讓你不禁懷疑這些電影是否很快就會成為我們的現實。那麼,准備好爆米花,一起深入了解吧! 魔鬼終結者(1984)/ 魔鬼終結者 2 (1991) 魔鬼
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這邊分三個部分:新增、檢視和寄送郵件給留言者。 新增 底下是HTML的輸入內容的程式碼: <table border="1"> <tr> <td><font size="2">姓名:</font></td> <td><input type="text" size="30"
Thumbnail
這邊分三個部分:新增、檢視和寄送郵件給留言者。 新增 底下是HTML的輸入內容的程式碼: <table border="1"> <tr> <td><font size="2">姓名:</font></td> <td><input type="text" size="30"
Thumbnail
步驟二:表單細節修正 我們延續上一篇EP1,本篇文章要來微調表單上的一些功能,使其更符合操作: 我們發現發文單位、公文類別、會簽單位、審核單位這四個欄位尚未設定正確...
Thumbnail
步驟二:表單細節修正 我們延續上一篇EP1,本篇文章要來微調表單上的一些功能,使其更符合操作: 我們發現發文單位、公文類別、會簽單位、審核單位這四個欄位尚未設定正確...
Thumbnail
你/妳很常要重複註冊同一個產品嗎?也許這個方式會有幫助。
Thumbnail
你/妳很常要重複註冊同一個產品嗎?也許這個方式會有幫助。
Thumbnail
專人審核與寄信作業必備工作術 - 建立名單管理系統一鍵寄發通知信!透過 Airtable 建立方便統整 Email 名單 & 寄發信件的系統,能幫你節省跨 Excel / Google Sheets 跟 Email 系統的切換時間,有效管理名單,還能關聯信件範本庫,一鍵寄發個人化信件,大幅提升效率!
Thumbnail
專人審核與寄信作業必備工作術 - 建立名單管理系統一鍵寄發通知信!透過 Airtable 建立方便統整 Email 名單 & 寄發信件的系統,能幫你節省跨 Excel / Google Sheets 跟 Email 系統的切換時間,有效管理名單,還能關聯信件範本庫,一鍵寄發個人化信件,大幅提升效率!
Thumbnail
這裡我們呈現如何在五分鐘內用 Contact Form 7 搞定網頁表格
Thumbnail
這裡我們呈現如何在五分鐘內用 Contact Form 7 搞定網頁表格
Thumbnail
正在尋找 SeaTable / Airtable 以外的選擇?NocoDB 也許是個不錯的自行安裝的選擇,還是一項開源項目。
Thumbnail
正在尋找 SeaTable / Airtable 以外的選擇?NocoDB 也許是個不錯的自行安裝的選擇,還是一項開源項目。
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
 轉移自 LogDown 原文日期 June 04, 2014 17:47  最近才發現,開了部落格但卻好安靜的原因是:留言系統要另外裝啊!(翻桌 官方推薦的是disqus,要先註冊。 可以用社交帳號這點是方便許多,但總覺得這樣好像在賣身(份)。 不過它拿的只是你的名字和信箱,密碼還是要另外設
Thumbnail
 轉移自 LogDown 原文日期 June 04, 2014 17:47  最近才發現,開了部落格但卻好安靜的原因是:留言系統要另外裝啊!(翻桌 官方推薦的是disqus,要先註冊。 可以用社交帳號這點是方便許多,但總覺得這樣好像在賣身(份)。 不過它拿的只是你的名字和信箱,密碼還是要另外設
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News