PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

field tab order

  1. kmstirtz
    Member

    is there a way to set "tab order" for the form fields?

    It *seems* to be set by default in the order the fields appear in the admin (Edit) screen. But on my website they do not "Tab" that way. (The preview form tabs fine, just not the actual form.)

    See here:

    http://amazingserviceguy.com/customer-service-examples/

    Posted 9 years ago on Wednesday January 13, 2010 | Permalink
  2. kmstirtz
    Member

    Problem solved (I think!)

    When I deactivated the COMMENTS for the page containing the form, the tab entry order worked fine.

    The COMMENTS function seems to interfere with the form's proper tab order.

    Posted 9 years ago on Wednesday January 13, 2010 | Permalink
  3. Gravity Forms can't control or take into account the tabindex value of other elements within your theme. Tab order can be impacted by order of code being output on the page, multiple items having the same tabindex, etc.

    If you have 2 items on the same page with a tabindex of 1, I believe it tabs first to the one that appears first in the code.

    We may make tabindex configurable in the future where you can at least manually set the tabindex, but even then the plugin itself won't be able to take into account form elements outside of it's control (search boxes, comment forms, etc.) that may have conflicting tabindex values.

    Posted 9 years ago on Wednesday January 13, 2010 | Permalink
  4. dnb
    Member

    Sorry, I realize this is an old item, but I have a followup question directly related. Is there something that could let GF do the right thing if you place two GF forms on the same WP page?

    I ask because one of my users noticed that if she tabbed out of the first field of the first form it would wind up in the first field of the second form. It would be great if GF could start the tabindices of the second form at a number after the last tabindex of the first form. Barring that, a manual "start tabindex at N" setting would be spiffy.

    -- dNb

    Posted 8 years ago on Wednesday September 8, 2010 | Permalink
  5. You can do this with a filter. For example, this changes form id#10's tabindex start value to 4

    < ?php add_filter('gform_tabindex_10', create_function('', 'return 4;')); ?>

    or this would apply to all forms

    < ?php add_filter('gform_tabindex', create_function('', 'return 4')); ?>

    Posted 8 years ago on Wednesday September 8, 2010 | Permalink
  6. dnb
    Member

    Cool! I'll do just that, thanks!
    -- dNb

    Posted 8 years ago on Wednesday September 8, 2010 | Permalink
  7. Thanks for tip on setting the tabindex using the filter. This would be a really useful addition to the form options in a future release (even given the limitations described by Carl above).

    -- Andy

    Posted 8 years ago on Friday October 15, 2010 | Permalink
  8. It's not something that's used commonly enough to warrant adding it the the admin UI. It's easy enough to add via a the filter if somebody needs it. We try to keep the UI from getting too cumbersome. It's already pretty complex.

    Posted 8 years ago on Friday October 15, 2010 | Permalink
  9. AngelinaC
    Member

    Hi Kevin - are you sure it wouldn't be a common enough problem, that maybe people are not just posting here to you and making people tab all over the page or wonder why their cursor is off somewhere else on the page than the form they were filling out?

    I'll have to find your customer comment section, this module worked fantastic! Overall just fantastic.

    We have a tabbing issue which I had not noticed in testing and likely affected our conversion rates. I probably just thought I'd mis-typed myself rather than it being a form issue. I didn't find your product complex. Actually I was impressed with the functionality and simplicity in which it was delivered. I'm not a wordpress person, but helping someone else out, I usually use another CMS (which it would be awesome if you'd write this for that!) Let me know where to add my two cents on your product reviews.

    I have to go walk the dog before I can get into this code to fix it. At least there is a fix listed here. Thanks again.

    Posted 8 years ago on Thursday October 21, 2010 | Permalink
  10. I too think this would be a valuable addition to the form settings - I agree with AngelinaC that it may be a more widespread issue than you think, just not necessarily a reported one!

    Posted 8 years ago on Monday November 1, 2010 | Permalink
  11. Thanks for the feedback but honestly, it comes down to adding one line of script to your functions.php file to make the change. It's not difficult by any means.

    We feel it's more important to keep the UI from getting filled with lots of little, fringe options and save the space in the interface for the more commonly used items.

    Posted 8 years ago on Monday November 1, 2010 | Permalink
  12. In that case may I suggest that the more obvious thing to do would be to remove tabindex from forms unless *added* via a filter.

    For the most part the tabindex of the form will be as it appears on the screen in any case, but sites that have, for example, "skip to content" as tabindex 1 now have tabbing issues.

    You're right, it's easy for me to add a filter, and now that I know about it that's how I will manage it from here on out, but (a) are all your users developers and ok with adding filters? and (b) how many people are completely unaware of tabbing issues?

    I completely understand what you're saying about the interface, but my guess is that there are probably a lot of sites out there now with screwy tabbing because of the current approach, and it could be avoided in future. Is the sky going to cave in because of this issue, no absolutely not - but could it be addressed in a future release? I hope so!

    :)

    Posted 8 years ago on Monday November 1, 2010 | Permalink
  13. I'm having the same problem and it would be very nice to have an option for that at the UI. You should know that not only developers use this plugin. I don't understand a word of PHP language and I'm trying to use this plugin.

    I've tried to post the code at the functions.php but it's returning as an error. This is very annoying for such a "small problem".

    Parse error: syntax error, unexpected '}' in /home/norepmot/public_html/wp/wp-content/themes/echoes/functions.php(2) : runtime-created function on line 1

    Posted 8 years ago on Tuesday November 16, 2010 | Permalink
  14. Ok, I've figured out "my" mistake. I replace " with ' and it worked. But as I said in the above post I'm php illiterate.

    I'm an average user and I think this should be included somewhere in the configurations of the plugin.

    Posted 8 years ago on Tuesday November 16, 2010 | Permalink
  15. Ok now my theme seems to be corrupted by this snipet.

    "Warning: Cannot modify header information - headers already sent by (output started at /home/norepmot/public_html/wp/wp-content/themes/echoes/functions.php:691) in /home/norepmot/public_html/wp/wp-includes/pluggable.php on line 890"

    Posted 8 years ago on Tuesday November 16, 2010 | Permalink
  16. You probably have extra whitespace at the end of your file.

    http://codex.wordpress.org/FAQ_Troubleshooting#How_do_I_solve_the_Headers_already_sent_warning_problem.3F

    Posted 8 years ago on Tuesday November 16, 2010 | Permalink
  17. I found this old and reactivated thread doing a search on my own tab index issue. I actually have 4 forms on one page. Mostly they tab OK but there are hiccups. I'm a designer w/o any php experience. I could probably add the snippet to my functions.php but I'm not clear how I'd even know what form is which number or what field number to start at, etc. Seems a bit daunting to me. My forms are on this page: http://dev.hoffmangraphics.com/join-soco. The initial one tabs pretty well but skips the location field. Then I get lost in where it is tabbing to as it goes up to the navigation and search box, etc. I had assumed it simply tabbed in the order the fields are in the setup. I doubt this client will notice and it's not going to be a high traffic form. But I'd like to better understand how to fix this issue.

    Posted 8 years ago on Friday November 19, 2010 | Permalink
  18. Tabbing isn't something Gravity Forms can completely control, which is why we have a hook you can use to set the tab order using code. Every site is unique, and we have no way of anticipating what other form elements will exist on a site (search boxes, etc.) so we have no way of guaranteeing the tab order will work correctly out of the box.

    Kevin's code example above:

    http://forum.gravityhelp.com/topic/field-tab-order#post-9548

    Is what you need to use. You would place it in your themes functions.php file. The form id you can get from the shortcodes that you use to display the form on a page, it has the ID as one of it's parameters which is how it knows which form to display. You can also get the form id from the Gravity Forms admin. If you go to Edit Forms, the first column is the form ID.

    You will have to read up on tabindex to understand it more. You need to determine what other elements you have on your site and what the tabindex for them is and then adjust accordingly.

    Here is an article on tabindex and you can find more on Google:

    http://www.breakofday.co.uk/articles/tabindex.php

    Posted 8 years ago on Friday November 19, 2010 | Permalink
  19. Hi.

    I am having the same problem with two forms jumping from one to the other when pressing tab.

    I have tried to implement the filter, but for some reason it is not working. It is not changing the tabindex on the gravity form.

    Here is a link: http://rebeccapersson.com/2010/11/gaa-rent-i-fisk/

    Here is the code I have tested with in my functiosn.php file.

    add_filter("gform_1", create_function("", "return 4;"));
    
    add_filter("gform_tabindex", create_function("", "return 4;"));
    Posted 8 years ago on Thursday November 25, 2010 | Permalink
  20. Having no luck getting any results from the code provided above. Trying
    add_filter( 'gform_tabindex_2', create_function('', 'return 8;') );
    At http://brownsterling.com/contact-us

    Posted 8 years ago on Thursday December 2, 2010 | Permalink
  21. Scott, you need to use quotation marks instead of apostrophes....

    http://www.pastie.org/1351322

    Posted 8 years ago on Monday December 6, 2010 | Permalink
  22. thanks, brian, I had tried it both ways as I have seen it both way (single vs. double quotes). Still no luck. Should be able to just drop it into the functions.php file right? I have it at the end of the file and the function right above it works...so I'm stumped.

    Posted 8 years ago on Monday December 6, 2010 | Permalink
  23. I don't think the single vs. double quote matters here. In PHP, if you use single quotes, PHP won't parse the string for variables. Since there are no variables in these strings, it shouldn't matter if you use single or double here (other than double using a little more memory or processing time: the functionality would be the same.)

    Putting it in functions.php for your active theme is correct.

    Which form are you trying to set the tabindex for?

    Posted 8 years ago on Monday December 6, 2010 | Permalink
  24. Hi, all,

    Sorry for the delayed response but I just came across this topic. I am also having a problem with the tab order. I have a form on the sidebar to join a mailing list, but also a contact page for quote requests. On that page is where I'm running into problems. The mailing list signup is ID #1 and here is my code:

    add_filter('gform_tabindex_1', create_function('', 'return 20;'));

    I originally started with 4 as the number (as shown above) but that didn't work so I started playing with the numbers. However, it looks like there isn't a number to make this work.

    The URL in question is: http://www.pptdoctor.net/contact/

    Thoughts?

    Posted 8 years ago on Friday April 15, 2011 | Permalink
  25. Hey all,
    Yet another tabindex issue. I copied and pasted the code above, as told to do, and id wasnt as simple as that. I pasted it into my functions.php. Referenced the id number and it parsed errored my site. GREAT! So i took that out. Any new ideas on how to fix? Im using the twentyten parent theme, so its not something crazy. Thanks

    Posted 8 years ago on Thursday April 28, 2011 | Permalink
  26. You need to make sure you are using the gform_tabindex hook correctly. Here is documentation for this hook:

    http://www.gravityhelp.com/documentation/page/Gform_tabindex

    It does work and shouldn't care any errors, however depending on how/where you implement it you could implement it incorrectly. It needs to go in your themes functions.php file, probably at the bottom to avoid any issues.

    Posted 8 years ago on Thursday April 28, 2011 | Permalink
  27. I have a good reason for tabindex I think

    I'm using gf_right_half and gf_left_half and would really really like the tabbing to go down left_half, then down right_half.

    I could add to my functions file (which I probably will in this instance) but it seems like this could be quite a common thing for me.

    This is only because with left_half and right_half I have reorder the fields, I guess left_half and right_half css could be rewritten so I don't have to reorder fields?

    Posted 8 years ago on Wednesday May 25, 2011 | Permalink
  28. The "gf_left_half" and "gf_right_half" fields are floated elements and therefore naturally align horizontally. This works to emulate a true column layout, but doesn't allow for tabbing down vertically as though the fields were in true columns.

    What you could do is use strategically placed HTML blocks to add divs around groups of fields and then float the groupings right and left. That way the fields are technically in order and will tab properly, but still grouped in a container and presented in a columnar format.

    An example of using the HTML blocks this way can be found in the thread below.. it was specifically about adding fieldsets, but it could be any container type element.

    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    Posted 8 years ago on Thursday May 26, 2011 | Permalink
  29. The code worked like a charm on my site! Thank you!

    Posted 7 years ago on Sunday April 1, 2012 | Permalink
  30. wendy
    Member

    Just wanted to add that while checking into the tabindex issue on a WordPress site of my own. I added the filter and then noticed that after the two first fields, tabbing wanted to cycle through "wp-admin/about.php," "wp-admin," "wp-admin/comments.php" and other pages found within the WordPress admin area before moving through the remaining fields in the form. After realizing this (the status bar gives it away), I logged out of WordPress completely and then everything was fine. I removed the filter from the functions file and everything was still fine. The take-away is that when testing, log out of WordPress first to understand the actual user experience. ;)

    Posted 7 years ago on Friday June 1, 2012 | Permalink
  31. David Peralty
    Administrator

    Interesting. Thanks for posting that wendy. I'm going to close this thread now. It has run long enough and probably has all the information anyone could need to sort out any issues with tab index.

    Posted 7 years ago on Friday June 1, 2012 | Permalink

This topic has been resolved and has been closed to new replies.