Set Placeholder Text Hints for Text Box Controls

Document created by Patrick Abel Champion on May 3, 2016Last modified by Patrick Abel Champion on Aug 10, 2016
Version 8Show Document
  • View in full screen mode

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 Description

Placeholder 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):

  1. Right-click the form control you'd like to append placeholder text to and select Settings
  2. Within the Advanced region, set the Store Client ID in JavaScript variable property to Yes
  3. Within the same settings region, give your form control a Client ID JavaScript variable (i.e. SampleSingleLineTextBox) and click Save.
  4. 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 Info

Patrick Abel | Summit 7 Systems | patrick.abel@summit7systems.com

Compatibility

Nintex Forms 2013

Nintex Forms for SharePoint Online

Platform

SharePoint Server 2013

Office 365

Screenshots

Screen Shot 2016-05-31 at 5.07.45 PM.png

Additional Information

Components included in the Asset:

  1. Sample form (.nfp file) demonstrating the use of placeholder text on both a Single Line Text Box and Multi Line Text Box control.
  2. 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.

 

Nintex Forms

1 person found this helpful

Outcomes