Clear fields in Contact Form 7 (WordPress)

1 Views

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:

Read More
// 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?

Post Views: 1

Related posts

Leave a Reply

7 comments

  2. 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');

  3. 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/

  4. 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);

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