Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] How to Tab through Contact 7 form fields

  • Resolved mkjar


    I have been configuring contact 7 forms for a client – and I can’t figure out how to make the fields ‘tabbable’ I know about adding tabindex=”1″ etc to the actual fields – but since contact 7 generates the input/textarea tags I cannot add them in myself. Any recommendations?


    Also I figured out how to do blur,focus, and after focus effects for the contact7 form fields using jquery

    here is the tutorial I used:

    Below is what I came up with if anyone wants to apply it to their own contact-7 form:

    <script type="text/javascript" src="http://-----/scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    //use jquery instead of $ for wordpress conflicts
    //  first add idle-field class to all form inputs
    // then on focus remove idle-field and add focus-field also clear default value
        jQuery('input[type="text"],textarea').focus(function() {
    	jQuery(this).removeClass("idle-field completed-field").addClass("focus-field");
            if (this.value == this.defaultValue){ this.value = '';}
            if(this.value != this.defaultValue){; }
    // on blur after focus remove focus class and add completed-field class
        jQuery('input[type="text"],textarea').blur(function() {
Viewing 1 replies (of 1 total)
  • You can add extra attributes to form fields using code as follows:
    [text* your-name attribute:value]

    So, if you want to add tabindex then it would be:
    [text* your-name tabindex:1]

    Just increment the number on each field of your form.

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: Contact Form 7] How to Tab through Contact 7 form fields’ is closed to new replies.