A New Fantastic Point of View: Slide UX for Nintex Forms

Nintex Forms allows for Forms Designers to create some really awesome ways for users to interact with forms and create an awesome experience. Well, let's take that experience one step further and build out a form with transitions from panel to panel instead of using tab-like functionality.

The Build

First we will need to open up the Forms Designer and add a few controls. You need to place four panels on the form with the following controls nested within each panel:

  • Label - For Step Number
  • Label - For buttons
  • Single Line Text Box for input
  • NOTE: Panels 2 - 3 will require two button (labels) for Next Slide and Previous Slide. 
  • NOTE: Panels 1 and 4 will only require one button (Panel 1 - Next Slide / Panel 4 - Previous Slide)
  • Save and Cancel buttons for panel 4.

The Code

For each label, you will need to edit the source of the label and insert the HTML elements that will act as buttons. The following HTML will have each button's HTML:

<div class="btn" id="1Next">
   <h3>Next Slide</h3> 
</div>

<div class="btn" id="2Prev">
   <h3>Previous Slide</h3> 
</div>

<div class="btn" id="2Next">
<h3>Next Slide</h3>
</div>

<div class="btn" id="3Prev">
   <h3>Previous Slide</h3> 
</div>

<div class="btn" id="3Next">
<h3>Next Slide</h3>
</div>

<div class="btn" id="4Prev">
   <h3>Previous Slide</h3> 
</div>

Next we will add the CSS classes in the Form Settings: 

.firstTab{
    visibility: visible;
    background-color: #00E2E2;
}
.secondTab{
    visibility: visible;
    background-color: #00E2E2;
}
.thirdTab{
    visibility: visible;
    background-color: #00E2E2;
}
.fourthTab{
    visibility: visible;
    background-color: #00E2E2;
}
.btn{
    background-color: #B6B6B6;
}

NOTE: Each panel has it's own CSS class. This is to assist us when calling on the .fadeIn() / .fadeOut() jQuery.

Once you have added the CSS classes (Nintex Form Settings > Custom CSS), please ensure that you add the appropriate CSS class to each panel (control settings). 

And last, but not least, let's add the JavaScript that will make this bad boy work! (Nintex Form Settings > Custom JavaScript):

NWF$(document).ready(function () {
    NWF$('.secondTab').fadeOut("fast");
    NWF$('.thirdTab').fadeOut("fast");
    NWF$('.fourthTab').fadeOut("fast");
    NWF$('#1Next').click(function () {
        NWF$('.firstTab').fadeOut();
        NWF$('.secondTab').fadeIn();
    });
    NWF$('#2Prev').click(function () {
        NWF$('.firstTab').fadeIn();
        NWF$('.secondTab').fadeOut();
    });
    NWF$('#2Next').click(function () {
        NWF$('.secondTab').fadeOut();
        NWF$('.thirdTab').fadeIn();
    });
    NWF$('#3Prev').click(function () {
        NWF$('.secondTab').fadeIn();
        NWF$('.thirdTab').fadeOut();
    });
    NWF$('#3Next').click(function () {
        NWF$('.fourthTab').fadeIn();
        NWF$('.thirdTab').fadeOut();
    });
    NWF$('#4Prev').click(function () {
        NWF$('.thirdTab').fadeIn();
        NWF$('.fourthTab').fadeOut();
    }); 
});

The Result

Want to see it in action??? Using Nintex Live, you can experience the awesomeness! Click the following URL: http://ntx.lv/1Xf39sz