如何以簡單的方式自定義您的聯繫表 7 樣式

聯繫表格是每個網站的一個非常重要的元素。 我們使用它們來收集和共享各種類型的信息，因此必須注意它們的外觀與我們網站的其他部分一樣好。 過於簡單的聯繫表格，風格看起來不屬於頁面，無法為您的用戶灌輸信任感，並且在他們想要採取的時候失去您的觀眾是很遺憾的更進一步，將他們的一些數據留在您的聯繫表格中。

創建聯繫表格的一種非常流行的方法是使用聯繫表格 7 插件，這是一個實用且易於使用的工具，通常免費包含在許多 WordPress 主題中，可讓您輕鬆創建各種聯繫表格。 這個插件涵蓋了創建聯繫表單的所有技術方面——要設置它的樣式，您需要額外的技能或其他插件。

在本文中，我們將向您展示如何使用免費工具輕鬆設置聯繫表單以匹配您的網站設計。

請繼續關注以了解更多信息：

• 使用 Elementor 的 Qi 插件來樣式化您的聯繫表格
• 設置聯繫表格樣式

使用 Elementor 的 Qi 插件來樣式化您的聯繫表格

適用於 Elementor 的 Qi Addons是一個免費的、功能豐富的插件，帶有 60 個小部件，並包括一個專門為幫助您對錶單進行樣式化而創建的 Contact Form 7 小部件。 該插件需要零編碼知識，從字面上看，任何人都可以舒適地使用它。 它沒有為您提供創建聯繫表格的選項，但如果您使用聯繫表格 7 插件，您將能夠使用 Qi 自定義和重新設計您的表格，使其與您的網站風格完美匹配。

適用於 Elementor 的 Qi 插件易於安裝和配置，其過程與任何其他插件幾乎相同。

安裝後，轉到要設置樣式的聯繫表單所在的頁面，然後選擇在 Elementor 中對其進行編輯。

然後在左側菜單的搜索字段中鍵入 Contact Form 7以查找 Contact Form 7 小部件。

現在，當您獲得它時，單擊它並將鼠標懸停在您希望聯繫表單所在的位置上。

您以這種方式添加的表單是您使用 Contact Form 7 插件創建的表單，此小部件僅用於幫助您設置表單樣式，您無法使用它創建表單。 因此，現在您已將聯繫表單放置在您想要的位置，您可以在左側菜單中看到聯繫表單 7 小部件設置。

菜單中的第一個選項卡為您提供了選擇要在頁面上顯示哪種類型的聯繫表的選項。 我們可以在三個選項之間進行選擇——聯繫表格 1、時事通訊和聯繫我們，當然，您可以選擇之前為您的網站創建的任何表格。 現在讓我們向您展示我們如何在我們的網站上自定義“聯繫我們”表單。

設置聯繫表格樣式

要打開表單樣式選項，請單擊樣式選項卡。

第一個選項是標籤排版，您可以在其中設置字體、字體大小、標籤單詞之間的間距、字體樣式、單詞中字母之間的間距，最棒的是您可以看到所有的變化立即生活，這樣你就不會盲目地做任何事情。

在下圖中，您可以準確地看到我們的選擇如何反映在標籤排版上。

下一個選項是指標籤顏色。

您可以根據需要創建自己的陰影。 我們為標籤選擇深藍色，因為它與頁面的背景顏色非常吻合。

現在，當您都設置好標籤樣式後，接下來的設置是指輸入樣式。

您在這裡也將有類似的選項——您可以選擇輸入排版字體樣式、大小和顏色。 如果您不希望它默認為白色，您還可以設置輸入字段的背景顏色。 您還可以在此處找到用於調整輸入字段邊框樣式的設置，您可以在實線、虛線、凹槽、點線、雙線或無線之間進行選擇，並且您可以針對每個選項進行額外調整。

您還可以在輸入字段處於活動狀態時設置不同的樣式。 您可以使用所有相同的選項，但僅當輸入字段處於活動狀態時才會應用。

下一個設置參考複選框樣式。 這個微小的元素在聯繫表格中非常重要，它應該看起來整潔且易於訪問，因為這是您為網站用戶提供某種選擇的步驟。

使用 Qi，您將輕鬆使此元素看起來完美。 您可以設置複選框輸入大小，您可以在兩個複選框之間以及復選框和其他輸入字段之間留出或多或少的空間。 您可以在下面的照片中清楚地看到我們的選擇在這種情況下如何影響聯繫表：

下一個重要的設置是按鈕樣式設置。

您可以更改按鈕背景的顏色，將按鈕周圍的邊框設置為不同的顏色和样式（實線、虛線或虛線）。 您還可以通過在按鈕顏色選項中選擇所需的顏色來更改按鈕中文本的顏色。 所有更改都立即可見，因此您可以輕鬆了解哪些設置引用了聯繫表單的哪個元素。

如果您希望按鈕的樣式在懸停時更改，請單擊“活動”選項卡並調整設置——您可以調整按鈕懸停顏色、按鈕懸停背景顏色、按鈕懸停邊框顏色等。

當您對聯繫表單的外觀感到滿意時，您現在可以通過打開“間距樣式”選項卡中的設置來調整間距。 您可以在此處調整聯繫表單的每個元素的間距。

全局樣式設置是指聯繫表單的對齊方式。 您可以選擇左對齊、居中對齊和右對齊。

錯誤樣式設置允許您控制當有人未在表單中鍵入正確數據時顯示的錯誤消息的樣式。 您可以輕鬆設置錯誤消息的位置、排版和顏色。

響應樣式設置允許您微調插入到聯繫表單中的響應的詳細信息。 您可以控製字體、字體顏色、設置響應填充和響應邊距以及邊框類型。

這是有人發送消息後我們的表單的樣子：

而且，就像這樣，您的頁面上有一個優雅的聯繫表格，可以為您工作。

把它包起來

適用於 Elementor 的 Qi Addons 的優點在於，您可以實時查看所做的所有更改，以便您可以快速瀏覽不同的選項並學習如何直觀地使用它們。 儘管添加聯繫表格並不是一項特別有創意的任務，但即使在這種情況下，此插件也可以讓您發揮創意。 您的聯繫表單的外觀會極大地影響用戶對您的看法，如果您也設法在該部門提供相同的標準，這將為您的網站、品牌和業務帶來巨大的優勢。

我們希望這篇文章對您有所幫助。 如果您喜歡它，請隨時查看其中的一些文章！

• 值得擁有的最佳 WordPress 按鈕插件
• 4種創建WordPress按鈕的簡單方法
• 按鈕設計技巧：如何獲得訪問者的點擊