Question

我在Wordpress网站上使用联系表格7。不幸的是，插件没有内置的“明确的点击字段”作为默认设置，这对于可用性来说很糟糕。

我已经创建了一个主题函数来实现这个功能并且几乎就在那里但是需要具有更好jQuery技能的人才能使所有内容按预期工作。这是我的代码：

// Clear Formfields
function clearfield() {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
         $(".clearfields").click(function () {
            var text = $(this).text();
                $(".clearfields").val("");
            });                             
    });
</script>
<?php
}
add_action( 'wp_footer', 'clearfield', 100 );

我无法在不修改插件的情况下操纵输入字段，但我可以添加类。目前我有：

<input class="clearfields" type="text" value="enter name etc">

目前这将清除任何字段.clearfields哪个好，但我只想清除用户点击的字段。目前它清除所有字段（名称，电子邮件，公司等）该课程适用。

其次，使用我当前的设置，即使单击提交按钮后表单似乎发送，电子邮件也不会到达，所以我的代码就出现了问题。

有人可以帮忙吗？

Answer 1

联系表格7确实有明确的价值......只需使用：水印

[text* txtName watermark   "Name: "]

Answer 2

在最新版本的cf7 for wordpress上，您可以通过添加以下代码来添加重置/清除字段按钮：

<input type="reset" class='btn btn-primary' />

默认情况下，重置按钮不会继承任何样式，因此它只会显示为普通的无样式按钮。您仍然可以应用上面显示的任何CSS样式。

这是显示＆＃34;提交＆＃34;的示例表单代码。按钮和＆＃34;重置＆＃34;按钮彼此相邻，风格相同。

[submit class:btn class:btn-primary]<input type="reset" class='btn btn-primary' />

在线预览：http://www.ewallzsolutions.com/free-quote/

Answer 3

我面临同样的问题所以我只是通过创建hidden输入重置按钮并使用jquery触发来解决这个问题

HTML

<input type="reset" id="reset" class="sr-only">

Jquery的

$("#reset").trigger('click');

Answer 4

这是一个工作示例：http://jsfiddle.net/cyVyZ/

HTML代码：

<input type="text" id="field1" class="clearfields" value="field 1" />
<input type="text" id="field2" class="clearfields" value="field 2" />
<input type="text" id="field3" class="clearfields" value="field 1" />

jQuery代码：

(function($) {
  $('.clearfields').bind('focus', function() {
    $(this).val('');
  });
})(jQuery);

Answer 5

您可以清除焦点默认值，并在模糊时恢复该值。

示例在这里：jsfiddle

jQuery代码：

$.fn.defaultValue = function(){              
         return this.each(function(){ 
            var default_value = $(this).val(); 
            var $this = $(this);        

            $this.focus( function() {    
                if ($this.val() == default_value) $(this).val("");
                });
            $this.blur( function() {
                if ($this.val().length == 0){
                    $this.val(default_value); 
                }
            })            
         }); 
         };

Answer 6

以下是关于如何在contactform7中点击文本框值的完美答案。看看 http://www.bloggerseed.com/2011/07/clear-text-box-click-contactform-7/

Answer 7

只需在联系表格7中添加

<input type="reset" id="form-Cancel" class="wpcf7-form-control wpcf7-submit button"/>

联系表格7中清除字段（Wordpress）

7 个答案: