在 WordPress 中為您的評論表單賦予更多風格

當您擁有博客並定期在其上撰寫文章時，可能會發生的最令人興奮的事情之一就是收到讀者的評論。 但要做到這一點，您編寫的內容必須有趣，提交評論的表單必須可見且足夠吸引訪問者填寫並提交。

在這篇屬於本月測試系列的文章中，我們將嘗試通過重新設計來突出我們博客的評論表單，看看它是否比當前版本更好。

與往常一樣，我們將使用 A/B 測試技術測試更改。 如果您所做的更改是否有效，這是查看您網站訪問者的真實數據的最佳方式。

改進 WordPress 評論表單的設計

我們的評論表格非常簡單。 默認情況下，WordPress 會添加一個字段來輸入評論的訪問者的網站，但我們認為該字段不會增加任何值。 相反，唯一吸引人的是那些想要不惜一切代價獲得鏈接的機器人的垃圾評論。 出於這個原因，我們已將其從原始表單中刪除。

在下面的比較中，您可以看到我們博客評論表單的原始版本以及我們所做更改的變體。 請記住將出現在中心的手柄從一側滑到另一側以查看兩個版本：

我們基本上對評論表做了三處改動：

1. 我們在標題中添加了幾個表情符號，以突出評論區並鼓勵訪問者寫作。 現在看來，我們正在揮手鼓勵他們用問候和手寫的表情符號來寫作。 人們喜歡表情符號。 我們將看看這是否有助於獲得更多評論。
2. 我們在填寫信息時解釋評論存儲位置的法律文本使用較小的字體。 出於法律原因，它必須存在，但我們不想給它太多相關性。
3. 我們將表單的提交按鈕變成醒目的橙色。 正如我們之前看到的，顏色很重要。

現在我們已經準備好新設計，我們要做的就是對其進行測試。

創建 CSS 樣式的 A/B 測試

要在 WordPress 中以我們博客的評論形式測試這種設計更改，最簡單的方法是使用 CSS 規則的 A/B 測試。 我們網站的版本 A 是原始表單，而版本 B 將包含額外的 CSS 規則，以實現我們之前預期的表單設計的三個變化。

通過 Nelio A/B 測試，我們創建了一個新的 CSS 的 A/B 測試。 下圖顯示了此類測試的編輯屏幕：

我們將測試命名為（在我們的示例中為“突出顯示評論表單”）和變體（“重新設計的評論表單”）。 我們還可以在右側邊欄的相應字段中為測試添加描述。 在上一個屏幕截圖中，您可以看到我們添加的描述，它可以作為將來查看測試的任何用戶的參考。

我們還將測試範圍縮小到包含https://neliosoftware.com/blog/的 URL，以便測試僅適用於我們博客中的帖子。

作為一種轉換操作，我們已經建立了對錶單提交按鈕的點擊。 每次訪問者單擊該按鈕時，我們都會在測試中計算訪問者正在查看的變體的一次轉化。

在完成之前，我們必須去編輯測試的變體 B。 我們將鼠標懸停在此變體上，將出現編輯它的選項。 單擊它後，將打開一個帶有預覽的 CSS 編輯器，如以下屏幕截圖所示：

如您所見，在左側邊欄中，我們有 CSS 編輯器，您可以在其中編寫特定規則，以對我們之前看到的設計進行更改。 此外，您可以在右側瀏覽您的網站以預覽這些更改的結果。 只需要六個簡單的 CSS 規則就可以重新設計我們的評論表單。

完成後，我們保存並返回 A/B 測試編輯器啟動它。 現在我們只等待訪問者訪問我們的帖子。 每個訪問者都將看到表單的原始版本或重新設計的版本。 這是由 Nelio A/B 測試自己完成的，您無需做任何事情。

分析 A/B 測試結果

我們已經進行了大約六週的測試，分析了我們博客的近 20,000 名訪問者（一個很好的人口樣本）。 您可以在以下屏幕截圖中看到 A/B 測試的完整結果：

測試收到的轉換總數並不驚人。 在那段時間，我們的博客收到了 27 條評論（這就是為什麼測試結果中有 27 次轉化）。

但需要注意的是，重新設計評論表單的變體已經成功地將原始版本的轉換次數翻了一番。 因此，它是 A/B 測試的獲勝選項，具有較高的統計置信度值。

如您所見，只需很少的 CSS 規則就可以實現設計中的微小變化，這會對您網站的結果產生直接影響。 我們通過在我們的主題中添加額外的 CSS 規則，在我們的網站上應用了這個變體。

更精細的設計鼓勵互動

設計是改變我們網站訪問者行為的關鍵。 獲得比當前設計更好的設計不一定是資源密集型的。 在這裡，我們已經看到，通過一些簡單的 CSS 規則，我們可以做出快速給出結果的更改。

在我們的網站設計中應用更改是我們應該謹慎行事的事情。 這就是我們使用 A/B 測試的原因。 多虧了這種技術，我們可以檢查訪問者的真實數據是否有效。 否則，我們將不知道我們是否選擇了正確的改進路徑，或者我們正在倒退。

Jason Leung 在 Unsplash 上的精選圖片。