WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] How to Tab through Contact 7 form fields (2 posts)

  1. mkjar
    Member
    Posted 3 years ago #

    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: http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/

    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
    jQuery(document).ready(function(){
    
    //  first add idle-field class to all form inputs
        jQuery('input[type="text"],textarea').addClass("idle-field");
    
    // 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){ this.select(); }
        });
    
    // on blur after focus remove focus class and add completed-field class
        jQuery('input[type="text"],textarea').blur(function() {
            jQuery(this).removeClass("focus-field").addClass("completed-field");
         });
    
    //end
    });
    </script>
  2. K-Fella
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic