大多數網站都需要一種方式讓客戶、潛在客戶或普通讀者聯繫。 你可以購買一個內置有自定義聯繫頁面的主題,或者嘗試自己編碼一個聯繫頁面,但這些選項通常要麼成本高,要麼很複雜。 你沒有時間這樣做– 這就給我們帶來了Contact Form 7。
什麼Contact Form 7?
Contact Form 7是一個免費的WordPress外掛程式,你可以用它來為你的網站創建各種聯繫表。 這個外掛程式不僅是免費的,而且你創建的每個聯繫表格的自定義短碼使你可以很容易地將你的聯繫表格添加到任何帖子、頁面或小部件區域。
為什麼選擇Contact Form 7?
所以,現在你知道什麼是Contact Form 7了,你的下一個問題可能是為什麼要用這個外掛程式? 有很多很棒的聯繫表格外掛程式可供選擇,那麼是什麼讓Contact Form 7成為正確的選擇呢?
首先,它是免費的–因為沒有高級版本。 因此,與其他 「免費 」的表單外掛程式相比,你不會看到在主儀錶板上有大量的廣告,這真的很好。 它也是可定製的。 也有一些簡單的方法可以用可用的參數或用一點CSS來調整你的表單。 正如我們提到的,它與非常廣泛的免費和高級主題相容,所以如果你決定以後改變你的主題,你的聯繫表單仍舊可用。
澄清了這一點,讓我們來看看你如何在你的WordPress網站上使用Contact Form 7。
如何開始使用Contact Form 7
安裝很簡單。 只需導航到外掛程式>添加新的,並使用搜尋選項找到Contact Form 7外掛程式。 安裝並啟動該外掛程式。
一旦啟動,你應該在你的WordPress儀錶板上看到一個方便的 「聯繫」功能表項。 點擊它就可以進入你的主要聯繫表格管理頁面。
在預設情況下,也已經有一個 「聯繫表1 」的例子在等著你。 我們建議刪除這個表單,這樣你就可以從頭開始了。
添加新的來創建你的第一個聯繫表格。 當你的聯繫表格打開時,你會看到很多的選項。
首先,你會注意到頁面頂部的一個盒子輸入框。 這是你可以改變你的表格名稱的地方。 我們建議將表單命名為對它的用途有意義的東西–比如你將在哪裡或如何使用它。
現在,我們來看看可用的設置。 我們將逐一流覽這些選項卡。
表格設置
表格選項卡是你實際建立你的聯繫表格的地方。 Contact Form 7使用各種標籤來添加不同的表格部分。 默認的聯繫表格包括姓名、電子郵件、主題、資訊和發送按鈕欄位。
要刪除一個字段,只需從表格中刪除其代碼。
要添加一個字段,只需點擊任何一個可用的標籤,將代碼插入到你的表格部分。 一個彈出視窗會打開,這樣你就可以在插入前確認相關信息。
你可以為文本、電子郵件、URL、電話、號碼、日期、文本區域、下拉功能表、複選框、單選按鈕、接受(如條款)、測驗、檔上傳和提交按鈕生成標籤。
郵件設置
在這裡,你可以對使用者提交聯繫表格時收到的電子郵件進行修改。 默認情況下,該外掛程式將使用你的網站管理員的電子郵件位址,但你可以很容易地將其改為支持電子郵件或多個電子郵件位址。
另外,如果你選擇在你的表單中添加自定義標籤,請確保將生成的短碼塊添加到消息正文中。 如果你不粘貼這段代碼,你就不會收到用戶為該領域提交的答案。
郵件2選項允許你創建一個自動回復,讓使用者知道他們的信息已經被收到。 或者,如果你想向不同的收件者發送不同的電子郵件,也可以使用它。 也許你想收到包含完整聯繫表資訊的電子郵件,但你只想讓你的支持人員收到包含一或兩個字段的電子郵件。 你可以通過多種方式利用這一功能。
信息設置
編輯顯示給用戶的各種已完成(或未完成)任務的資訊。 你可以為諸如成功提交聯繫人、驗證錯誤、不正確的格式等事件創建自定義資訊。
額外設置
最後一個選項卡 「附加設置」允許你啟用各種內置的選項,如只針對訂閱者、演示模式(因此沒有實際發送電子郵件)、接受驗證、資訊存儲選項等。 你可以在他們的文件中查看更多Contact Form 7的附加設置。
一旦你完成編輯,請確保保存你的修改。
使用你的表格
當你的聯繫表格完成並準備使用時,你可以複製表格的短碼插入到一個頁面、帖子、小部件區域等。 短碼可以在聯繫表格創建頁面的頂部找到,就在表格標題下面,一旦你保存(它被高亮顯示)。 它看起來應該是這樣的。
[contact-form-7 id="330" title="Contact Page"]
或者如果你使用的是像WPBakery或Elementor這樣的頁面構建器,你可以簡單地使用相關的聯繫表格7構建器模組來選擇並在頁面上插入你的表格。
Contact Form 7高級提示
現在,如果你願意,你可以使用Contact Form 7,只需一點點的自定義代碼就可以變得非常花哨。 這裡有一些我最喜歡的技巧,你可以用來為你的網站創建一個令人印象深刻的聯繫表格。
佔位元
也許你不希望在你的表單字段上有標題,或者你想添加文本來向使用者展示他們應該在某個特定的檔中輸入什麼。 添加一個佔位元很容易,只需從你的欄位中刪除標籤,然後像這樣在你的代碼末尾的方括弧中添加你喜歡的帶引號的文本。
[text* your-name "Your Name"]
全寬的輸入欄位
我個人並不喜歡預設的文本欄位如此之短。 有兩種方法可以改變一個文本欄位的寬度。 第一個方法是簡單地將你想要的字元長度寬度添加到表單部分的該欄位的代碼中。 所以,如果你想要一個可以容納300個字元的全寬字段,就像這樣在300後面加上一個反斜杠。
[text* your-name 300/ "Your Name"]
第二個方法,你需要在你的CSS樣式表中添加以下代碼。
input.wpcf7-text { width: 100%; }
但這將影響到你整個WordPress安裝中的所有聯繫表7的文本字段。
如果你使用WPBakery頁面生成器,你可以選擇解決這個問題,在一個特定的帖子或頁面上針對一個特定的行,這樣就只有一個單獨的聯繫表的樣式。 首先點擊該行並添加一個自定義的行ID。 然後保存
接下來點擊你的文章或頁面的主要內容區上方的齒輪圖示,然後輸入#YOUR-ROW-ID,後面是上面提到的CSS代碼。
欄位並列
另一個巧妙的技巧是將你的欄位並排添加。 我認為這可以使聯繫表保持超級乾淨和專業。 只需要給你的欄位加上一些代碼
<p style="width:49%;margin-right:2%">[text* your-name "Your Name"]</p>
<p style="width:49%">[email* your-email "Your Email"]</p>
<p>[textarea your-message]</p>
<p>[submit "Submit Form"]</p>