如何在 WordPress 中設(shè)置聯(lián)系表單 7 的樣式

您想自定義您的 contact form 7 表格并更改其樣式嗎？

Contact Form 7 是 WordPress 最受歡迎的聯(lián)系表單插件之一。然而，最大的缺點(diǎn)是您添加的現(xiàn)成表單看起來(lái)非常普通。

在本文中，我們將向您展示如何在 WordPress 中設(shè)置聯(lián)系表單 7 的樣式。

為什么要設(shè)計(jì)您的聯(lián)系表格 7 表格？

Contact Form 7 是WordPress最受歡迎的聯(lián)系表單插件之一。它可以免費(fèi)使用，并允許您使用短代碼添加 WordPress 表單。

然而，Contact Form 7 的功能非常有限。Contact Form 7 的問(wèn)題之一是表單的樣式過(guò)于簡(jiǎn)單。另外，該插件不提供任何內(nèi)置選項(xiàng)來(lái)更改表單的樣式。

這使得聯(lián)系表單的設(shè)計(jì)與您的網(wǎng)站主題相匹配或者您想要編輯字體和背景顏色以使您的表單脫穎而出變得困難。

如果您想要具有高級(jí)功能的更多可定制表單，那么我們推薦WPForms，它是最適合初學(xué)者的聯(lián)系表單插件。它配備了拖放表單生成器、1200 多個(gè)預(yù)構(gòu)建表單模板以及眾多自定義選項(xiàng)。

也就是說(shuō)，讓我們看看如何在 WordPress 中設(shè)置 Contact Form 7 表單的樣式。

開(kāi)始使用聯(lián)系表 7

首先，您需要在您的網(wǎng)站上安裝并激活Contact Form 7插件。如果您需要幫助，請(qǐng)參閱我們有關(guān)如何安裝 WordPress 插件的指南。

激活后，您可以從 WordPress 儀表板轉(zhuǎn)到“聯(lián)系”?“添加新內(nèi)容” 。

您現(xiàn)在可以編輯網(wǎng)站的表單，并首先輸入表單的標(biāo)題。

該插件將自動(dòng)添加表單的默認(rèn)名稱(chēng)、電子郵件、主題和消息字段。但是，您也可以通過(guò)簡(jiǎn)單地將更多字段拖放到您想要的位置來(lái)添加更多字段。

完成后，不要忘記單擊“保存”按鈕并復(fù)制短代碼。

接下來(lái)要做的是將其添加到您的博客文章或頁(yè)面中。

為此，只需編輯帖子或添加新帖子即可。進(jìn)入WordPress 編輯器后，繼續(xù)單擊頂部的“+”號(hào)，然后添加一個(gè)簡(jiǎn)碼塊。

之后，只需在短代碼塊中輸入您的 Contact Form 7 表單的短代碼即可。它看起來(lái)像這樣：

現(xiàn)在，您準(zhǔn)備好在 WordPress 中自定義您的 Contact Form 7 表單了嗎？

使用自定義 css 在 WordPress 中設(shè)置聯(lián)系表單 7 的樣式

由于 Contact Form 7 沒(méi)有內(nèi)置樣式選項(xiàng)，因此您需要使用CSS來(lái)設(shè)置表單樣式。

Contact Form 7 生成符合標(biāo)準(zhǔn)的表單代碼。表單中的每個(gè)元素都有一個(gè)正確的 ID 和與之關(guān)聯(lián)的 CSS 類(lèi)，如果您了解 CSS，則可以輕松進(jìn)行自定義。

.wpcf7每個(gè) Contact Form 7 表單都使用可用于設(shè)置表單樣式的CSS 類(lèi)。

在此示例中，我們將在輸入字段中使用名為 Lora 的自定義字體，并更改表單的背景顏色。

設(shè)計(jì)多個(gè)聯(lián)系表單 7 表單

如果您使用多個(gè)聯(lián)系表單并希望對(duì)它們進(jìn)行不同的樣式，那么您將需要為每個(gè)表單使用聯(lián)系表單 7 生成的 ID。我們上面使用的 CSS 的問(wèn)題在于，它將應(yīng)用于您網(wǎng)站上的所有 Contact Form 7 表單。

首先，只需打開(kāi)包含要修改的表單的頁(yè)面。接下來(lái)，將鼠標(biāo)移至表單中的第一個(gè)字段，右鍵單擊并選擇“檢查”選項(xiàng)。

瀏覽器屏幕將拆分，您將看到頁(yè)面的源代碼。在源代碼中，您需要找到表單代碼的起始行。

正如您在上面的屏幕截圖中看到的，我們的聯(lián)系表單代碼以以下行開(kāi)頭：

CSS Hero將為您提供一個(gè)簡(jiǎn)單的用戶(hù)界面來(lái)編輯 CSS，而無(wú)需編寫(xiě)任何代碼。

使用該插件，您可以單擊表單上的任何字段、標(biāo)題和其他元素，并編輯背景顏色、字體、邊框、間距等。

自定義表單后，只需單擊底部的“保存并發(fā)布”按鈕即可。

我們希望本文能幫助您了解如何在 WordPress 中設(shè)置 Contact Form 7 表單的樣式。您可能還想查看我們的指南，了解如何創(chuàng)建電子郵件通訊以及適合小型企業(yè)的最佳實(shí)時(shí)聊天軟件。