WordPress.org

1. mkjar
   Member
   Posted 1 year 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 1 year 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.