Clear fields in Contact Form 7 (Wordpress)

Question

I'm using Contact Form 7 on my Wordpress site. Unfortunately the plugin doesn't have "clear fields on click" built in as default which sucks for usability.

I've created a theme function to get this working and am nearly there but need someone with better jQuery skills to get everything working as expected. Here's my code:

// 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 );

I can't manipulate the input fields without modifying the plugin but I can add classes. Currently I have:

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

Currently this will clear any field with the class .clearfields which is good but I only want to clear just the field the user has clicked in. At the moment it clears everything (name, email, company etc) as all fields have the class applied.

Second to this, with my current setup even though the form appears to send after clicking the submit button the email does not arrive so something is up with my code.

Can anyone help?

score 5 · Answer 1 · answered Sep 20 '12 at 21:59

5

Contact Form 7 does have a clear value... just use: watermark

[text* txtName watermark   "Name: "]

answered Sep 20 '12 at 21:59

Locke

163
2
4
14

1

They should re-name it to clear - very confusing. Many thanks Locke. – photoman355 Sep 21 '12 at 17:43

score 4 · Answer 2 · edited May 23 '17 at 11:54

4

I was facing similarly same issue so i just solve this by created hidden input reset button and triggering with jquery

Html

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

Jquery

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 06 '17 at 09:25

Ismail Farooq

6,309
1
27
47

score 2 · Answer 3 · answered Aug 20 '15 at 12:44

on the latest version of cf7 for wordpress, you can add-in the reset/clear fields button by adding this code:

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

by default, the reset button will not inherit any style, so it'll just displayed like normal unstyled button. you can still apply any css styling as shown above.

here is the sample form code to display the "submit" button and "reset" button next to each other with same styles.

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

live preview here: http://www.ewallzsolutions.com/free-quote/

score 0 · Answer 4 · answered Sep 20 '12 at 21:00

here is a working example: http://jsfiddle.net/cyVyZ/

HTML Code:

<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 code:

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

score 0 · Answer 5 · answered Sep 20 '12 at 21:06

You can clear on focus default value and on blur get back that value.

Example is here: jsfiddle

jQuery code:

$.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); 
                }
            })            
         }); 
         };

score 0 · Answer 6 · answered Sep 21 '12 at 08:18

0

Here is a perfect answer on how to clear textbox values on click in contactform7 .Have a look http://www.bloggerseed.com/2011/07/clear-text-box-click-contactform-7/

answered Sep 21 '12 at 08:18

user1688201

31
2

score 0 · Answer 7 · answered Apr 08 '20 at 12:32

0

Just add this in Contact Form 7

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

answered Apr 08 '20 at 12:32

Malik Zahid

593
5
13

Clear fields in Contact Form 7 (Wordpress)

7 Answers7