在 WordPress 中为您的评论表单赋予更多风格

已发表: 2020-10-06

当您拥有博客并定期在其上撰写文章时，可能会发生的最令人兴奋的事情之一就是收到读者的评论。但要做到这一点，您编写的内容必须有趣，提交评论的表单必须可见且足够吸引访问者填写并提交。

在这篇属于本月测试系列的文章中，我们将尝试通过重新设计来突出我们博客的评论表单，看看它是否比当前版本更好。

与往常一样，我们将使用 A/B 测试技术测试更改。如果您所做的更改是否有效，这是查看您网站访问者的真实数据的最佳方式。

改进 WordPress 评论表单的设计

我们的评论表格非常简单。默认情况下，WordPress 会添加一个字段来输入评论的访问者的网站，但我们认为该字段不会增加任何值。相反，唯一吸引人的是那些想要不惜一切代价获得链接的机器人的垃圾评论。出于这个原因，我们已将其从原始表单中删除。

在下面的比较中，您可以看到我们博客评论表单的原始版本以及我们所做更改的变体。请记住将出现在中心的手柄从一侧滑到另一侧以查看两个版本：

我们基本上对评论表做了三处改动：

我们在标题中添加了几个表情符号，以突出评论区并鼓励访问者写作。现在看来，我们正在挥手鼓励他们用问候和手写的表情符号来写作。人们喜欢表情符号。我们将看看这是否有助于获得更多评论。
我们在填写信息时解释评论存储位置的法律文本使用较小的字体。出于法律原因，它必须存在，但我们不想给它太多相关性。
我们将表单的提交按钮变成醒目的橙色。正如我们之前看到的，颜色很重要。

现在我们已经准备好新设计，我们要做的就是对其进行测试。

要在 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 测试自己完成的，您无需做任何事情。

我们已经进行了大约六周的测试，分析了我们博客的近 20,000 名访问者（一个很好的人口样本）。您可以在以下屏幕截图中看到 A/B 测试的完整结果：

测试收到的转换总数并不惊人。在那段时间，我们的博客收到了 27 条评论（这就是为什么测试结果中有 27 次转化）。

但需要注意的是，重新设计评论表单的变体已经成功地将原始版本的转换次数翻了一番。因此，它是 A/B 测试的获胜选项，具有较高的统计置信度值。

如您所见，只需很少的 CSS 规则就可以实现设计中的微小变化，这会对您网站的结果产生直接影响。我们通过在我们的主题中添加额外的 CSS 规则，在我们的网站上应用了这个变体。

设计是改变我们网站访问者行为的关键。获得比当前设计更好的设计不一定是资源密集型的。在这里，我们已经看到，通过一些简单的 CSS 规则，我们可以做出快速给出结果的更改。

在我们的网站设计中应用更改是我们应该谨慎行事的事情。这就是我们使用 A/B 测试的原因。多亏了这种技术，我们可以检查访问者的真实数据是否有效。否则，我们将不知道我们是否选择了正确的改进路径，或者我们正在倒退。

Jason Leung 在 Unsplash 上的精选图片。