I created a form on my website using user input fields. The form is a mix of user input types: text input, radio buttons, dropdowns, and text boxes. I want to be able to set the logical order of the form, so as a user tabs through the inputs she goes to the next input in the form, no matter the user input type. Currently, if a user tabs, she goes to the text input type in order prior to going to another type of input (ex. radio button). When I highlight a text input I can see the input number at type (ex. #input1, #input2, #input3, #selection1, #selection#2). what I want is an order for tabbing of #input1, #input2, #selection1 ,#input3, #selection#2). Thanks for your help.
1 Like
You can set the order by right-clicking and selecting Arrange > Bring to Front in the order you want users to tab through your form.
2 Likes
Sam (Wix) your suggestion does not seem to work. i.e. right click to select bring to front does not change tab order of forms…
I have exactly same problem. Have a form with input elements. when i originally created the form, i forgot the title drop down menu. Because i added it late, the tab order is #input 6, instead of being number 1, as i would like.
the question is , how does one change the tab order ?, not order for display (i.e. bringing forward and sending to back etc)…Please respond
You can also try going to Site > Accessibility and Activate Keyboard Accessibility.
will try that now … thanks
Unfortunately, your suggestion does not solve the problem.
There appears not to be a simple way of changing tab order of input objects, other than to delete and start again in the order that one requires input to flow. This may need to be a something that your developers should address… Or is there another way to do this with code… If yes, please share it
Agree, this is definitely needed. When creating large forms or updating an existing form it would be nice to be able to move fields around without have the user experience suffer.
Hi,
When you activate keyboard accessibility (the way Sam suggested) - the tabbing order of the form is set to be according to the order of the input controls, top to bottom, left to right. That’s the natural way of having it and what most users might expect.
Do you feel you need more ways to customize and control the tab order?
Hi Ohad. This issue has come up several times and I think adding a simple TabIndex property to the Property Box/per element would solve all problems. At least, that is the most common way of doing it.
Hi,
Tabindex is a bad practice and is not recommended in any way.
The proper way is to build your form in a natural flow order, as I wrote, because that’s what your users would expect. If you have an example of a form that breaks this principal, i’d appreciate if you shared it.
Ohad, why is it bad practice? I am willing to be convinced, but I could use some elaboration on the subject.
There are many forms that do not stick to the top-bottom/left-right paradigm, usually to speed up data entry on large forms. Say I have an order form with invoice name/address/phone/etc. Then I have the same for delivery. There, you display as a default all the values from Invoice. In data entry, what many developers do to prevent users having to endlessly tab thru all these fields that are 99% identical every time, you skip the fields and go to the next field underneath the second address block. Only if the delivery address is wrong, they use a mouse to go back to the Delivery Block.
Another example is two columns, where first column 1 is filled out (downwards) with pricing per person and then the second. E.g. I have a Motel with 2 types of rooms (col 1 and 2) and I want to input pricing per person. Then, it is most logical to input roomA/1person/2persons, etc, and then do the same for the column next to it.
In your solution, I would have to input pricing horizontally, so Room1/1Person, Room2/1Person. But that is not how it is usually done.
In short, there will always be circumstances where people want to have another tabindex than l2r/ttb
Hope this helps.
Here’s one resource but there are many more: http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html.
You mentioned scenario which all can be solved by other and better means. Anyway, your request for greater control over order is valid and you should post it in the Feature Requests forum.
Sam (Wix) your advice worked for me. Using “Arrange” from the Toolbar, I was able to go input-by-input to get them in my desired order for the “tab” to work how I want. Thank you.
Ohad, thank you for that article. I read thru it (and others), but I am unconvinced. I will put a feature request in, together with a document addressing the arguments against and for a tabindex, so I hopefully can convince Wix to implement it. Without your ref to the article, I would have missed quite a bit. Thank again.
eshooman, wrote
" Sam (Wix) your advice worked for me. Using “Arrange” from the Toolbar, I was able to go input-by-input to get them in my desired order for the “tab” to work how I want. "
how did you do this ? please elaborate.
I have tried to use arrange, but it seems to me to help with placing objects above or beneath each other ? or is there a hidden use i am unaware of ?. How does one use it to arrange input elements to get a desired tab order?. Would love to find out
I like the arrangement tab from the toolbar method. I do agree that it would be helpful an index of some sort. Maybe not a tabbing index, but a visual tool that tellls you which layer is in top of which and that you can drag around (similar to photoshop, where you can see which layers are in top of which). Right now, I don’t know which field is first and which one is second, or if there’s any other element that may screw things up.
This worked for me: Right click on the very first element in your form and select “arrange” > “bring to front” then select “bring to front” a second time. Move on to the next field and repeat the process until you’ve done this for every field item! After saving and publishing, go to your live site and you should be able to TAB through your fields like butter.
@ eshooman The arrange feature didn’t work at all. It actually got worse
@eshooman ok this video got it to work with the right clicking
Can anyone please help me? I have tried all the methods above. Right click “Bring Forward” twice on each field in the order I want them. I’ve tried with and without the accessibility turned on. Nothing seems to get them to tab through in the right order (left to right, top to bottom) on my form. Is this still working? Is there any other way to get it to work right?
Hope you can help!
Thanks, Barbara