iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
WordPress

關於WordPress的二三事系列 第 11

[Day 11] 添加表單設定

  • 分享至 

  • xImage
  •  

部落格最不可缺少的就是與讀者作互動啦!這時候就很適合設計一個表單讓讀者寫下他們的感想和評論意見,
今天就來介紹一下 WPForms 表單設計外掛囉!

表單是一個網站不可缺少的一部分,不管你今天是部落格還是購物網站、形象網站等,都需要表單來做為一個與互動者的互動窗口,表單可以是一個評論區、一筆訂單或是一個統計的調查。透過 WPForms 都可以輕鬆幫你達成,所以為甚麼要推薦使用WPForms呢?
1.WPForms採用拖拉區塊來設計表單,操作簡單上手。
2.WPForms提供多種版型直接套用。
3.可以自動化通知是否有人填寫表單,不需要一筆一筆每天查看。


1.下載WPForms和設定

  • 到安裝外掛的地方搜尋 WPForms 並安裝啟用。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852fE6lsUjxZi.png

  • 進入WPForms裡面後,會看到它提供給妳很多類型的表單模板,我們可以先選擇 「Simple Concant Form」來建立我們的第一個表單。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852sPuscxwZT8.png

  • 我們可以透過拖拉的方式把我們想要的區塊種類加入表單裡,選取想要的設計拖拉到我們想要插入的位置即可。
    https://ithelp.ithome.com.tw/upload/images/20230920/201628521bXwQc09Rj.png

  • 點擊區塊就可以在這個欄位裡改這個區塊的名稱,像我就把這個點選的按鈕改成文章滿意度的選項和中文。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852t7WVvsoHPA.png
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852gxhNkMKUBW.png

  • 這是我們表單設計完的初模樣!(記得按 Save 儲存喔!)
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852gzk7XVNfRt.png

  • 在「 Settings 」的「 General 」裡可以改動這個表單的名稱,在之後加入網頁時可以更清楚辨認這是哪個區域和功能的表單。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852oI1HChqEqN.png

-在「Confimations」裡可以把文章的固定回覆設定改為中文。
https://ithelp.ithome.com.tw/upload/images/20230920/20162852CFGtyUWfRH.png

https://ithelp.ithome.com.tw/upload/images/20230920/20162852LrcaubxLiL.png

將表單加入到網頁中

  • 要把表單加入到網頁中,我們必須先把 WPForms 的表單加入到頁面裡才能最終呈現在網頁上,所以回到WordPress的後台中的「新增頁面」裡。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852Bit3B62xow.png

  • 點選旁邊的「+」按鈕找到 WPForms 加入。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852OzAKvvsSP8.png

  • 選擇我們剛剛建立好的文章表單。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852OBkjvhQB1k.png

  • 加入表單後會大致呈現這樣。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852o1xhtXpkCM.png

  • 如果覺得這個頁面太單調,可以在旁邊中加入圖片讓這個頁面豐富一點。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852NYcxUhemfh.png

  • 點擊預覽可以先看一下最後呈現出來的畫面如何,都完成後按「發佈」即可。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852tQiCuUCSTf.png

  • 如果想要讓這個表單呈現在最上方的選單裡,我們也可以像前幾天學到的新增選單的方式把他加入。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852mfHfObdH5T.png

  • 可以在「最新發佈」裡找到剛剛熱騰騰出爐的「文章表單」,按「新增至選單」把它加到選單中。
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852poGlPy3hGt.png

  • 會看到他出現在我們選單的最後一列。
    https://ithelp.ithome.com.tw/upload/images/20230920/201628526VSzRmNkRs.png

  • 最後儲存完選單後就可以到網站裡去看一下,可以看到這樣就成功把聯絡表單加入到選單裡囉!
    https://ithelp.ithome.com.tw/upload/images/20230920/20162852PiNaR1AmCs.png


謝謝大家看到這邊/images/emoticon/emoticon07.gif
明天繼續囉!
倒數19天


上一篇
[Day 10] 保護 WordPress 2.0! Jetpack介紹
下一篇
[Day 12] 了解什麼是 SEO ?
系列文
關於WordPress的二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言