如何让contact form 7下拉菜单选择其它弹出文本输入框
2012/07/02
contact form 7制作表单定制性非常强,甚至你可以结合JS来实现你需要的效果。话说我们要做一个高级功能的下来菜单,例如你要设计这样一个下拉菜单:
你喜欢的蔬菜:黄瓜 青菜 土豆 萝卜 其它
你可以使用contact form 7设计选择菜单:[select mysucai “黄瓜” “青菜” “土豆 ” “萝卜” “其它”]
如果你选择前面4个都没有问题,问题是你选择“其它”,而这个一般要求弹出文本输出框,让用户输入内容,怎么办?contact form 7并没有现成的处理办法,笔者也测试了其它几款著名的表单插件,都没有这个功能,如果有网友找到较好的办法,请麻烦告诉一声。然而对contact form 7稍加改进,即可实现:
1、首先要生成一个文本输入框:
<div style="visibility:hidden" id="div">[text text-930]</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下拉菜单选择其它弹出文本输入框。
说明:如果同一页面同时放两个以上表单,这个功能可能用不了。一般情况下一个页面放一个表单的,所以这个方案还是可行的。