如何在WordPress中创建多页表单

Recently, one of our users asked us how to create a multi-page form in WordPress? Multi part forms allow you to collect more information without scaring the users away. In this article, we will show you how to create a multi-page form in WordPress.

最近,我们的一位用户问我们如何在WordPress中创建多页表单? 多部分表单使您可以收集更多信息,而不会吓跑用户。 在本文中,我们将向您展示如何在WordPress中创建多页表单。

Creating a multi-page form in WordPress
为什么以及何时需要WordPress中的多页表单? (Why and When You Need Multi-Page Form in WordPress?)

Forms are the easiest way to collect data and get in touch with your users. Whether it is a contact form, email capture form, or a simple survey.

表单是收集数据和与用户联系的最简单方法。 无论是联系表格 ,电子邮件捕获表格还是简单调查。

However, lengthy forms are daunting for users and increases form abandonment.

然而,冗长的表格对用户来说是艰巨的,并且增加了表格的放弃。

To overcome this issue, user experience experts recommend multi-page forms. This way form fields are broken into sections and pages.

为解决此问题,用户体验专家建议使用多页表单。 这样,表单字段就可以分为几部分和几页。

A multi-step checkout page example

With a progress bar on top and fewer fields on screen, users feel more at ease filling out the form. It provides a more engaging and interactive experience to your users.

通过顶部的进度条和屏幕上的较少字段,用户可以轻松地填写表格。 它为您的用户提供了更具吸引力和互动性的体验。

Having said that, let’s see how to easily create a multi-page form in WordPress.

话虽如此,让我们看看如何轻松地在WordPress中创建多页表单。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明,请继续阅读。

使用WPForms创建多页WordPress表单 (Creating A Multi-Page WordPress Form with WPForms)

We will be using WPForms which is the most beginner friendly contact form plugin for WordPress. You will need at least the Basic license which costs $39.50.

我们将使用WPForms ,它是WordPress最适合初学者的联系表单插件 。 您至少需要基本许可证,该许可证的价格为39.50美元。

You can use the WPForms coupon: SAVE50 to get 50% discount on your purchase of any WPForms plan.

您可以使用WPForms优惠券SAVE50来购买任何WPForms计划时可获得50%的折扣。

First thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活WPForms插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you will need to enter your license key. You can get this key by signing into your account on WPForms website.

激活后,您将需要输入许可证密钥。 您可以通过在WPForms网站上登录帐户来获取此密钥。

Copy the license key and then visit WPForms » Settings page on your WordPress site. Paste the license key and then click on the verify key button.

复制许可证密钥,然后访问WordPress网站上的WPForms»设置页面。 粘贴许可证密钥,然后单击“验证密钥”按钮。

WPForms license key

After verifying your license key, you are now ready to create your first multi-page form in WordPress.

验证许可证密钥后,您现在就可以在WordPress中创建您的第一个多页表单。

Simply go to WPForms » Add New page, and it will launch the Form Builder.

只需转到WPForms»添加新页面,它将启动表单生成器。

Adding a new form in WPForms

Provide a title for your form and then select one of the templates shown below. WPForms offers ready-made form to speed up the form creation process.

为您的表单提供标题,然后选择下面显示的模板之一。 WPForms提供现成的表单,以加快表单创建过程。

You can choose the one that closely matches your form requirements or choose a blank form. Clicking on a template will launch the form editor.

您可以选择一个最符合您的表单要求的表单,也可以选择一个空白表单。 单击模板将启动表单编辑器。

Form editor in WPForms

Simply click on the fields from left column to add them into your form. After that click on a field in the form to edit it. You can also drag and drop form fields.

只需单击左列中的字段即可将其添加到表单中。 之后,单击表单中的字段进行编辑。 您也可以拖放表单字段。

Adding form fields in WPForms

After adding a few form fields, you are ready to add a new page to your form. Click on the Pagebreak field under fancy fields sections from the left column.

在添加了几个表单字段之后,就可以将新页面添加到表单中了。 单击左栏花式字段部分下的分页符字段。

Adding pagebreak field

You will notice that WPForms will add a pagebreak marker to the bottom and a first page marker at the top of the page.

您会注意到WPForms将在页面底部添加一个分页符标记,并在页面顶部添加一个首页标记。

It will also push the submit button to the next page, and your first page will now have a ‘Next’ button instead.

它还会将提交按钮推到下一页,现在您的第一页将有一个“下一步”按钮。

Click on the first page marker at the top to edit your multi-page form properties. In the left hand column, you can select a progress bar type. WPForms allows you to use a simple progress bar, circles, connector, or no progress indicator at all.

单击顶部的第一页标记以编辑您的多页表单属性。 在左侧栏中,您可以选择进度条类型。 WPForms允许您使用简单的进度条,圆圈,连接器或完全不使用进度指示器。

Edit first page marker to select progress bar type

For this tutorial, we will be using Connectors as progress bar. You can also choose the color of your page indicator. Lastly, you can provide a title for the first page.

对于本教程,我们将使用连接器作为进度条。 您还可以选择页面指示器的颜色。 最后,您可以为首页提供标题。

Now you need to click on the pagebreak marker to edit its properties. Here you can provide a title for the next page. You can also edit the text to display on the Next button.

现在,您需要单击分页符标记以编辑其属性。 您可以在此处为下一页提供标题。 您也可以编辑文本以显示在“下一步”按钮上。

Edit page title and next button text

You can continue adding form fields after the pagebreak. If you are using the PRO version of WPForms, then you can also use conditional logic to show and hide form fields based on user responses.

您可以在分页符之后继续添加表单字段。 如果使用的是WPForms的PRO版本,则还可以使用条件逻辑根据用户响应显示和隐藏表单字段。

After adding more fields, you can add more pagebreaks if you need.

添加更多字段后,可以根据需要添加更多分页符。

Once you are done creating your form, click on the save button on the top right corner of the screen.

创建完表单后,单击屏幕右上角的保存按钮。

Congratulations, you have successfully created your first multi-page form.

恭喜,您已经成功创建了第一个多页表单。

将您的多页面表单添加到WordPress帖子和页面中 (Adding Your Multi-Page Form into WordPress Posts and Pages)

WPForms makes it super easy to add forms into WordPress posts and pages.

WPForms使将表单添加到WordPress帖子和页面变得非常容易。

Create a new post/page or edit an existing one. On top of the post editor, you will see an ‘Add Form’ button.

创建一个新的帖子/页面或编辑现有的帖子/页面。 在帖子编辑器的顶部,您将看到一个“添加表单”按钮。

Add form button

Clicking on it will bring up an insert form popup.

单击它会弹出一个插入表单弹出窗口。

Select your form from the drop down list and then click Add Form button.

从下拉列表中选择您的表单,然后单击“添加表单”按钮。

Select and insert your multipage form

You will notice WPForms shortcode added into your post/page. You can now save or publish this post or page.

您会注意到WPForms 短代码已添加到您的帖子/页面中。 您现在可以保存或发布此帖子或页面。

Visit your website to see your multi-page form in action.

访问您的网站以查看您的多页表单。

Preview of a paged form in WordPress

We hope this article helped you add a multi-page form in WordPress. You may also want to see our guide on how to add a contact form popup in 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/wp-tutorials/how-to-create-a-multi-page-form-in-wordpress/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值