Set Placeholder Text Hints for Text Box Controls

This asset provides code-snippets and an example form demonstrating how to implement form hints on single-line and multi-line text box controls using the placeholder HTML attribute and a little jQuery.

AuthorPatrick Abel
Long DescriptionPlaceholder text is descriptive text which is displayed inside an empty input field. When a user begins filling out that field, the placeholder text (hint) then disappears. In-context descriptions like this are often used to help clarify what goes inside each form field, and therefore improve your user’s completion and conversion rates. Steps to implement (without using Sample Form):Right-click the form control you’d like to append placeholder text to and select SettingsWithin the Advanced region, set the Store Client ID in JavaScript variable property to YesWithin the same settings region, give your form control a Client ID JavaScript variable (i.e. SampleSingleLineTextBox) and click Save.Open Form Settings and include the below script in the Custom JavaScript text area:NWF$(document).ready(function () {    
  // Sample using a text-box with a JavaScript Client ID variable of 'SampleSingleLineTextBox'     
  NWF$('#' + SampleSingleLineTextBox).attr("placeholder", "Enter Title here (i.e. 'My Title')");
});
Done!
DependenciesNone.
Support InfoPatrick Abel | Summit 7 Systems patrick.abel@summit7systems.com
CompatibilityNintex Forms 2013
Nintex Forms for SharePoint Online
PlatformSharePoint Server 2013
Office 365
Screenshots
Additional InformationComponents included in the Asset:Sample form (.nfp file) demonstrating the use of placeholder text on both a Single Line Text Box and Multi Line Text Box control.
JavaScript code snippet which is embedded in the form to leverage the form control’s JavaScript Client ID variables to append the placeholder text when the form loads.

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

Leave a Reply

Your email address will not be published. Required fields are marked *