如何在WordPress中為Contact Form 7表單設置樣式


Contact Form 7擁有超過一百萬的活躍用戶,是WordPress最受歡迎的聯繫人表格插件之一。 他們最大的缺點是您添加的開箱即用的外觀非常樸素。 值得慶幸的是,可以在WordPress主題中使用CSS輕鬆設置Contact Form 7的樣式。 在本文中,我們將向您展示如何在WordPress中設置聯繫表單7表單的樣式。

注意: 我們不建議再聯繫Contact Form 7插件。 相反,我們建議使用WPForms,它是對初學者最友好的聯繫表單插件。 您也可以免費下載WPForms Lite。

我們提供了有關如何在WordPress中創建聯繫表單的分步指南。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

入門

我們假設您已經安裝了Contact Form 7插件並創建了您的第一個聯繫表。 下一步是複制聯繫人表單的簡碼,然後將其粘貼到您希望表單出現的WordPress帖子或頁面中。

為了本文的方便,我們使用了默認的聯繫表並將其添加到WordPress頁面中。 這就是聯繫表單在我們測試站點上的外觀。

使用默認WordPress主題的WordPress網站上的默認聯繫表7表單

如您所見,聯繫表單從WordPress主題繼承了一些表單樣式。 除此之外,這是非常基本的。

我們將使用CSS設計Contact Form 7表單的樣式。 所有CSS都進入主題或子主題的樣式表。

在WordPress中設置聯繫表單7表單的樣式

Contact Form 7會為表單生成一個非常有用且符合標準的代碼。 表單中的每個元素都有一個正確的ID和與之關聯的CSS類。

每個聯繫表單都使用CSS類 .wpcf7 您可以使用它來設置表單樣式。

在此示例中,我們在輸入字段中使用Google字體Lora。 了解如何在WordPress中添加Google字體。

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif; 
font-style:italic;    
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

這是應用此CSS後我們的聯繫表單的外觀。

在WordPress中使用CSS設置聯繫表單7表單的樣式

設置多個聯繫人表格7表格的樣式

我們上面使用的CSS的問題在於它將被應用於您網站上的所有Contact Form 7表單。 如果您正在使用多個聯繫表單,並且希望使用不同的樣式,那麼您將需要為每個表單使用聯繫表單7生成的ID。

只需打開一個頁面,其中包含您要修改的表單。 將鼠標移到表單的第一個字段,右鍵單擊並選擇“檢查元素”。 瀏覽器屏幕將拆分,您將看到頁面的源代碼。 在源代碼中,您需要找到表單代碼的起始行。

查找您的聯繫表單的元素ID

如您在上面的屏幕截圖中所見,我們的聯繫表代碼以以下行開頭:

id屬性是聯繫表單7為該特定表單生成的唯一標識符。 它是表單ID和添加此表單的帖子ID的組合。

我們將在CSS中使用此ID來設置聯繫表單的樣式。 我們將在第一個CSS片段中將.wpcf7替換為 #wpcf7-f201-p203-o1

div#wpcf7-f201-p203-o1{ 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif; 
font-style:italic;    
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

使用CSS Hero設置聯繫表單7表單的樣式

許多WordPress初學者沒有編寫CSS的經驗,他們不想花時間學習CSS。 幸運的是,對於初學者來說,有一個很棒的解決方案,它不僅使您可以設置聯繫表單的樣式,還可以使您的WordPress網站的各個方面幾乎都具有樣式。

只需安裝並激活CSS Hero插件,然後轉到包含表單的頁面即可。 單擊CSS Hero工具欄,然後單擊要設置樣式的元素。 CSS Hero將為您提供簡單的用戶界面,無需編寫任何代碼即可編輯CSS。

使用CSS Hero設置聯繫表單7表單的樣式

請參閱我們對CSS Hero的完整評論,以及如何使用它在WordPress網站上設置樣式。 您可以使用CSS Hero優惠券代碼 初學者 獲得獨家34%的折扣。

這就是我們希望本文能幫助您學習如何在WordPress中設置Contact Form 7表單樣式的全部。 您可能還想查看有關如何在WordPress中添加聯繫人表單彈出窗口的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。