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?

Answer 1

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

[text* txtName watermark   "Name: "]

Answer 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');