Set Placeholder Text Hints for Text Box Controls

Document created by patrickabel Champion on May 3, 2016Last modified by eharris04 on Mar 6, 2017
Version 11Show Document
  • View in full screen mode

Summit 7 Systems logo

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

4 people found this helpful

Outcomes