Altered Inputs in Nintex Forms

Aside from Labels, Single Line Text Boxes are probably one of the  most used controls in Nintex Forms. However, most users don't know what else you can do with a Single Line Text Box control with a little JavaScript. All we will be doing in these examples is altering the attributes of the controls and taking advantage of some of the  HTML5 functionality.

The Build

Let's go ahead and add some Single Line Text Box Controls to a Nintex Form in the Nintex Forms Designer.

The important part to remember is to add the correct name for the intended control in the JavaScript variable name field in the Control Settings. 

For example, if we wanted to create an input to collect emails, we can call the variable name 'varEmail'.

Add a Single Line Text Box for each of the Variable Names listed below:

varPerson

varEmail

varRange

varColor

varReset

The Code

Below is the JavaScript that we will use to replace the attributes of the Single Line Text Boxes:

 NWF$(document).ready(function () {
 NWF$('#' + varPerson).attr("Placeholder", "First Name");
 NWF$('#' + varEmail).attr({type:"email", Placeholder:"name@domain.com"});
 NWF$('#' + varRange).attr({type:"range", min:0, max:12, value:2});
 NWF$('#' + varReset).attr("type", "reset");
 NWF$('#' + varColor).attr("type", "color");
 NWF$('#' + showColor).attr("type", "button");
 });

For example, the Range  Single  Line Text Box can be configured to have a default  value, and minimum/maximum values for how far the slider will move.

NOTE: The color picker will work in Chrome (not IE, currently).

The Result

In Internet Explorer, you can see how the form will render with  the input slider:

Here is a cool little trick too, you can HTML5 to validate the value in the email input is actually in an email format (still will not verify if the address actually exists though):

Also, all of these controls can be connected to your SharePoint columns to collect the values you have entered on the form!

Feel free to leave comments if you have any questions about the form layout or code!