WordPress Contact Form 7 完整教學

24 6 月, 2019

wordpress, 文章

標籤: contact form

No comments

最後更新日期: 2023-03-28

內容目錄

介紹

Contact Form 7 是一個 WordPress 外掛，用於建立網站表單，除了基本表單功能，還有防止垃圾郵件的功能 (CAPTCHA、Akismet 垃圾留言)。Contact Form 7 也是 WordPress表單 Plugin 最多人使用和推薦的。Contact Form 7 設定起來很簡單，接下來將介紹如何在 WordPress 網站上使用它。

1. 安裝跟啟動

安裝 Contact Form 7
- 前往 WordPress 後台 > 插件 > 新增外掛，搜尋 Contact Form 7，安裝即可。
啟動 Contact Form 7
- 前往 WordPress 後台 > 插件，啟用 Contact Form 7。

2. 新增聯絡表單

新增表單
- 在 WordPress 後台左側選單，點選「聯絡表單」，新增表單。
範本參考
- Contact Form 7 提供多種表單範本，可供參考使用。

3. 欄位介紹

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