Have Print, Will Watermark!

Nintex Forms recently released the awesome functionality of Print to PDF. This feature allows users to render their forms in a PDF format for either printing or saving. Since you are using Nintex Forms, which allows designers to add custom CSS, I thought we should take it one step further and add a watermark to our printed forms!

Wanna see it? Here it goes!

The Build

Open the Nintex Forms designer for either SharePoint 2010 or 2013 and expand the length of the canvas in Form Settings.

Next, add a bunch of Single Line Text  and Date/Time controls to your form. I would also recommend adding some labels to identify the input type controls.

Within the form, you'll see a box that I've added behind some of the input controls. This is a Rich Text control.

Next, I'll show you why you just added that Rich Text Control to your form!

The Code

In the Rich Text Control, open the configuration settings and then click on 'Edit Source' in the control ribbon. Next, add the following HTML:

<<p id="watermark">Watermark!</p>

Next, open the Nintex Forms tab > Settings > Custom CSS and add the following CSS at the top:

@media print {
#watermark {
 font-size: 50px;
 font-weight: bolder;
 opacity: 0.5 !important;
 font-color: black;
 padding-top: 30px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
}#watermark {
 font-size: 50pt;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 opacity: 0.0;}

The Result

After you publish your form, go ahead and create a new item. Place info in all of the inputs and save. Open the newly created item (notice no watermark) and click on the 'Print to PDF' button located on the ribbon and look at your new work!