8 个漂亮的联系表单示例 + 如何将它们添加到您的网站

确定联系表单设计的五个技巧

在我们进入真正的联系表单示例之前，让我们快速绕道而行，谈谈什么是一个很好的联系表单。 在我们讨论每个联系表单示例在下一节中做得好的地方时，这个绕道将奠定基础。

您很可能有一个联系表格，因为您希望人们填写它。 那么如何让更多人使用它呢？ 以下是一些最佳实践……

1. 清楚地传达您的表格的用途

如果您有一个繁忙的业务或网站，您可能有多个用于不同用途的联系表格。 例如，它可以是：

• 销售查询表

• 客户支持表格

• 在线订单

• 回电申请表

• 等等。

有两种基本方法可以处理此问题，您将在下面的实际联系表单示例中看到这两种方法：

1. 单独的表格。 为每个用例创建单独的表单并添加文本以明确每个表单的作用。

2. 一个下拉字段。 在表单顶部添加一个下拉字段，列出不同的用例并自动将您的联系表单路由到正确的位置。

无论哪种方式，请使用您的表单标签和周围的文本，让您的访问者完全清楚每个联系表单的目的。

2. 限制表单长度以获得更多转换（但不要忘记质量）

在所有条件相同的情况下，数据似乎表明更长的联系表格意味着更少的提交。

例如，HubSpot 分析了超过 40,000 个登录页面，并注意到转化率与表单字段数量之间存在明显的相关性。

峰值转化率在三个字段左右。 转化率稳步下降，直到八个表单字段，然后变平：

来源

更有趣的是，Marketo 测试了三种形式，结果与 HubSpot 相似：

• 5 个字段 — 13.4% 的转化率

• 7 个字段 — 12.0% 的转化率

• 9 个字段 — 10.0% 的转化率

当然，仅仅获得更多的联系表单提交可能不是您的真正目标，因此这并不像将表单上的字段数量减少到最低限度那么简单。

例如，虽然您可能会通过减少字段获得更多提交，但这些提交的质量可能不那么高，因为进入门槛很低。

总的来说，一个好的经验法则是消除所有不必要的字段，但不要仅仅为了缩短表单而消除收集重要信息的字段，特别是如果这些信息有助于限定您的潜在客户。

3.使用智能微文解释字段

如果您的联系表单不仅仅包含标准的“姓名、电子邮件、消息”字段，您就有可能让访问者感到困惑。

例如，如果您有一个“预算”字段，则可能不清楚该预算的用途。 是针对整个项目吗？ 它只是针对特定部分吗？

为避免此类混淆，您可以在联系表格中添加“缩微文案”。

Microcopy 基本上是伴随表单字段的小型解释文本，使它们更清晰。 例如，查看下面的 Payments volume 字段（稍后您也会看到此示例）：

4. 尝试不同的格式

当大多数人想到联系表单时，他们会想到您在大多数网站上看到的基本嵌入表单。 但是，如果您想让人们更轻松地与您取得联系，有时需要尝试不同的显示方法，例如弹出窗口或通知栏。

例如，在您的网站一侧有一个浮动的联系按钮对于支持联系表单来说非常有用。 它使用户在遇到问题时立即与您联系非常容易，而无需他们四处搜索您的联系页面：

5. 告诉人们接下来的步骤并设定期望

一旦人们点击提交，您的联系表单设计就没有完成！

为了提供更好的用户体验，您需要准确地告诉人们接下来会发生什么以及需要多长时间。 例如…

• 您会回复所有查询还是仅回复部分查询？

• 你需要多长时间回复？

• 您会通过电子邮件或其他方式回复吗？

如果您设定明确的期望，您的访问者就不会想知道发生了什么以及您的表单是否有效。

来自真实网站的八个很棒的联系表单示例

现在您已经了解了最佳实践，让我们看看一些现实世界的联系表单设计，以激发您自己的灵感并向您展示这些最佳实践。

1. 条纹

Stripe 的销售联系表是一个很好的例子，说明有时收集一些额外的信息可以使您的联系表产生更多合格的潜在客户（即使它可能会稍微降低基线转化率）。

除了标准信息字段之外，Stripe 还添加了 Payments volume 字段，以便他们可以更好地了解每个潜在客户的潜在质量。

除此之外，还有一些其他不错的设计选择，包括：

• 社会证明——侧面的那些标志通过显示所有使用 Stripe 的成功企业来增加社会证明。

• 缩微——术语“付款量”可能有点令人困惑，因此 Stripe 添加了一些有用的缩微，解释了如何填写该字段。

• 目的——Stripe 非常清楚地表明此表格仅用于销售查询。 这可确保他们不会让人们尝试将其用于支持或其他非销售用途。

2.获取网站控制

在 Getsitecontrol，我们处理联系表单设计的方式略有不同。

我们没有创建访问者必须导航到的专用“联系我们”页面，而是简单地包含一个联系我们链接，该链接会在那里打开一个弹出窗口，然后无需重新加载页面。

这对人们来说真的很方便，因为他们可以……

• 从网站上的任何页面访问我们的联系表格，

• 发送消息而不打断他们正在做的其他事情（比如阅读这篇博文！）。

Getsitecontrol 联系表简单且易于填写。 此外，它清楚地传达了人们提交表单后的后续步骤，以及用于查看 Getsitecontrol 博客的 CTA。

3.金斯塔

Kinsta 有一个“联系我们”页面，可以自动引导用户找到正确的联系表格，而无需他们重新加载页面。

Kinsta 列出了五个最受欢迎的联系请求：

1. 定价或计划

2. 功能或技术信息

3. 请求迁移或任何相关问题

4. 访客帖子、赞助帖子或反向链接请求

5. 还要别的吗

当用户选择他们的目标时，Kinsta 要么显示个性化的联系表格，要么显示一条消息。

这使 Kinsta 能够准确地收集他们需要的信息，而不会给访客带来额外的字段。

例如，在定价或计划联系表单上，Kinsta 添加了额外的字段来了解此人希望托管的网站和访问者的数量，但这些字段不会出现在“其他任何”表单中。

Kinsta 还在高层设定了明确的期望——“我们将在一个工作日内与您联系”。

4. 选择筛选

Choice Screening 有一个很长的联系表格。 乍一看，您可能认为这会降低表单的转化率。 这是一种真正的-选择筛选无疑将获得比他们会用更短的形式表单提交更少。

但是让我们谈谈为什么有时这没问题，以及为什么这是一个很好的联系表单示例。

Choice Screening 在一个非常专业的企业对企业空间中运作。 他们试图获得合格的潜在客户，他们将成为长期客户，而不仅仅是提交联系表单。

凭借其详细的服务列表和许多复选框，该表单将淘汰那些不确定自己想要什么的人，只让合格的潜在客户有很大机会成为客户。

您可以说 Choice Screening 正在使用此联系表筛选潜在客户！

5. Joel Klettke / 商务休闲文案

乔尔是一名专业的文案撰稿人，因此您可以打赌，他的联系表格设计和文案一定会很到位。

Joel 的表单本身很简单，包含标准字段以及一些符合个人预算的额外合格字段。 不过，正是表单旁边发生的一切才使它成为一个很好的联系表单示例。

在该文本中，乔尔在设定预期和确定潜在客户方面做得很好。 他还通过讨论他的最低费率有目的地赶走低预算客户。 虽然乔尔可以删除这些提及以获得更高的前期转化率，但这样做实际上会导致合格潜在客户的百分比降低，最终只会浪费乔尔的时间。

6. 尼尔帕特尔

尼尔帕特尔经营着世界上最受欢迎的数字营销网站之一，所以你可以肯定他会收到很多联系表提交。

为了帮助将这些提交发送到正确的位置，Neil 提供了一个“我想聊聊”下拉菜单，人们可以在其中从预设的选项范围中进行选择。 他还在占位符框中使用了一些缩微文案，恳请人们保持信息简短、切题。

这个很简单——但有时简单就是你在联系表单设计中所需要的。

7. 焦点实验室

好的，这个很有趣，异想天开，绝对不会适用于所有企业。 但是，如果您处于创意空间（Focus Lab 所在的空间），创建这样一个异想天开的联系表单设计可以表明您能够跳出框框思考。

Focus Lab 没有创建传统形式，而是更多地使用 Mad Libs 风格的方法，访问者在现有段落中输入他们的信息。 通过使用这种方法，Focus Lab 还能够收集更多信息（如目标和预算），而没有更传统的联系表单设计可能具有的令人印象深刻的外观。

8. CMICB

CAMICB 是 Community Association Managers International Certification Board 的缩写，为美国的社区协会提供认证。

CAMICB 联系表的显着特点是它使用混合弹出/“联系我们”页面方法。 当用户登陆“联系我们”页面时，CAMICB 网站会立即打开一个简单的弹出式联系表单，访问者可以在其中提交他们的消息。

只有三个字段，CAMICB 保持其形式简洁明了。 然后，弹出方法创建了一个很好的无干扰界面，其中重点完全放在表单上。

这使得提交查询尽可能顺畅。

为了让事情变得更简单，CAMICB 还显示了一个向上滑动的联系表格，用户可以在其页脚中访问：

如何创建您自己的可定制联系表单设计

在浏览了这八个联系表单示例之后，您可能已经有了很多关于如何将这些原则应用于您自己的联系表单设计的想法。

如果您想开始，[Getsitecontrol](/feedback-popup/ 可以让您立即启动并运行。

与大多数联系表单解决方案不同，Getsitecontrol 允许您从四个灵活的位置和数十个表单模板中进行选择。 您可以创建一个传统的弹出窗口，就像您在 CAMICB 和 Getsitecontrol 网站上看到的那样。 或者，您可以使用幻灯片、通知栏、按钮等来改变现状。

您可以根据需要添加尽可能多（或尽可能少）的字段以获得合格的提交，并且您还可以插入微文来帮助访问者填写您的表单。

立即注册 Getsitecontrol，您只需几分钟即可获得有效的联系表格。