午夜理论片yy4080私人影院_妓女网妓女视频在线观看_亚洲爆乳精品无码AAA片

如何設置聯系表單的樣式？Contact Form 7 不提供任何樣式自定義。編輯 CSS 樣式表是設置聯系表單樣式的最佳方法。在本文中，我將向您展示設置聯系表單樣式的一些重要步驟。

設置聯系表單字段的樣式

讓我們看看如何為聯系表單中的各個字段設置樣式。輸入字段有幾種類型。最常見的字段是單行文本輸入字段，因此讓我們為其添加樣式規則：

input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
此選擇器匹配所有屬性具有精確值input的元素（即單行文本輸入字段）。此外，此樣式規則具有三個屬性，指定白色為背景顏色、黑色為前景（文本）顏色以及 50% 為字段寬度。typetext

您可能希望將此樣式規則應用于其他類型的字段。讓我們為電子郵件地址輸入字段和多行文本輸入區域添加選擇器：

input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
現在，此樣式已應用于您網站的每個部分。您可能希望將其限制在聯系表單上。Contact Form 7 的表單有一個帶有類的包裝器元素wpcf7。您可以通過添加祖先選擇器來限制目標的范圍：

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}

您可能只想設置特定字段的樣式。首先，在要設置樣式的字段的表單標簽中添加id或選項：class

[文本 text-123 id:非常特殊字段]
然后使用 id 或 class 添加樣式規則：

#very-special-field
{
color: #f00;
border: 1px solid #f00;
}

為整個聯系表單設置樣式聯系表單整體樣式
正如我之前提到的，聯系表單的頂級元素具有wpcf7類。要設置整個聯系表單的樣式，請為類選擇器添加樣式規則：

.wpcf7
{
background-color: #f7f7f7;
border: 2px solid #0f0;
}
此樣式規則為您的聯系表單提供了淺灰色背景和綠色邊框。

響應消息樣式響應消息樣式

聯系表單底部的響應消息默認具有該類wpcf7-response-output，因此您可以將樣式規則應用于此類來設置響應消息的樣式。

要根據聯系表單的狀態決定樣式，請參閱form元素的class屬性。它應該有一個反映當前狀態的類。可能的值包括：init、sent、failed、aborted、spam、invalid或unaccepted。

有關樣式的示例，請參閱 Contact Form 7 5.2.2 應用于響應消息的以下默認樣式規則：

.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output {
display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}

樣式驗證錯誤消息樣式驗證錯誤消息

當字段包含無效值時，字段下方會顯示驗證錯誤消息。由于驗證錯誤消息的元素具有類wpcf7-not-valid-tip，因此您可以使用該類來設置驗證錯誤消息的樣式。

Contact Form 7 5.2.2 默認應用以下樣式規則：

.wpcf7-not-valid-tip {
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
}

（來源：Hoan外貿建站）

以上內容屬作者個人觀點，不代表雨果跨境立場！本文經原作者授權轉載，轉載需經原作者授權同意。?

如何美化Contact Form 7表單（包含css代碼）

設置聯系表單字段的樣式

響應消息樣式響應消息樣式