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.

Watermarks

Prerequisites

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

Setup

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}
</style>

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.

$("input[title='Author']").addClass('watermarked');
$("input[title='Title']").addClass('watermarked');
$("textarea[title='Body']").addClass('watermarked');

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.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

3 thoughts on “Improving #SharePoint Forms – Watermarks

Leave a Reply

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