Improving #SharePoint Forms – Watermarks

So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.



  • jQuery Library referenced in the page
  • CEWP on the page


First make sure you reference a copy of the plugin script. I added the link to the section of the page using the method explained in this post.

<script type="text/javascript" src="../../jquery.tinywatermark-2.0.0.js"></script>

We also need some css to style the watermarks

  <style type="text/css">
  .watermark {color:#999}

The plugin works by finding all the inputs with a class of “watermarked” and using this title attribute as the watermark. So I used jQuery to select the inputs I wanted to watermark and add the “watermarked” class to them.

Here is the code I used.


After the inputs have the right class all we need to do is call the plugin script like so

$('.watermarked').each(function() {
  $(this).watermark('watermark', $(this).attr('title'));

Thats all. Enjoy.

3 Responses

Add a Comment

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