如何让contact form 7下拉菜单选择其它弹出文本输入框

contact form 7制作表单定制性非常强,甚至你可以结合JS来实现你需要的效果。话说我们要做一个高级功能的下来菜单,例如你要设计这样一个下拉菜单:

你喜欢的蔬菜:黄瓜 青菜 土豆 萝卜 其它

你可以使用contact form 7设计选择菜单:[select mysucai “黄瓜” “青菜” “土豆 ” “萝卜”  “其它”]

如果你选择前面4个都没有问题,问题是你选择“其它”,而这个一般要求弹出文本输出框,让用户输入内容,怎么办?contact form 7并没有现成的处理办法,笔者也测试了其它几款著名的表单插件,都没有这个功能,如果有网友找到较好的办法,请麻烦告诉一声。然而对contact form 7稍加改进,即可实现:

1、首先要生成一个文本输入框:

<div style="visibility:hidden" id="div"></div>

这个文本框我使用图层控制,也就是说默认情况下是不显示的,然后给图层一个ID,便于控制。

2、把下面一段JS粘贴到头文件内:

<script>
 function test()
 {
 if(myform.mysucai.value=="其它")
 div.style.visibility="visible";
 else
 div.style.visibility="hidden";
 }
</script>

上面的一段代码,是一个函数test(),这个函数是用来控制文本框的显示情况。if内有一个判断语句,用来判断是不是选择了“其它”,如果选择了就把id为div的图层的可见性设为可见,否则为隐藏。而这个判断是通过表单名称来指定的。【也许会问,为什么不使用ID号来指定,测试的时候谷歌浏览器能分别出,但是IE不行】

3、浏览插件目录,打开includes/classes.php,找到下面的语句,约为136行:

$form .= '<form  action="' . esc_url_raw( $url ) . '" method="post"'

改为

$form .= '<form name="myform" action="' . esc_url_raw( $url ) . '" method="post"'

4、浏览插件目录,打开modules/select.php,找到下面的语句,约为98行:

 $html = '<select  name="' . $name . ( $multiple ? '[]' : '' ) . '"' . $atts . '>' . $html . '</select>';

改为

 $html = '<select onchange="test()" name="' . $name . ( $multiple ? '[]' : '' ) . '"' . $atts . '>' . $html . '</select>';

到此,就可以实现让contact form 7下拉菜单选择其它弹出文本输入框

说明:如果同一页面同时放两个以上表单,这个功能可能用不了。一般情况下一个页面放一个表单的,所以这个方案还是可行的。

微信扫一扫,关注微信公众号,获取最新资讯

留下回复

您的电邮不会被公布 必填字段标记为*