WordPress Contact Form 7 完整教學

WordPress Contact Form 7 完整教學

介紹

Contact Form 7 是一個WordPress 外掛來辦我們建立表單的。除了基本表單功能, 它還有預防垃圾郵件功能 (CAPTCHA、Akismet 垃圾留言)。 Contact Form 7 也是 WordPress表單 Plugin 最多人使用跟推薦的。Contact Form 還蠻簡單就可以設定起來, 接下來交你如何用在你的 WordPress 網站上。
 

1. 安裝跟啟動

先去安裝外掛

Contact-form 安裝
Contact-form 安裝

Contact Form 啟動
Contact Form 啟動

2. 新增聯絡表單

新增後這裡有範本可以參考。

contact-form-7-新增表單
contact-form-7-新增表單

3. 欄位介紹

  • 文字:填寫文字的欄位,不會超過255字元的就可以使用(適合用於用戶填寫姓名、職稱等)
  • 電子郵件:填寫email的欄位,外掛會幫你判斷用戶是否輸入符合email的格式(適合用於用戶填寫Email)
  • 網址:填寫url網址的欄位(適合用於用戶填寫網址)
  • 電話:填寫電話的欄位,外掛會幫你判斷用戶是否輸入符合電話的格式(適合用於用戶填寫電話)
  • 數值:填寫數字的欄位(適合用於填寫金額等,會變動的數值)
  • 日期:使用此欄位會產生出給你選擇年、月、日的欄位(適合用於需填寫日期,像是預約時間等)
  • 文字區域:填寫文字的欄位,可以超過255字元。(適合用於用戶填寫備註或是產品疑問等)
  • 下拉式選單:提供給用戶選擇使用的欄位(適合用於用戶需要選擇是哪個商品等)
  • 核取方塊:提供給用戶選擇使用的欄位(可複選) (適合用於用戶勾選多個類別時使用)
  • 選項按鈕:提供給用戶選擇使用的欄位(唯一) (適合用於用戶只能選擇一個類別時使用)
  • 接受度:跟核取方塊長得很像但是功能不同,它的功能是用戶需要勾選才能提交表單(適合用於用戶需看完所有文字規則之後勾選使用)
  • 問答題:可建立多個問題並且是固定答案(適合用於用戶需回答一些簡單的問題時使用)
  • reCAPTCHA:驗證碼機制,需串接API才可使用。
  • 檔案:可提供給用戶上傳檔案時使用(適合用於用戶需提供word,pdf等檔案時使用)
  • 送出按鈕:送出表單時必備的按鈕!(一定要使用它不然表單無法送出!)

(這邊內容我是直接copy這裡的-連結)

4. 實際操作 I – 建立表單。

<form>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="form-group">
      <label> Name (required)</label>
      <input type=“text” class=“form-control” />
    </div>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="form-group">
      <label> Email (required)</label>
      <input type=“email” class=“form-control” />
    </div>
  </div>
</div>


<div class="row">
  <div class="col-xs-12 col-sm-12">
    <div class="form-group">
      <label> Message</label>
      <textarea class=“form-control"></textarea>
    </div>
  </div>
</div>
<div class="row center-xs">
  <button class=“btn”>Send</button>
</div>
<form/>

這是一個我實際例子, 我要做一個聯絡我們的表單。 這是 HTML Code 接下來 我用 contact form 7 相對應的代碼取代html。基本上尋找contact form 7 的相對應的代碼然後增加 class 或 placeholder。最後記得把button 也取代掉。

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="form-group">
      <label> Name (required)
      [text* your-name class:form-control] </label>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="form-group">
      <label> Email (required)
      [email* your-email class:form-control] </label>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-xs-12 col-sm-12">
    <div class="form-group">
      <label> Message
      [textarea your-message class:form-control] </label>
    </div>
  </div>
</div>
<div class="row center-xs">
  [submit class:btn "Send"]
</div>

4. 實際操作 II – 設定郵件內容

上一個步驟我們有給我們的field 一個名字。 然後我們在Mail設定就設定我們要寄出的mail要長什麼樣子。

5. 實際操作 III – 放置Contact Form Short Code

現在去聯絡我們頁面 (或你想放的位子), 把剛剛contact form 7的shortcode 複製貼上來。然後再去PHP code裡面寫 WordPress 的相對應的代碼。我這裡我就用<?php the_content(); ?>這樣子就可以了。

Contact Form Short Code

我當時在線上嘗試表單沒有送出成功。 經過跟客服討論 我有安裝一套plugin 叫 Easy WP …所以你也不可以送出可以參考看看。

6. 實際操作 IV- Siteground

7. 其他

Contact Form 7 訊息處理

Contact Form 第三個tab是處理 Messages, 主要是錯誤訊息。 這裡有預設的訊息。如果你不喜歡預設的訊息你可以在這裡改。

資料參考

Contact Form 7 | Just another contact form plugin for WordPress. Simple but flexible.

【WordPress教學】簡單3步驟利用Contact form 7外掛 打造客製化的表單功能

關於作者: Danny Huang

大家好,我是Danny,是位熱愛程式的前端工程師,具有豐富工作與接案經驗。我在這裡會陸續推出一些網頁開發,線上行銷的文章。 如果喜歡這方面的文章可以加入email list。