wordpress表单调用
Do you want to build an AJAX contact form in WordPress?
您想在WordPress中建立AJAX联络表单吗？
AJAX contact forms allow users to submit the form without reloading a page. This enables you to increase user engagement while offering a better form submission experience to your users.
AJAX联系人表单允许用户提交表单而无需重新加载页面。 这使您可以增加用户参与度，同时为用户提供更好的表单提交体验。
This comes in handy when you run an eCommerce website and want to collect user feedback without diverting user attention.
当您运行电子商务网站并希望收集用户反馈而不会转移用户注意力时，这非常方便。
You can also use the same AJAX functionality for other custom forms on your website. For example, a custom user login form will allow users to login without an additional page load.
您还可以对网站上的其他自定义表单使用相同的AJAX功能。 例如，自定义用户登录表单将允许用户登录而无需额外的页面加载。
In this article, we will show you how to easily build a WordPress AJAX contact form with step by step instructions.
在本文中，我们将向您展示如何通过分步说明轻松构建WordPress AJAX联系人表单。
什么是Ajax，为什么要在表单中使用它？ (What is Ajax and Why Use it For Your Forms?)
Ajax, short for Asynchronous Javascript and XML, is a JavaScript programming technique which allows developers to transfer data without reloading a page.
Ajax是异步Javascript和XML的缩写，是一种JavaScript编程技术，它使开发人员无需重新加载页面即可传输数据。
It is most commonly used in web forms allowing users to submit form data without reloading a page. This makes form submission easy and fast, which improves the overall user experience.
它最常用于Web表单，允许用户提交表单数据而无需重新加载页面。 这使表单提交变得轻松快捷，从而改善了整体用户体验。
Web applications like Gmail and Facebook extensively use this technique to keep users engaged while making everything work seamlessly in the background.
Gmail和Facebook等Web应用程序广泛使用此技术来保持用户的参与度，同时使所有内容在后台无缝运行。
You can also use Ajax for your WordPress forms. It will save users from unnecessary page reload and keeps them engaged on the page they are currently viewing.
您也可以将Ajax用于WordPress表单。 这将使用户免于不必要的页面重新加载，并使他们保持在当前正在查看的页面上。
That being said, let’s take a look at how to easily make a WordPress Ajax contact form in 4 simple steps.
话虽如此，让我们看一下如何通过4个简单的步骤轻松制作WordPress Ajax联系人表单。
1.安装WPForms插件 (1. Install WPForms Plugin)
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插件的分步指南。
WPForms is the best WordPress form builder plugin on the market. It allows you to easily create Ajax powered forms aswell.
WPForms是市场上最好的WordPress表单生成器插件 。 它也使您可以轻松地创建Ajax支持的表单。
Upon activation, you need to visit WPForms » Settings page to enter your license key.
激活后，您需要访问WPForms»设置页面以输入许可证密钥。
After entering the license key, you’ll be able to receive automatic updates and install add-ons.
输入许可证密钥后，您将能够接收自动更新并安装附件。
You are now all set up to make beautiful ajax forms in WordPress.
现在，您已经全部准备好在WordPress中制作漂亮的Ajax表单。
2.创建您的第一个表格 (2. Create Your First Form)
Let’s go ahead and create your first form.
让我们继续创建您的第一个表格。
Simply visit WPForms » Add New page in WordPress admin area. You’ll be asked to provide a title for your form and select a template as a starting point.
只需访问WPForms»在WordPress管理区域中添加新页面。 系统会要求您提供表单标题，然后选择一个模板作为起点。
For the sake of this tutorial, we will be creating a contact form. However you can create any other type of form you need.
在本教程中，我们将创建一个联系表单 。 但是，您可以创建所需的任何其他类型的表单。
WPForms will now load your form with basic fields already added to it. You can simply point and click on any form field to edit it.
WPForms现在将使用已添加到表单中的基本字段来加载表单。 您只需指向并单击任何表单字段即可对其进行编辑。
You can also add any new form field from the left column by simply clicking on it. The new field will appear at the bottom of your form just above the submit button.
您也可以通过单击左栏中的任何新表单字段来添加它。 新字段将显示在表单底部的“提交”按钮上方。
You can easily drag and drop form fields to move them up and down in the form.
您可以轻松地拖放表单字段以在表单中上下移动它们。
Once you are finished editing the form, you can move on to the next step.
完成表格的编辑后，您可以继续下一步。
3.打开Ajax表单提交功能 (3. Turn On Ajax Form Submission Feature)
WPForms does not enable Ajax form submission by default. You will need to manually enable it for your form.
WPForms默认情况下不启用Ajax表单提交。 您将需要为表单手动启用它。
Simply switch to the Settings tab in the form builder and check the box next to ‘Enable AJAX form submission’ option.
只需切换到表单构建器中的“设置”标签，然后选中“启用AJAX表单提交”选项旁边的框即可。
Checking the box will turn on the Ajax functionality for this form.
选中该复选框将打开此表单的Ajax功能。
Now let’s set up what happens after the form submission.
现在，让我们设置提交表单后发生的情况。
First, switch to the ‘Confirmation’ tab under settings. This is where you inform your users that you have received their form submission.
首先，在设置下切换到“确认”标签。 在这里，您可以通知用户您已收到其表单提交。
WPForms allows you to do that in different ways. For example, you can redirect users to a URL, show them a specific page, or simply display a message on screen.
WPForms允许您以不同的方式执行此操作。 例如，您可以将用户重定向到URL，向他们显示特定页面或仅在屏幕上显示消息。
Since we have enabled Ajax functionality for the form, redirecting users to another page will defeat the purpose of creating an Ajax form.
由于我们已经为表单启用了Ajax功能，因此将用户重定向到另一个页面将无法创建Ajax表单。
You need to select the message option and edit the confirmation message. Feel free to use the formatting toolbar on the editor or add a link or two to tell users where to go next.
您需要选择消息选项并编辑确认消息。 随时使用编辑器上的格式化工具栏，或添加一个或两个链接来告诉用户下一步应该去哪里。
After that, you can set up how you would like to be notified about a form submission.
之后，您可以设置希望如何收到表单提交通知。
Switch to the Notifications tab in the form settings and configure notification email settings.
切换到表单设置中的“通知”选项卡，然后配置通知电子邮件设置。
Once you are done, you can save your form and exit the form builder.
完成后，您可以保存表单并退出表单构建器。
4.在WordPress中添加已启用Ajax的表单 (4. Add Your Ajax Enabled Form in WordPress)
WPForms makes it super easy to add forms into your WordPress posts, pages, and sidebar widgets.
WPForms使将表单添加到WordPress帖子，页面和侧边栏小部件中变得非常容易。
Simply edit the post or page where you want to add the form and insert the WPForms block to your content area.
只需在要添加表单的地方编辑帖子或页面，然后将WPForms块插入到您的内容区域。
After that, you need to select the form you just created from the block’s settings. WPForms will immediately load a live preview of the form in the content editor.
之后，您需要从块的设置中选择刚创建的表单。 WPForms将立即在内容编辑器中加载表单的实时预览。
You can now save or publish your content and then visit your website to test the form’s ajax functionality.
现在，您可以保存或发布内容，然后访问您的网站以测试表单的Ajax功能。
You can also add your form to a sidebar widget in WordPress. To do that, go to Appearance » Widgets page and add the WPForms widget to a sidebar.
您也可以将表单添加到WordPress的侧边栏小部件中。 为此，请转到外观»小部件页面，然后将WPForms小部件添加到侧边栏。
Select the form you created earlier and click on the Save button to store widget settings. You can now visit your website to see your Ajax powered form in action.
选择您之前创建的表单，然后单击“保存”按钮以存储小部件设置。 现在，您可以访问您的网站以查看您使用Ajax支持的表单。
We hope this article helped you learn how to create a WordPress Ajax contact form for your website. You may also want to see our guide on how to create a contact form popup in WordPress.
我们希望本文能帮助您学习如何为您的网站创建WordPress Ajax联系表单。 您可能还想查看有关如何在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视频教程。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/plugins/how-to-build-a-wordpress-ajax-form/
wordpress表单调用
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
