Tab Indexing in Nintex Forms

There are a lot of users that love to use their keyboard instead of their mouse when navigating through an online form. I don't blame them, pressing 'Tab' is much faster then dragging a pointer and clicking in the next field. 

But what if I want to set up a custom tab order in my form? The following post will show how to setup a tab index in your Nintex Form.

The Build

Open the Nintex Forms Designer and place three 'Single Line Textbox' input controls. Next to each control, place a label (my labels are named for the order in which the user can tab through);

In the order you wish to apply the tab order, go into the Control Settings of each Single Line Text box, expand the Formatting section, and add the appropriate CSS Class into the 'Control CSS class' section: 

NOTE: My CSS classes are: firstStop, secondStop, thirdStop.

Next, let's add the CSS and JavaScript required to make this form work!

The Code

Place the following CSS in the Custom CSS section of the Form Settings:

.firstStop {}
.secondStop {}

Next, add the following JavaScript in the Custom JavaScript section of the Form Settings:

NWF$(document).ready(function () {
    NWF$('.firstStop').attr("tabindex", "1");
    NWF$('.secondStop').attr("tabindex", "2");
    NWF$('.thirdStop').attr("tabindex", "3");

The Result

Nothing too much to show here, but all user interaction, however when the form renders, users will be able to tab through the inputs you have added to your form in the order you specify!

Feel free to post any questions/comments about this post!