表单展示界示例

Do you want to improve your contact form page design? A good contact form page design encourage more users to contact you thus boosting your conversions. In this article, we will show you the best practices of good contact form page designs and what makes them so useful.

您是否要改善联系表单页面的设计？ 良好的联系表单页面设计可以鼓励更多用户与您联系，从而提高您的转化率。 在本文中，我们将向您展示良好的联系表单页面设计的最佳实践以及使它们如此有用的原因。

为什么一个好的联系表单页面如此重要？ (Why A Good Contact Form Page is so Important?)

A contact form page is a must-have for all websites. Whether you are running a personal blog or a business website, a contact form page helps users reach out to you at any time while visiting your website.

联系表格页面是所有网站的必备条件。 无论您是经营个人博客还是商业网站 ，联系表格页面都可以帮助用户在访问您的网站时随时与您联系。

Unlike social media, contact form allows users to communicate with you privately which builds confidence and closes sales.

与社交媒体不同，联系表单允许用户私下与您交流，从而建立信心并完成销售。

Many website owners often don’t pay much attention to their contact page. Most people just add a contact form, and then forget about it.

许多网站所有者通常对他们的联系页面不太关注。 大多数人只是添加一个联系表，然后就把它忘了。

If you are not getting enough leads from the contact page on your website, then continue reading because we will show you how to make your contact page optimized for conversions.

如果您从网站上的联系页面获取的潜在客户不足 ，请继续阅读，因为我们将向您展示如何优化联系页面以进行转化。

如何在WordPress中创建联系表单页面？ (How to Create a Contact Form Page in WordPress?)

WordPress does not come with a built-in contact form page. You will need a contact form plugin to create a form and then add it to your contact page.

WordPress没有内置的联系表单页面。 您将需要一个联系表单插件来创建表单，然后将其添加到您的联系页面。

We recommend using WPForms. Our team created it to be the most beginner friendly contact form plugin for WordPress. The free version of WPForms is available on WordPress.org official plugin directory.

我们建议使用WPForms 。 我们的团队将其创建为WordPress最适合初学者的联系表单插件。 WPForms的免费版本可在WordPress.org官方插件目录中找到。

For complete step by step instructions, see our guide on how to create contact form in WordPress.

有关完整的分步说明，请参阅有关如何在WordPress中创建联系表单的指南。

Now that you have created a contact form, let’s take a look at the best practices of contact form page designs that can help you boost your conversions.

现在，您已经创建了联系表单，让我们看一下可以帮助您提高转化率的联系表单页面设计的最佳实践。

1.确保您的联系表格有效 (1. Make Sure Your Contact Form is Working)

Often WordPress hosting providers have poorly configured mail functions which stops your contact form plugin from sending email notifications.

WordPress托管提供商经常会配置错误的邮件功能，从而阻止您的联系表单插件发送电子邮件通知。

If you are using the pro version of WPForms, then you can still see the form entries inside the WordPress admin area. However, if you are using a free contact form plugin, then you will not even notice that your form is not working.

如果您使用的是WPForms的专业版，那么您仍然可以在WordPress管理区域内看到表单条目。 但是，如果您使用的是免费的联系表单插件，那么您甚至都不会注意到您的表单不起作用。

After adding a contact form to your WordPress site, it’s important to make sure that it is working properly by sending a test submission.

在将联系表单添加到WordPress网站后，通过发送测试提交来确保其正常工作很重要。

If you are not getting email notifications, then follow the instructions in our guide on how to fix WordPress not sending emails issue.

如果您没有收到电子邮件通知，请按照我们的指南中有关如何解决WordPress不发送电子邮件问题的说明进行操作 。

2.避免联系表中不必要的字段 (2. Avoid Unnecessary Fields in Contact Form)

You can add as many fields to your contact form as you like. However, each additional field you add to your contact form makes it more time consuming for your users to fill them.

您可以根据需要在联系表单中添加任意多个字段。 但是，您添加到联系表中的每个其他字段使用户填写它们的时间更加浪费。

That’s why we recommend that keeping your contact form fields to a minimum level and only add fields that truly help you better understand the user’s question.

因此，我们建议您将联系表单字段保持在最低水平，并仅添加真正有助于您更好地理解用户问题的字段。

Now if you must create a longer form, then you need to check out the bonus tip towards the end of this article that will help you reduce form abandonment.

现在，如果您必须创建更长的表格，那么您需要在本文结尾处查看奖金提示，这将有助于您减少表格的放弃。

(Source: Neil Patel)

(来源： 尼尔·帕特尔 )

3.解释为什么用户应该与您联系 (3. Explain Why Users Should Contact You)

Your contact form page should be inviting and welcoming to the users. A greeting, followed by a welcome message can make it look more polite and helpful. Let users know what kind of questions you can help them with.

您的联系表单页面应受到用户的欢迎。 问候语以及欢迎信息可以使它看起来更加客气和有用。 让用户知道可以帮助他们的问题。

(Source: Michael Hyatt)

(来源： 迈克尔·凯悦 )

If you have different pages for different departments, then point users in the right direction. For example, you can direct existing customers to support or guest bloggers to a write for us form.

如果不同部门的页面不同，则将用户指向正确的方向。 例如，您可以指示现有客户来支持或请来宾博客来为我们撰写表格。

(Source: OptinMonster)

(来源： OptinMonster )

4.提供其他联系方式 (4. Provide Alternate Ways to Contact)

Adding a form to your contact page is the most convenient way for users to send you a message. However, adding alternate ways to contact can help users decide what works best for them.

向您的联系页面添加表单是用户向您发送消息的最便捷方法。 但是，添加其他联系方式可以帮助用户确定最适合他们的方法。

You can add an email address, WhatsApp, or phone number as alternate ways to contact.

您可以添加电子邮件地址 ，WhatsApp或电话号码作为替代联系方式。

(Source: ZURB)

(来源： ZURB )

5.添加社交媒体资料 (5. Add Social Media Profiles)

While most users want to contact you privately, some may prefer to get in touch on Facebook or Twitter. You can add social media buttons to your contact form page as an alternate way for users to contact you.

尽管大多数用户希望私下与您联系，但有些用户可能更喜欢在Facebook或Twitter上进行联系。 您可以将社交媒体按钮添加到您的联系表单页面，作为用户与您联系的另一种方法。

(Source: Retro Portfolio)

(来源： 复古投资组合 )

6.添加地址和地图 (6. Adding Address and Map)

Adding an address and location on the map helps boost user confidence in an online business. Even if you don’t have a physical store or office, users find comfort in knowing where you are located .

在地图上添加地址和位置有助于提高用户对在线业务的信心。 即使您没有实体商店或办公室，用户也可以在知道您的位置时得到安慰。

(Source: LEDbow)

(来源： LEDbow )

If you have multiple locations in different cities or countries, then adding all of them makes your contact form page much more useful.

如果您在不同城市或国家/地区有多个地点，那么添加所有地点会使您的联系表单页面更加有用。

(Source: The Chase)

(来源： 大通银行 )

7.添加常见问题解答和资源链接 (7. Adding FAQs and Links to Resources)

After a while you will realize that many of your users ask similar questions. You can help them save some time and answer those questions directly on your contact page by adding a FAQs section.

一段时间后，您将意识到许多用户提出了类似的问题。 通过添加“ 常见问题”部分，您可以帮助他们节省一些时间并直接在您的联系页面上回答这些问题。

(Source: Smart Passive Income)

(资料来源： 聪明的被动收入 )

8.优化表单确认页面 (8. Optimize Your Form Confirmation Page)

Upon form submission, most contact form plugins allow you either show users a confirmation message or to redirect them to a different page.

提交表单后，大多数联系表单插件都允许您向用户显示确认消息或将其重定向到其他页面。

Redirecting users give you a chance to show them your most helpful resources such as your most popular content or offering a discount code.

重定向用户使您有机会向他们展示您最有用的资源，例如最受欢迎的内容或提供折扣代码。

(Source: Orbit Media)

(来源： Orbit Media )

9.要求用户加入您的电子邮件列表 (9. Ask Users to Join Your Email List)

Your users will need to add their email address when filling out the form. You can add a check box to ask them to join your email list as well.

您的用户在填写表格时将需要添加其电子邮件地址。 您可以添加一个复选框，要求他们也加入您的电子邮件列表。

If you are not already building an email list, then see our guide on why it is so important to build an email list.

如果您尚未建立电子邮件列表，请参阅我们的指南， 了解为何建立电子邮件列表如此重要 。

(Source: WPBeginner)

(来源： WPBeginner )

10.添加团队照片 (10. Add Photos of Your Team)

Adding photos of your team members and staff on the contact page makes it more personable and welcoming. It ensures them that there are real people behind your contact form page who will be answering their questions.

在联系页面上添加团队成员和员工的照片可以使它更具个性和热情。 它可以确保他们在您的联系表单页面后面有真实的人来回答他们的问题。

(Source: Bukwild)

(来源： 布克维尔德 )

11.使您的联系表单页面参与 (11. Make Your Contact Form Page Engaging)

You contact form page doesn’t need to be plain. You can add photos of your office, store or support team to reflect your company’s culture and values.

您联系表单页面不必很简单。 您可以添加办公室，商店或支持团队的照片，以反映公司的文化和价值观。

(Source: Digital Telepathy)

(来源： 数字心灵感应 )

12.对您的联系页面设计有创意 (12. Be Creative With Your Contact Page Design)

You may have noticed that a lot of contact pages on different websites follow a simple and very predictable layout. While it serves the purpose, you can use it as an opportunity to stand out.

您可能已经注意到，不同网站上的许多联系页面遵循简单且可预测的布局。 在达到目的的同时，您可以利用它作为脱颖而出的机会。

Many premium WordPress themes come with built-in styles for forms. You can customize those styles by adding custom CSS or using a plugin like CSS Hero.

许多高级WordPress主题都带有表单的内置样式。 您可以通过添加自定义CSS或使用CSS Hero之类的插件来自定义这些样式。

We recommend using a drag and drop page builder plugin to create your contact form page layout. This will allow you the flexibility to be more creative without writing any code.

我们建议使用拖放页面构建器插件来创建您的联系表单页面布局。 这将使您无需编写任何代码即可灵活地发挥更大的创造力。

(Source: Beaver Builder)

(来源： Beaver Builder )

奖励：减少表格遗弃 (Bonus: Reduce Form Abandonment)

When you create a multi-page form or a form with a lot of fields, then you risk reducing your conversion rate. Often users get form fatigue and leave before completing the entire form.

当您创建多页表单或具有很多字段的表单时，就有降低转换率的风险。 用户经常会感到表格疲劳，并在完成整个表格之前离开。

To combat form fatigue, many advanced form builders like Wufoo and WPForms come with form abandonment addons. This helps you capture partial entries from your forms.

为了消除表单疲劳，许多高级表单构建器(例如Wufoo和WPForms)都附带了表单放弃附加组件。 这有助于您从表单中捕获部分条目。

Simply put, it helps you get more leads without increasing your traffic.

简而言之，它可以帮助您在不增加流量的情况下获得更多潜在客户。

We hope this article helped you learn the best practices of great contact form page designs. You may also want to see our step by step WordPress SEO guide to improve your rankings.

我们希望本文能帮助您学习出色的联系表单页面设计的最佳实践。 您可能还希望查看我们的逐步WordPress SEO指南，以提高您的排名。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/showcase/best-practices-of-contact-form-page-designs-in-wordpress/

表单展示界示例