如何在联系人表单7 Wordpress中添加自定义javascript函数

How to add custom javascript function in contact form 7 Wordpress

本文关键字：添加 自定义 javascript 函数 Wordpress 联系人 表单      更新时间：2024-04-18

我在wordpress中使用联系人表单7时遇到了一个问题，需要大家的帮助。问题：我有一个单选框，它有两个选项"是"或"否"。如果有人选中"是"选项，那么应该显示第一个div，如果他单击"否"，那么应该会显示第二个div。我写了一个代码，但在联系表格7时会如何，我不知道。这是代码。

$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
  $("#div two").hide();
$('[radio radio-928]').change(function() 
{
    if ($("[radio radio-928]").val() == "yes") 
    {
        $("#div one").show();
    }
    else {
        $("#div two").hide();
        }
        if ($("[radio radio-928]").val() == "no") {
        $("#div two").show();
    }
    else {
        $("#div one").hide();
        }
});
});

这可以在Contact Form 7编辑器框中完成，如下所示：

<script type="text/javascript"> 
function showdiv(element){ 
document.getElementById("div-one").style.display = element=="yes"?"block":"none";                      
document.getElementById("div-two").style.display = element=="no"?"block":"none"; 
} 
</script>
<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>
<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>

如果您的函数在JS控制台中工作，但在表单中保存时不工作，请确保它没有空行。

由于某些原因，这些被变成了p标签，编辑器并没有真正的HTML意识，至少在我使用过的网站上是这样

例如，按类将特定输入框的第一个字符大写。

<script language="javascript" type="text/javascript">
jQuery(function($){
// Capitalize first character as needed.
$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)/g, function($char) {
            return $char.toUpperCase();
        }));
        box.setSelectionRange(stringStart, stringEnd);
    });
   return this;
}
$('input[type=text].capitalize').capitalize();
});
</script>

一旦我删除了新的线，它就工作facepalm。。。

只需将JavaScript函数添加到页面中，然后在联系人表单管理页面底部找到"附加设置"字段，并使用on_bmit JavaScript操作挂钩，如下所示：

on_submit："MY_JavaScript_function_Name（）；"

  1. 添加到Wordpress插件：插入WPBeginners 的页眉和页脚

  2. 激活插件并进入设置->插入页眉和页脚

  3. 在脚本标记中添加javascript代码。当您的页面加载时，此脚本将位于DOM 的头部

  4. 在联系人表单7上，使用HTML代码添加按钮，添加代码中提到的相应ID属性以控制文档。

我一直这样做，特别是为了使用jQuery。

您可以复制生成的联系人表单的HTML并添加javascript代码。例如，您有一个提交表单为：

[submit class:btn class:btn-lg class:btn-black "Enviar"]

如果你查看HTML代码（检查器或查看页面HTML），你会得到以下代码：

<input type="submit" value="Enviar" class="wpcf7-form-control btn-lg btn-black" disabled="">

粘贴代码并在里面添加所需的javascript，例如：

<input type="submit" onclick="gtag('event','EnvioFormularioHome'); ga('send', 'event', { eventCategory: 'Formulario', eventAction: 'Enviado', eventLabel: 'Hernani'}) value="Enviar" class="wpcf7-form-control btn btn-lg btn-black" disabled="">

我知道这是一篇旧帖子，但我想分享我的发现，以备以后有人需要。

OP问题显然是代码中的空行，表单编辑器将p元素添加到每一行。如果打开js控制台，您将看到指向代码的错误。

还有一点我们应该注意，这花了我很多时间才弄清楚，那就是编辑器删除了反斜杠。我添加了一些输入掩码验证，发现了以下代码：

 v = v.replace(/'D/g, "");

保存后变成这样：

 v = v.replace(/D/g, "");

因此，一个变通方法是这样声明：

 v = v.replace(/''D/g, "");

然而，每次保存它时，反斜杠都会被删除，所以我需要将其源代码保存在其他地方，然后每次将其粘贴到编辑器中。

最后，我刚刚添加了一个自定义html小部件，其中所有的自定义js都位于脚本标记中。它将使代码在网站中在全球范围内运行，但这是我确保用户不会弄乱表单掩码和验证代码的方法。

相关文章：