• Home
  • wp筆記
  • 如何更改contact form 7 文字區域的預設行數

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

contact form 7

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

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

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

好 ! 回歸正題,要如何更改文字區域的行數 ? 雖然在前台可以藉由點擊文字區域的右下角斜線部位,滑鼠左鍵點著不放,就可以拉高縮短,但因為 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 表單外掛,可以參考 WP From ,這也是一個表單外掛,但功能會更方便好用,目前有免費版本和付費版本,付費的版本自然就有更多的外掛功能可以使用,如果您只是需要一個簡單的表單外掛,那這一個外掛就相當適用了。
但是,是的又是一個但是,若您有使用 elementor 頁面建構器,那就可以減少一個外掛安裝,因為elementor 頁面建構器有表單元件可以應用,簡單的表單是可以應付自如,可客製調整修改的地方也滿多的

 

更多 wordpress 教學筆記

 

回到頂端