How to disable autocomplete for inputs in contact form 7? [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange.

Closed 3 months ago.

Improve this question

I have below code for contact form 7. Usually I use autocomplete="off" for html input field. However not able to figure out how to do the same for contact form 7

<div class="row">
<div class="col-md-6">
    [text* FirstName placeholder "First Name"]
</div>
<div class="col-md-6">
    [text* LastName placeholder "Last Name"]
</div>
<div class="col-md-12">
    [email* EmailAddress placeholder "Email Address"]
</div>
<div class="col-md-12">
    [text* desc placeholder "Tell us a bit about yourself..."]
</div>
<div class="col-md-12">
    [submit "Submit"]
</div>
</div>

Answer 1

Autocomplete tag in form settings does not work anymore (as today Contact Form 7 plugin version 5.1.3.

The only solution which worked for me was to add custom attributes thanks to https://stackoverflow.com/a/46316728/1720476.

E.g. if You have FirstName and LastName fields, where You want to disable autocomplete.

Add this into functions.php file:

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="FirstName"' );
    if ($str_pos) {
        $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 );     
    }

    $str_pos = strpos( $content, 'name="LastName"' );
    if ($str_pos) {
        $content = substr_replace( $content, ' autocomplete="both" autocomplete="off" ', $str_pos, 0 );
    }

    return $content;
}

Answer 2

According to the question and answer from the developer placed here: https://wordpress.org/support/topic/autocomplete-off-3/

You just need to add the autocomplete:off option to the shortcode:

[email your-email autocomplete:off "example@example.com"]

Though if the plugin has not been updated as stated in that question to use autocomplete:false Chrome may ignore it still. If it doesn't work yet you may need to raise support with the plugin author. Autocomplete was added to this plugin in version 4.5.

Answer 3

The suggested answer by Arnis works if you are using the same form throughout your whole site, however, it will inject text in forms which don't have all the fields targeted in your functions.php file.

For a new suggested solution:

Setting the input or textarea "autocomplete" attribute to a random variable that is not a standard value seems to do the trick as of December 2019 for Chrome, not sure why the native CF7 option to disable autocomplete hasn't been updated.

You can define this attribute with a simple jQuery line like:

$("input.wpcf7-form-control, textarea.wpcf7-form-control").attr("autocomplete", "negative");

This targets the default class for CF7 fields.

Edit: forgot to mention, this requires knowledge on where to add custom js scripts, most premium themes support a custom JS section or just add the line to your child theme's main js file.