wordpress表单调用_如何在WordPress中显示表单的确认导航弹出窗口

wordpress表单调用

Accidentally closing a page without submitting your comment or with a half filled form is annoying. Recently, one of our users asked us if it was possible to show their readers a confirm navigation popup? This tiny little popup alert users and prevent them from accidentally leaving half filled and unsubmitted form. In this article, we will show you how to show confirm navigation popup for WordPress forms.

意外关闭页面而没有提交您的评论或表单有一半填充很烦人。 最近，我们的一位用户问我们是否可以向其读者显示确认的导航弹出窗口？ 这个小小的弹出窗口会提醒用户，并防止他们意外留下一半未填写的表单。 在本文中，我们将向您展示如何显示WordPress表单的确认导航弹出窗口。

什么是确认导航弹出窗口？ (What is Confirm Navigation Popup?)

Let’s suppose a user is writing a comment on your blog. They have already written quite a few lines, but they get distracted and forget to submit comment. Now if they closed their browser, then the comment will be lost.

假设用户正在您的博客上发表评论。 他们已经写了很多行，但是他们分心了，忘了发表评论。 现在，如果他们关闭浏览器，那么评论将丢失。

The confirm navigation popup gives them a chance to finish their comment.

确认导航弹出窗口使他们有机会完成他们的评论。

You can see this feature in action in the WordPress post editor screen. If you have unsaved changes, and you try to leave the page or close the browser, then you will see a warning popup.

您可以在WordPress帖子编辑器屏幕中看到此功能的运行情况。 如果您有未保存的更改，并且尝试离开页面或关闭浏览器，则将看到警告弹出窗口。

Let’s see how we can add this warning feature to WordPress comments and other forms on your site.

让我们看看如何将这个警告功能添加到您站点上的WordPress注释和其他表单中。

在WordPress中显示未提交表单的确认导航弹出窗口 (Show Confirm Navigation popup for Unsubmitted Forms in WordPress)

For this tutorial, we will be creating a custom plugin, but don’t worry you can also download the plugin at the end of this tutorial to install on your website.

对于本教程，我们将创建一个自定义插件，但是不用担心，您也可以在本教程末尾下载该插件以安装在您的网站上。

However, for better understanding of the code, we will ask that you try to create your own plugin. You can do this on a local install or a staging site first.

但是，为了更好地理解代码，我们将要求您尝试创建自己的插件。 您可以先在本地安装或登台站点上执行此操作。

Let’s get started.

让我们开始吧。

First you need to create a new folder on your computer and name it confirm-leaving. Inside the confirm-leaving folder, you need to create another folder and name it js.

首先，您需要在计算机上创建一个新文件夹，并将其命名为confirm-leaving 。 在confirm-leaving文件夹内，您需要创建另一个文件夹并将其命名为js。

Now open a plain text editor like Notepad and create a new file. Inside, simply paste the following code:

现在打开一个纯文本编辑器(如记事本)并创建一个新文件。 在内部，只需粘贴以下代码：

<?php
/**
 * Confirm Leaving 
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form. 
 * Version:     1.0.0
 * Author:      WPBeginner
 * Author URI:  https://www.wpbeginner.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function wpb_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
} 
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js'); 

This php function simply adds a JavaScript file to the front-end of your website.

这个php函数只是将JavaScript文件添加到您的网站的前端。

Go ahead and save this file as confirm-leaving.php inside the main confirm-leaving folder.

继续，并将此文件另存为主要confirm-leaving.php -leaving文件夹中confirm-leaving.php 。

Now we need to create the JavaScript file that this plugin is loading.

现在，我们需要创建此插件正在加载JavaScript文件。

Create a new file and paste this code inside it:

创建一个新文件并将此代码粘贴到其中：

jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});

 })

This JavaScript code detects if user has unsaved changes in comment form. If a user tries to navigate away from the page or close the window, it will show a warning popup.

此JavaScript代码检测用户是否在注释表单中有未保存的更改。 如果用户尝试离开页面或关闭窗口，它将显示警告弹出窗口。

You need to save this file as confirm-leaving.js inside the js folder.

您需要将此文件另存为js文件夹中的confirm-leaving.js 。

After saving both files, this is what your folder structure should look like:

保存两个文件后，文件夹结构应如下所示：

Now you need to connect to your WordPress site using an FTP client. See our guide on how to use FTP to upload WordPress files.

现在，您需要使用FTP客户端连接到WordPress站点。 请参阅我们的指南， 了解如何使用FTP上传WordPress文件 。

Once connected, you need to upload confirm-leaving folder to /wp-contents/plugins/ folder on your website.

建立连接后，您需要将confirm-leaving文件夹上载到网站上的/wp-contents/plugins/文件夹。

After that you need to login to the WordPress admin area and visit Plugins page. Locate the ‘Confirm Leaving’ plugin in the list of installed plugins and click on ‘activate’ link below it.

之后，您需要登录WordPress 管理区域并访问“插件”页面。 在已安装插件列表中找到“确认离开”插件，然后单击其下方的“激活”链接。

That’s all. You can now visit any post on your website, write some text in any field of the comment form and then try leaving the page without submitting. A popup would appear, warning you that you are about to leave a page with unsaved changes.

就这样。 现在，您可以访问网站上的任何帖子，在评论表单的任何字段中写一些文本，然后尝试不提交就离开页面。 将会出现一个弹出窗口，警告您即将离开未保存更改的页面。

在WordPress中将警告添加到其他形式 (Adding The Warning to Other Forms in WordPress)

You can use the same code base to target any forms on your WordPress site. Here we will show you an example of using it to target a contact form.

您可以使用相同的代码库来定位WordPress网站上的任何表单。 在这里，我们将向您展示一个使用它定位联系表单的示例。

In this example, we are using the WPForms plugin to create a contact form. The instructions will be the same if you are using a different contact form plugin on your website.

在此示例中，我们使用WPForms插件创建联系表单。 如果您在网站上使用其他联系表格插件 ，则说明将相同。

Go to the page where you have added your contact form. Take the mouse over to the first field in your contact form, right click, and then select Inspect from the browser menu.

转到添加了联系表的页面。 将鼠标移到联系表格的第一个字段中，右键单击，然后从浏览器菜单中选择“检查”。

Locate the line that starts with the <form> tag. In the form tag, you will find the ID attribute.

找到以<form>标记开头的行。 在表单标记中，您将找到ID属性。

In this example, our form’s ID is wpforms-form-170. You need to copy the ID attribute.

在此示例中，表单的ID为wpforms-form-170 。 您需要复制ID属性。

Now edit the confirm-leaving.js file and add the ID attribute after #commentform.

现在，编辑confirm-leaving.js文件，并在#commentform之后添加ID属性。

Make sure you separate #commentform and your form’s ID with a comma. You will also need to add # sign as prefix to your form’s ID attribute.

确保您用逗号分隔#commentform和表单的ID。 您还需要在表单的ID属性中添加#号作为前缀。

Your code will now look like this:

您的代码现在将如下所示：

jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}

$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});

 })

Save your changes and upload the file back to your website.

保存您的更改并将文件上传回您的网站。

Now you can enter any text into any field of your contact form and then try to leave the page without submitting the form. A popup will appear with a warning that you have unsaved changes.

现在，您可以在联系表单的任何字段中输入任何文本，然后尝试不提交表单就离开页面。 将出现一个弹出窗口，警告您尚未保存更改。

You can download the confirm-leaving plugin here. It only targets the comment form, but feel free to edit the plugin to target other forms.

您可以在此处下载确认离开插件 。 它仅针对注释表单，但是可以随意编辑插件以针对其他表单。

That’s all, we hope this article helped you show confirm navigation popup for WordPress forms. You may also want to try your hands on these 8 best jQuery tutorials for WordPress beginners.

仅此而已，我们希望本文能帮助您显示WordPress表单的确认导航弹出窗口。 您可能还想尝试这些针对WordPress初学者的8种最佳jQuery教程 。

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/wp-tutorials/how-to-show-confirm-navigation-popup-for-forms-in-wordpress/

wordpress表单调用