为 WordPress Forms 创建退出确认弹出窗口

Question

我需要一些帮助。 我正在尝试在 WordPress 上创建一个确认导航弹出窗口。 我希望在用户尝试退出表单页面而不提交表单时出现弹出窗口。

弹窗截图： https://ibb.co/3CvqgKH

我使用Forminator表单插件来创建表单。

我找到了这篇文章： https://www.greengeeks.com/tutorials/article/incomplete-form-confirmation-in-wordpress/

我按照指南创建了一个自定义插件，它有点工作。

这是我所做的：

1.在我的电脑上创建了一个文件夹，名为confirm-leaving-form 。

2.在文件夹中添加了一个名为confirm-leaving.php leaving.php 的 PHP 文件：

<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving Form
* Plugin URI: http://www.mydomainexample.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: My name
* Author URI: http://www.mydomainexample.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 Form', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

3.在confirm-leaving-form文件夹中创建另一个文件夹，名为js 。

4.在新的js文件夹中添加了一个名为confirm-leaving.js leaving.js 的 JavaScript 文件：

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

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

function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Leaving so soon? Your data will be lost if you continue.";
}
}

$("#forminator-module-2959").change(function() {
needToConfirm = true;
});

})

#forminator-module-2959是我的表单的 ID。

5.将整个confirm-leaving-form文件夹上传到我网站的“/plugins/”目录（使用FileZilla FTP应用程序）。

6.激活WordPress上的新插件。

以下是问题：

1.只有当用户开始填写表格时才会出现弹出窗口。 如果表单为空并且用户尝试退出页面，则不会出现弹出窗口。

2.如果用户没有回答任何单选、复选框、select 等问题，则不会出现弹出窗口。 文本输入问题不会触发弹出窗口。

3.当用户填写表格并点击“提交”按钮时，弹出窗口出现。 如果用户尝试提交，则不应出现弹出窗口。

理想情况下，我希望退出确认弹出窗口出现，即使 from 为空但在用户完成表单并尝试提交时不出现。

这可能吗？

我的表单页面的URL：https://mydreamtattoo.com/tattoo-design-form/

Answer 1

由于您的目标是即使用户不与表单交互也触发离开意图，所以您想要的与页面的正常离开意图没有什么不同。 我会考虑使用为此设计的插件而不是这种方法。 如果你想继续沿着这条路走下去，你可以像这样修改你的 javascript：

var needToConfirm = true;

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Leaving so soon? Your data will be lost if you continue.";
    }
}

jQuery(document).ready(function($) {
    window.onbeforeunload = askConfirm;

    $("#forminator-module-2959").on('submit', function() {
        needToConfirm = false;
    });
});

这基本上将其设置为默认情况下它是“needsToConfirm”，但如果他们提交表单，它会将 needToConfirm 转换为 false。 很可能您可能想要更详细的 javascript 来处理验证用例，但这就是要点。

对于它的价值，该作者文章中的代码并不好。 如果它满足您的需求，那很好，但是为此制作插件的整个方法确实很愚蠢。