1. Home
  2. »
  3. wp筆記
  4. »
  5. 如何更改contact form 7 文字區域的預設行數

如何更改contact form 7 文字區域的預設行數

contact form 7

contact form 7 是 wordpress 的外掛中的一個聯絡表單外掛,其功能相當不錯,當然在 wp 的一堆外掛中還是有很多滿不錯的聯絡表單外掛可以應用,日後再一一跟大家分享和說明。

今天要筆記的是一個說來簡單的小筆記,使用 contact form 7 的朋友們應該都知道,它的外觀設定並不是那麼的 ok,在這裡就先不說到外觀設定,因為還是可以利用其他外掛做因應,就看其套用的樣式能不能符合網站主的需求。

如何更改 contact form 7 文字區域的預設行數

好 ! 回歸正題,要如何更改文字區域的行數 ? 雖然在前台可以藉由點擊文字區域的右下角斜線部位,滑鼠左鍵點著不放,就可以拉高縮短,但因為預設的文字區域的行數是 10 ( 如果記的沒錯的話 ),一進入頁面就會看到整個表單的高度拉的很高,如果再加上其他輸入欄位的高度,那就真的是太高了 ! 如果您的網站是屬於很精緻的網站就不太適合,所以該如何減少文字區域一開始的行數 ? 我們來看一下下面的程式碼,只要短短幾個字就可以更改預設的行數 :

預設的表單程式碼 : 
<label> 填寫訊息 [textarea your-message ] </label>

修改增添的表單程式碼 : 
<label> 填寫訊息 [textarea your-message 40×2] </label>

我將重點用紅字標註,就是上面這 40 x 2,40 是寬,2 是行數,也就是說如果你想要是 3 行就將 2 改為 3 就可以 !

下次來筆記一下修改其它輸入欄位的大小設定,我們可以藉由修改css來解決,不過這是對 html 和 css 有一定基礎的人做的事,大家有空先學習 html 和 css,一般人對程式或是 html 和 css 不熟悉,還是最好不要亂改的好。不過話又說回來,不去測試和實作就無法知道自己能做到怎樣的地步和境界,所以就大膽的試試看吧,大不了就重新再做過表單,這都是經驗的累積。

以上就是這一次的 wp 筆記,讓我做筆記,好讓大家不忘記,感謝大家 !

 

contact form 7 簡單說明

Contact Form 7 可管理多份聯絡表單,也能透過簡單的標記靈活地自訂表單及郵件內容。表單支援 AJAX 傳送方式、CAPTCHA、Akismet 垃圾留言篩選等功能。

依照預設設定,這個外掛及其程式碼並不會進行以下行為:
以匿蹤方式追蹤使用者。
將任何形式的使用者個人資料寫入安裝外掛的網站的資料庫。
將任何資料傳送至安裝外掛的網站之外的外部伺服器。
使用 Cookie。

contact form 7
contact form 7 網站截圖

補充說明 :

如果用不慣免費的這表單外掛,可以參考 WP From ,這也是一個表單外掛,但功能會更方便好用,目前有免費版本和付費版本,付費的版本自然就有更多的外掛功能可以使用,如果您只是需要一個簡單的表單外掛,那這一個外掛就相當適用了。
但是,是的又是一個但是,若您有使用 elementor 頁面建構器,那就可以減少一個外掛安裝,因為 elementor 頁面建構器有表單元件可以應用,簡單的表單是可以應付自如,可客製調整修改的地方也滿多的。

contact form 7 附加外掛介紹 :

  1. Contact Form CFDB7 – 將表單提交保存到自定義資料庫中,並可以搜尋和匯出。
  2. Contact Form 7 Honeypot – 增加隱藏的假字段來防止垃圾留言。
  3. Contact Form 7 Datepicker – 新增日期選擇器字段。
  4. Contact Form 7 Multi-Step Modal – 支援分步驟的表單。
  5. Contact Form 7 PayPal Extension – 整合 PayPal 支付功能。
  6. Contact Form 7 Dynamic Text Extension – 支援動態文字,根據選項改變顯示內容。
  7. Contact Form 7 Conditional Fields – 根據前面選項顯示或隱藏後面的字段。
  8. Contact Form 7 Math Captcha – 增加簡單計算驗證碼。
  9. Contact Form 7 – MailChimp Extension – 將表單數據同步到 MailChimp。

使用附加外掛可以讓主外掛擴展更多功能,有需要的學友們可以參考看看 !

 

更多 wordpress 教學筆記

 

返回頂端