包括JS以联系Form 7 Wordpress [英] Including JS to Contact Form 7 Wordpress

问题描述

您可能会认为问题在于将js包含在著名的wordpress插件中-联系表格7.

As you may think the problem is about including js to well-known wordpress plugin - Contact Form 7.

我的表单如下:

<label>[text* your-name] </label>
<label>[email* your-email]</label>
<label>[number number-189 min:500000000 max:900000000 id:numertel class:numertel1]</label> //this is telephone number
<label>[text* your-subject] </label>
<label>[textarea* your-message] </label>
[submit id:przycisk "Send"]

stackoverflow的用户帮助我修复了应该启用的JS代码电话号码长度为9或10时提交按钮.

Users from stackoverflow helped me to repair my JS code which should enable submit button when telephone number length is 9 or 10.

这是JS代码:

document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});

由插件生成的HTML(我从浏览器的检查元素"选项中看到了)

And HTML generated by plugin which I saw from 'check element' option in a browser:

<input type="number" name="number-189" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number numertel1" id="numertel" min="500000000" max="900000000" aria-invalid="false">
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" id="przycisk">

代码可以完美地工作，但是我不知道如何将他包括在插件中，因为这样的方法不起作用:

Code works perfect but I don't know how to include him to a plugin because something like this doesn't work:

<label>[text* your-name] </label>
<label>[email* your-email]</label>
<label>Telephone[number number-189 min:500000000 max:900000000 id:numertel class:numertel1]</label>
<label>[text* your-subject] </label>
<label>[textarea* your-message] </label>
[submit id:przycisk "Send"]
<script>
document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});
</script>

推荐答案

您可以为给定的JS代码创建其他简码，并将其插入(而不是插入，但要插入)联系表格7标记之后.

You can create additional shortcode for the given JS code and insert it after (not in,but after) contact form 7 tag.

所以看起来像这样

[contact-form-7 id ="122" title =与我们联系"][custom_js_for_cf7]

[contact-form-7 id="122" title="Contact Us"] [custom_js_for_cf7]

这是为此的简码，您可以将其添加到您的functions.php中:

And here is the shortcode code for this, you can add this to your functions.php:

add_shortcode('custom_js_for_cf7','custom_js_for_cf7');
function custom_js_for_cf7($args){
return '
<script>
document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});
</script>
';
}

这篇关于包括JS以联系Form 7 Wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！