Copy from another support thread:
Can we set the tab order for forms? I ask this because the example in Wix code does not tab from field to field when you fill it out properly. The first name and last name fields don’t let you tab at all but you can tab from title to details. You cannot tab to the next button. This is important for websites with forms. especially with long or detailed forms.
We do not have a feature to set the tab order of elements in a form.
However, we have found (after creating those examples) that the back and forward buttons in the tool bar (tools → toolbar, the arrange buttons) also effect the tab order. It is a viable workaround - any element that is below another, will also be first in terms of tab order.
For instance, if we add three inputs in order, first name, last name and city, the tab order will be from first name → last name → city. The inputs will also overlap like the image to the right.
Using the Arrange buttons, we can switch the order of the inputs. In this case, the tab order will be city → last name → first name
The Arrange buttons are positioned on the toolbar, as shown in the picture to the right. As a shortcut, you can also use shortcuts to
command + left arrow - move backward
command + right arrow - move forward
Guys… this works… assuming there are no overlaps in your fields: all you need to do is “bring to front” the first field you want the user to start with on the form, then select the next field and “bring to front” then the next field, etc. I tested and this worked.
Yep, works fine. Thanks
At first I thought it no longer works but found the following: Using the keyboard shortcuts does NOT work for me (Chrome). I have to use the menu and DBLE CLICK the bring to front for each field. THEN this does work. But this is tedious. Wix: please just put a tab order feature in the settings when you configure your DB fields. MS Works DB has the feature so really? How big a deal is it eh?
HEHEE
Meh… Ok. Kinda works. I can get everything except the last tab to the submit button to work now. This is just basic basic stuff here, you guys absolutely need a real solution here.
You can actually control where the cursor goes with some simple wix code. You create an EVENT on each field and code as follows:
export function input1_keyPress(event, $w) {
if (event.key === “Enter”)
$w(“#input2”).focus();
}
export function input2_keyPress(event, $w) {
if (event.key === “Enter”)
$w(“#input3”).focus();
}
export function input3_keyPress(event, $w) {
if (event.key === “Enter”)
$w(“#input4”).focus();
}
… and so on…
Thanks… yeah, I might write a small function just in that last input box to catch a tab and send them to the submit button. Thank you, good info.
Yeah, doesn’t work with “Tab” keys, just like it gets ignored.
Yoav - Is there any update on this issue? Being able to control the tab order in a form is a basic web development requirement.
I’m Using Safari 11.1.1
I’ve tried the workaround and it isn’t working correctly. Just to verify, I purposly overlapped the form fields to make sure the changes in layering were in fact occuring. When I did that, the changes in layering order worked and changed the tab order. Yes, I saved the changes.
BUT, when I moved the form fields into their proper positions, the layering order and thus the tab order reverted. HELP!
Setting the tabindex should not have to be a feature request. This should have been there from the get go. I have tried the suggested workaround both in code and arranging the inputs. Neither works. A viable solution to this would be much appreciated since UX is something vital to a successful website.
BTW it works if you use this code:
export function input3_keyPress(event, $w) {
if (event.key === “Tab”)
$w(" #input4 ").focus();
}
but there is no “keyPress” event or equivalent for checkboxes. So as long as you’re tabbing between input text fields and text boxes in a form, you’re OK. Definitely still need the tab order feature because of checkboxes or other similar input controls.
Unfortunately this does not seem to work (in Chrome at least). I have followed suggestions of other users but does not work. If you actually overlap the fields, then it tabs correctly. If you then move the fields so that they do not overlap however, it reverts to the previous order.
Thanks,
James
It worked for me also! Bring in front the first field, then bring in front the second field, bring in front the third field, etc.
Then when you will press tab, it will go in the perfect order!
Thank you @yoav-wix
There appears to be a better solution here. I tried both the ideas presented above with mixed (or no) success.
After contacting Wix support, they had me use the “layers” interface. You can activate this by clicking on the button at the very bottom of the editor toolbar (Tools>toolbar). For anyone who doesn’t see the “layers” button, zoom out. This may work where scrolling down may not. Once the layers interface is open, navigate to the appropriate level. In my case, it was “overlay>lightbox.” Clicking on this will give you a list of the elements on that level in the order they will be focused. Simply drag them into the order you want your site visitors to see. Hope this helps anyone who has this issue!
Support included this link as well for anyone looking for additional info:
Here is a article referencing our Layers Panel:
Using the Layers Panel
The layers approach described by Justin worked for me. Whew. Thanks Justin.
Yes this is the solution that Yoav wrote on Jun 25, 2017. Use layering by clicking the layers button on the Toolbar or the arrange buttons above it
@stevesoftwareservice Hi Steven, if I’m reading his post correctly, this is actually something different. Yoav was talking about using the “arrange” menu, which moves elements in front of or behind other elements. For whatever reason, this is the mechanism that Wix is theoretically using to determine activation order. As an update, the solution I posted previously worked for me briefly, then was reset. Support then tried applying Yoav’s solution per above, which did the same. I have done the same and the tab order is correct in preview mode, but resets to default on hitting save. I have since been told by support that “the tab order is based on the order in which elements are added to the page, so make a new page with the order you want.” I haven’t had an opportunity to test this yet, but will be soon. Quite the experience for what, it seems like, should be a pretty fundamental element of the website design process.
Bingo! Keyboard shortcut brings to front but does not change tab order. Keep the toolbox open, select each item and use the toolbox bring-to-front button and this works.