如何自定義聯繫表格的樣式 7 以匹配您的網站
已發表: 2018-10-10Contact Form 7 的活躍安裝量超過一百萬，是迄今為止最受歡迎的 WordPress 插件之一。 它的流行可能與其描述背後的真相有很大關係：“簡單但靈活。”
Contact Form 7 允許您使用簡單的 HTML 標記（它為您生成）創建多個聯繫表單。 創建後，每個表單都可以通過在您希望表單出現的位置放置其相應的短代碼來快速部署； 在頁面、帖子或小部件區域。 通過表單提交的消息將發送到插件設置中提供的電子郵件地址，並通過對 CAPTCHA 和 Akismet 的支持來打擊垃圾郵件。
Contact Form 7 非常簡單，似乎任何人都可以有效地使用它。 造型也很簡單。 但也許對某些人來說太簡單了。 默認情況下，Contact Form 7 插件不會設置其表單的樣式。 他們擁有的任何樣式都是 WordPress 主題樣式表中存在的默認樣式的結果。
通常會導致一些非常基本的東西，如下所示：
不幸的是，這種形式雖然確實簡單靈活，但可能不如網站上的其他元素設計得那麼精美。 讓許多其他快樂的用戶尋找具有更多樣式選項的聯繫表 7 的替代方案。 值得慶幸的是，只需要一點 CSS，就不需要替代插件。
在今天的帖子中，我將分享一系列技巧，這些技巧將為使用任何主題的任何人打開各種聯繫表格 7 樣式的可能性。
如何自定義聯繫表格的樣式 7 以匹配您的網站
訂閱我們的 YouTube 頻道
在哪裡編輯您的聯繫表格 7 CSS（以及為什麼）
重要的是，在添加自定義 CSS 時，不要將其添加到 Contact Form 7 或父主題的樣式表中。 一旦主題和/或插件更新，您在那裡所做的任何更改或添加都將被覆蓋。
相反，您需要將下面的 CSS 添加到您的子主題的 CSS 中。 您還可以在 Jetpack 上使用自定義 CSS 功能，或者如果您的主題在其管理面板中為自定義 CSS 提供了一個部分，您也可以使用它。
好的，現在我們知道在哪裡放置我們將要討論的樣式，讓我們開始吧！
如何創建站點範圍的表單樣式
讓我們首先進行一些將應用於整個表單的常規編輯。 我們可以通過使用類選擇器.wpcf7然後在它下面添加樣式來做到這一點。
（我還強烈建議您將我在下面寫的註釋掉的標題放在您的樣式表中，以指示您的聯繫表格 7 樣式的開始位置。）
/* Contact Form 7 Styles
---------------------------------*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
將上述代碼添加到樣式表後，您使用 Contact Form 7 創建的每個表單都將具有您剛剛定義的背景和邊框樣式。 下面是一個例子。
如您所見，存在一些間距問題。 要解決此問題，您需要調整邊框和內部表單元素之間的邊距。 您可以使用以下代碼執行此操作。
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
在我的測試站點上，這導致了以下結果：
注意：由於我們很可能使用不同的主題，這些樣式可能會以略有不同的方式影響您的表單。 這並不意味著此代碼對您不起作用，只是您可能需要稍微調整數字以使事情適合您的網站。
如何創建站點範圍的表單字段樣式
人們在設計 Contact Form 7 樣式時最常見的要求之一是如何調整字段的寬度。 特別是不延伸很遠的消息區域。
下面的代碼會將消息區域擴展到您想要的寬度（調整後）。 我在示例中設置了 95%，因為這在我想像的用例中看起來最好。 您也可以設置它以滿足您的需求——使用百分比或固定像素數。
.wpcf7-textarea {
width: 85%;
}
您也可以通過調整輸入類選擇器來調整其他字段的寬度。
.wpcf7 input {
width: 50%;
}
如果您不想使用相同的條件調整所有輸入字段，您可以通過僅選擇您感興趣的那些來向下鑽取。在下面的示例中，我選擇只更改我的文本字段，以便我的提交按鈕也不受影響。
.wpcf7-text {
width: 50%;
}
完成上述所有更改後，我能夠為您在下面看到的表單設置樣式。
我個人不想改變我的按鈕顏色，但我認為這很可能是另一個常見的願望。 因此，如果您想更改按鈕顏色，可以使用下面的 CSS 進行試驗。
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
有了這些 CSS 位，用 Contact Form 7 創建的每個表單都將看起來像上面的最終圖像。 但是，當您希望一種形式看起來與所有其他形式不同時會發生什麼？
如何設置特定表單的樣式
獲取對特定表單進行樣式編輯所需的特定 CSS ID 可能有點麻煩，但稍加修改是可能的。
您要做的第一件事實際上是將表單短代碼添加到您的網站並進行預覽。 （您會注意到，在該短代碼中，有一個 ID 編號——但這實際上並不是您需要的完整 ID。）
然後，使用 Google Chrome 的檢查元素功能或其他瀏覽器中的類似功能，查看表單的代碼。 使用它，您將找到完整的表單 ID。
就我而言，我的簡碼中的 ID 號是4407 。 完整的 ID 原來是wpcf7-f4407-p4405-o1 。 這意味著我可以通過使用下面的代碼以及與我的站點範圍設置不同的各種標準，對特定表單進行進一步編輯。
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
如何設置特定字段的樣式
您可以對特定字段執行相同的操作。 無需在瀏覽器中跟踪特定的 CSS 類或 ID，您只需將其添加到表單構建器中即可。
當您生成要放置在表單構建器中的標籤時，您會注意到有兩個選項可用於創建 ID、類或兩者。
在這個例子中，我選擇創建一個名為custom-field的類。 如果您執行相同（或類似的操作），您將能夠使用您的新 ID（或類）設置該字段的樣式，如下所示。
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
如何為複選框和徑向按鈕創建自定義表單佈局
默認情況下，複選框和半徑從左到右顯示。
但由於個人偏好或特定用例，從上到下顯示它們可能更可取，您可以使用以下兩個選項之一。
要從上到下和在左側顯示您的複選框或徑向按鈕，請使用它。
.wpcf7-list-item {
display: block;
}
要從上到下和在右側顯示您的複選框和徑向按鈕，請使用它。 還要確保在為此選項生成標籤時選擇“標籤優先”複選框。
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
額外提示：如何刪除字段標題並改用佔位符文本
這個技巧不需要像上面的其他人一樣使用 CSS，而是對 Contact Form 7 表單構建器中使用的標記進行簡單的調整。
有時不需要字段標題，尤其是當您可以在字段中放置佔位符文本來解釋哪些信息屬於該字段時。
如果您的網站是這種情況，那麼您所要做的就是刪除表單構建器中的標題並添加佔位文本，就像我在下面的示例中所做的那樣。
<p></p> <p>[email* your-email placeholder "Email Address"]</p> <p></p> <p>[textarea your-message placeholder "Talk to me"]</p>
結果是一個更乾淨的表格，更少的混亂。
綜上所述
我希望我已經在上面的例子中展示了 Contact Form 7 插件是高度可定制的。 確實，它確實需要一些修補，但對於可能預期的免費插件。
我認為默認情況下缺少樣式選項是該插件對這麼多人如此有效的重要原因。 因此，如果任何想要獲得更多風格的人從中獲得很多價值，就可以花幾分鐘時間投入上述代碼示例之一的版本，這是公平的。
您是否有自己的聯繫表格 7 風格提示？ 你用過的任何收藏夾想要分享嗎？ 在下面的評論中給我們留言！
文章縮略圖來自 Dmitry Lemon5ky // shutterstock.com