如何在WordPress中创建联系表单(逐步操作)

Are you looking to add a contact form on your WordPress site?

您是否要在WordPress网站上添加联系表单?

Every website needs a contact form, so visitors can easily contact you about your products and services. By default, WordPress does not come with a built-in contact form, but there is an easy way to add contact forms to your site.

每个网站都需要一个联系表,以便访问者可以轻松地就您的产品和服务与您联系。 默认情况下,WordPress没有附带内置的联系表单,但是有一种简单的方法可以将联系表单添加到您的站点。

In this WordPress tutorial, we’ll show you how to easily create a contact form in WordPress (step by step) without touching a single line of code.

在本WordPress教程中,我们将向您展示如何轻松地在WordPress中(一步一步)创建联系表单,而无需触及任何一行代码。

Easily add a contact form in WordPress
为什么需要联系表? (Why Do You Need a Contact form?)

You might be wondering why do I need a contact form? Can’t I just add my email address on my website, so people can email me?

您可能想知道为什么我需要联系表格? 我不能只在网站上添加我的电子邮件地址,以便其他人可以给我发送电子邮件吗?

That’s a very common question from beginners because they are afraid that adding a contact form requires code knowledge.

对于初学者来说,这是一个非常常见的问题,因为他们担心添加联系方式需要代码知识。

The truth is you don’t need to know any code. This step by step guide to adding a contact form is written for absolute beginners.

事实是您不需要知道任何代码。 本入门指南是为绝对初学者编写的。

Below are the top 3 reasons why a contact form is better than pasting your email address on a page.

以下是联系表格比将您的电子邮件地址粘贴到页面上更好的3个主要原因。

  • Spam Protection – Spam bots regularly scrape websites for the mailto: email address tag. When you post your email address on the website, you will start to receive a lot of spam emails. On the other hand, when you use a contact form, you can get rid of almost all spam emails.垃圾邮件防护 –垃圾邮件机器人会定期抓取网站以获取mailto:电子邮件地址标签。 当您在网站上发布电子邮件地址时,您将开始收到大量垃圾邮件。 另一方面,当您使用联系表格时,您几乎可以摆脱所有垃圾邮件。
  • Consistent Information – When emailing, people don’t always send you all the information that you need. With a contact form, you can tell the user exactly what information you’re looking for (such as their phone number, budget, etc).信息一致 –在发送电子邮件时,人们并不总是向您发送您需要的所有信息。 使用联系表,您可以准确地告诉用户您正在寻找什么信息(例如他们的电话号码,预算等)。
  • Saves Time – Contact forms help you save time in more ways than you can imagine. Aside from consistent information that we mentioned above, you can also use form confirmations to tell the user what are the next steps. Such as watch a video or wait up to 24 hours to get a response, so they don’t send you multiple inquires.节省时间 –联系人表单可以帮助您以比您想像的更多方式节省时间。 除了上面提到的一致信息外,您还可以使用表单确认来告诉用户下一步是什么。 例如观看视频或等待多达24小时以获得答复,因此他们不会向您发送多次询问。

Below is an example of a WordPress contact form that we will create in this tutorial.

以下是我们将在本教程中创建的WordPress联系人表单的示例。

Contact page preview

After creating the form above, we will also show you how you can easily add it on your contact page, or in your site’s sidebar using a WordPress contact form widget.

在创建完上面的表单后,我们还将向您展示如何使用WordPress联系人表单小部件轻松地将其添加到您的联系页面或网站的侧边栏中。

Sounds good? Ok so let’s get started.

听起来不错? 好的,让我们开始吧。

影片教学 (Video Tutorial)

演示地址

If you prefer written instructions, then please continue reading.

如果您喜欢书面说明,请继续阅读。

步骤1.选择最佳联系表插件 (Step 1. Choosing the Best Contact Form Plugin)

The first thing you need to do is choose a WordPress contact form plugin.

您需要做的第一件事是选择一个WordPress联系人表单插件。

While there are several free and paid WordPress contact form plugins you can choose from, we use WPForms on our site and believe it’s the best option in the market.

虽然有几个免费的和付费的WordPress联系人表单插件可供选择,但我们在我们的网站上使用WPForms,并认为这是市场上最好的选择。

Below are the three reasons why we think WPForms is the best:

以下是我们认为WPForms最佳的三个原因:

  1. It is the most beginner friendly contact form plugin available. You can use the drag & drop builder to easily create a contact form in just a few clicks.

    它是可用的最适合初学者的联系表单插件。 只需单击几下,您就可以使用拖放生成器轻松创建联系表单。
  2. WPForms Lite is 100% free, and you can use it to create a simple contact form (over 3 million sites use it).WPForms Lite是100%免费的,您可以使用它来创建简单的联系表单(超过300万个站点使用它)。
  3. WPForms Pro.WPForms Pro

Now that we have decided on the contact form plugin, let’s go ahead and install it on your site.

现在我们已经确定了联系表单插件,让我们继续将其安装在您的站点上。

第2步。在WordPress中安装联系表格插件 (Step 2. Install a Contact Form Plugin in WordPress)

For this contact form tutorial, we will use WPForms Lite because it’s free and easy to use.

对于此联系表单教程,我们将使用WPForms Lite,因为它是免费且易于使用的。

You can install this plugin on your site by logging into your WordPress dashboard and going to Plugins » Add New.

您可以通过登录WordPress仪表板并转到插件»添加新功能 ,在网站上安装此插件。

In the search field, type WPForms and then click on the Install Now button.

在搜索字段中,键入WPForms,然后单击“ 立即安装”按钮。

Install WPForms

After the plugin is installed, make sure you activate the plugin.

安装插件后,请确保您激活了插件。

Activate WPForms

If you don’t see the plugins menu or want more detailed instructions, then please refer to our step by step guide on how to install a WordPress plugin.

如果您没有看到插件菜单或需要更详细的说明,请参考我们的逐步指南,了解如何安装WordPress插件

步骤3.在WordPress中创建联系表单 (Step 3. Create a Contact Form in WordPress)

Now that you have activated WPForms, you are ready to create a contact form in WordPress.

现在您已经激活了WPForms,就可以在WordPress中创建联系表单了。

In your WordPress dashboard, click on the WPForms menu and go to Add New.

在您的WordPress仪表板中,单击WPForms菜单,然后转到Add New。

Add new form

This will open the WPForms drag and drop form builder. Start by giving your contact form a name and then select your contact form template.

这将打开WPForms拖放表单构建器。 首先给您的联系表命名,然后选择您的联系表模板。

WPForms Lite only comes pre-built form templates such as Blank, Simple Contact Form, etc. You can use these to create just about any type of contact form you like.

WPForms Lite仅带有预先构建的表单模板,例如Blank,Simple Contact Form等。您可以使用它们来创建几乎任何类型的联系表单。

For the sake of this example, we will go ahead and select Simple Contact Form. It will add the Name, Email, and Message fields.

为了这个示例,我们将继续并选择Simple Contact Form 。 它将添加“名称”,“电子邮件”和“消息”字段。

Creating a new form in WordPress with WPForms

You can click on the fields to edit them. You can also use your mouse to drag and drop the field order.

您可以单击字段进行编辑。 您也可以使用鼠标拖放字段顺序。

If you want to add a new field, simply select from the available fields on the left sidebar.

如果要添加新字段,只需从左侧边栏的可用字段中进行选择。

Adding new field to your contact form

When you’re done click on the Save button.

完成后,单击“ 保存”按钮。

步骤4.配置表单通知和确认 (Step 4. Configuring Form Notification and Confirmations)

Now that you have created your WordPress form, it’s important that you properly configure the form notification and form confirmation.

现在您已经创建了WordPress表单 ,正确配置表单通知和表单确认很重要。

Form confirmation is what your website visitor sees after they submit the form. It could be a thank you message, or you can redirect them to a special page.

表单确认是网站访问者提交表单后看到的内容。 这可能是一条感谢消息,也可以将其重定向到特殊页面。

Form notification is the email you get after someone submits the contact form on your WordPress site.

表单通知是在有人在您的WordPress网站上提交联系表单后收到的电子邮件。

You can customize both of those by going to the Settings tab inside the WPForms form builder.

您可以通过转到WPForms表单构建器内的“设置”选项卡来自定义这两项。

We usually leave the form confirmation as default Thank You message. However, you can change it to redirect to a specific page if you like.

我们通常将表单确认保留为默认的“谢谢”消息。 但是,您可以根据需要将其更改为重定向到特定页面。

Setting up form confirmation

The best part about WPForms is that the default settings are ideal for beginners. When you go to the notification settings, all fields will be pre-filled dynamically.

关于WPForms最好的部分是默认设置非常适合初学者。 当您进入通知设置时,所有字段将被动态预填充。

Setting up form notifications

The notifications by default are sent to the Admin Email that you have set up on your site.

默认情况下,通知会发送到您在站点上设置的管理电子邮件。

If you want to send it to a custom email address, then you can change that. If you want to send the notification to multiple emails, then just separate each email address by a comma.

如果要将其发送到自定义电子邮件地址,则可以更改它。 如果要将通知发送到多封电子邮件,则只需用逗号分隔每个电子邮件地址。

The email subject is pre-filled with your form name. The from name field is automatically populated with your user’s name. When you reply to the inquiry, it will go to the email that your user filled in the contact form.

电子邮件主题已预先填写您的表单名称。 “源名称”字段将自动填充您的用户名。 当您回复查询时,它将转到您的用户在联系表中填写的电子邮件。

We have a detailed guide on how to setup custom form notifications, so you can send forms to multiple recipients or different departments.

我们提供了有关如何设置自定义表单通知的详细指南,因此您可以将表单发送给多个收件人或不同部门。

步骤5.在页面中添加WordPress联系人表单 (Step 5. Adding WordPress Contact Form in a Page)

Now that you are done configuring your WordPress contact form, it’s time to add it to a page.

现在您已经完成了WordPress联系人表单的配置,是时候将其添加到页面了。

The first thing you need to do is either create a new page in WordPress or edit an existing page where you want to add the contact form.

您需要做的第一件事是在WordPress中创建新页面或编辑要在其中添加联系表单的现有页面。

We will be using the WPForms block to add the form in a page. Simply click on the add new block button to look for WPForm and then click to add it to your page.

我们将使用WPForms块在页面中添加表单。 只需单击添加新块按钮以查找WPForm,然后单击以将其添加到您的页面。

Add WPForms contact form block to your page

WPForm block will now appear in the content area of your page. You need to click on the drop down menu to select the form you created earlier.

WPForm块现在将出现在页面的内容区域中。 您需要单击下拉菜单以选择您之前创建的表单。

Select your contact form in WPForms block

WPForms will load your contact form preview inside the editor. You can now save or publish your page and visit your website to see it in action.

WPForms将在编辑器中加载您的联系表单预览。 现在,您可以保存或发布页面,并访问您的网站以查看其运行情况。

Here’s what the form would look like on a sample WordPress page:

这是一个示例WordPress页面上的表单外观:

Contact page preview

If you only wanted to add the contact form on page, then you’re done here. Congratulations.

如果您只想在页面上添加联系表格,那么到此完成。 恭喜你

WPForms also comes with a WordPress contact form shortcode. You can copy the contact form shortcode by visiting WPForms » All Forms page and then paste it in any WordPress post or page.

WPForms还带有WordPress联系人表单简码。 您可以通过访问WPForms»所有表单页面来复制联系人表单简码,然后将其粘贴到任何WordPress帖子或页面中。

WordPress contact form shortcode to use in post and pages

If you want to add a contact form on a sidebar or another widget ready area, then go to step 6.

如果要在边栏或其他窗口小部件就绪区域上添加联系人表单,请转到步骤6。

第6步。在边栏中添加WordPress联系人表单 (Step 6. Adding WordPress Contact Form in a Sidebar)

WPForms come with a WordPress contact form widget that you can use to add your contact form in a sidebar or basically any other widget-ready area in your theme.

WPForms附带了一个WordPress联系人表单小部件,您可以使用它在主题栏中的边栏或基本上任何其他支持小部件的区域中添加联系人表单。

In your WordPress admin area, go to Appearance » Widgets. You will see a WPForms widget that you can easily drag into any widget-ready areas of your theme.

在您的WordPress管理区域中,转到外观»小部件 。 您将看到一个WPForms小部件,您可以轻松地将其拖动到主题的任何小部件就绪区域。

Add form using a sidebar widget

Next, add the title for your widget and select the form you want to display. Save the settings, and visit your website for the preview.

接下来,为小部件添加标题,然后选择要显示的表单。 保存设置,然后访问您的网站进行预览。

Sidebar contact form

We hope this article helped you create a simple contact form in WordPress. You may also want to check out our comparison of the best WordPress backup plugins and our guide on how to fix WordPress not sending email issue.

我们希望本文能帮助您在WordPress中创建一个简单的联系表单。 您可能还需要查看我们对最佳WordPress备份插件的比较以及有关如何修复WordPress不发送电子邮件问题的指南

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视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/beginners-guide/how-to-create-a-contact-form-in-wordpress/

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WordPress是一个流行的开源内容管理系统(CMS),它提了丰富的功能和插件来创建和管理网站。在WordPress,可以使用表单插件来创建和管理表单,其最常用的插件是Contact Form 7和Gravity Forms。 Contact Form 7是一个简单而灵活的表单插件,它允许你创建各种类型的表单,如联系表单、注册表单、调查表单等。你可以通过简单的HTML标记语言来定义表单字段,并使用预定义的标记来处理表单提交。 Gravity Forms是一个功能强大的表单插件,它提供了更多高级功能和定制选项。你可以使用可视化编辑器来创建表单,并添加各种字段类型,如文本框、下拉菜单、复选框等。Gravity Forms还支持条件逻辑、文件上传、支付集成等高级功能。 无论你选择使用哪个插件,以下是一般的步骤来创建一个表单: 1. 安装和激活表单插件:在WordPress后台,点击“插件”->“添加新插件”,搜索并安装你选择的表单插件,然后激活它。 2. 创建表单:在WordPress后台,找到表单插件的菜单或选项,并点击“新建表单”或类似的按钮。 3. 添加字段:使用可视化编辑器或HTML标记语言来添加表单字段,如文本框、下拉菜单、复选框等。根据需要设置字段的属性和验证规则。 4. 配置表单设置:根据需要配置表单的设置,如邮件通知、成功消息、样式等。 5. 插入表单:完成表单设计后,将生成的短代码复制到你想要显示表单的页面或帖子。 6. 发布表单:保存并发布页面或帖子,访问该页面即可看到表单。 这是一个简单的介绍,具体的步骤和选项可能因插件而异。你可以根据自己的需求选择合适的插件,并参考插件的文档和教程来了解更多详细信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值