Online Custom Certificate Printing

Learn how to let people provide content for a custom printer-ready certificate — on your website.

(Or other types of documents. See end of article for ideas.)

Why would people want to do that? To award good performance. To impress people (and themselves). Or just to have fun.

The web page where the certificate is customized contains a form. As text is typed into the form, the certificate is customized automatically. When done, the "Print" button is clicked.

When the button is clicked, the certificate will print without the form.

Here's a printable custom certificate demonstration.

The demonstration is intentionally simplistic to demonstrate functionality. For a real implementation, a more appropriate certificate can be used and other customization sections added.

A number of things work together to make the functionality possible:

1. CSS is used to remove all content from the web page except the certificate when the "Print" button is clicked.

2. The certificate is an image with divs overlaying it. The divs contain the custom information to be printed onto the certificate.

3. The form is where the person types in the information to customize the certificate.

4. JavaScript transfers what's typed into the form onto the certificate as the person types.

To describe all the actions in detail would result in a small book. What I'll do, instead, is provide an overview. Please use the form text box at the end of the article to ask any questions you may have about how it works — but remember to include your email address so we can respond.

The source code of the demonstration can be obtained by saving the demonstration page to your hard drive. It'll work just fine on your hard drive if you load the file into your browser.

Alternatively, copy the source code right here. (Notes follow.)

<style type="text/css">
.no-print-div {
   width:4.9in;
   margin:0 auto;
   border:1px solid black;
   border-radius:9px;
   padding:5px 1.5in 10px 1.5in;
   font-family:arial;
   }

.div-to-print {
   position:relative;
   margin:1in auto;
   font-family:times;
   width:8in;
   }
#name-line-and-position {
   position:absolute;
   width:8in;
   top:2.25in;
   left:0px;
   font-size:.5in;
   font-style:normal;
   font-weight:bold;
   text-align:center;
   }
#for-line-position {
   position:absolute;
   width:6.5in;
   padding:0 .75in 0 .75in;
   top:3.83in;
   left:0px;
   height:1.54in;
   overflow:hidden;
   }
#for-line {
   display:table;
   margin:0 auto;
   font-size:.3in;
   font-style:normal;
   font-weight:normal;
   text-align:justify;
   }

@media print {
   .no-print-div {
      display:none;
      }
   }
</style>

<!-- The instructions above the certificate. -->
<div class="no-print-div">
<div style="float:right; margin-top:.35in;"><a href="//www.willmaster.com/"><img src="//www.willmaster.com/images/wmlogo_icon.gif"></a></div>
<h1 style="color:#666;">Custom Certificate</h1>
<p>
Below the image of the certificate is a form.
</p>
<p>
Type into the form fields to customize the certificate.
</p>
<p>
When done, click the "Print" button.
</p>
<p style="font-size:smaller; font-style:italic;">
Save this entire page for a local demonstration.<br>
See <a href="//www.willmaster.com/">Willmaster.com</a> for article with instructions.<br>
Provided by <a href="//www.willmaster.com/">Will Bontrager Software LLC</a>.<br>
Created Monday, July 13, 2015.
</p>
</div>


<!-- The certificate. -->
<div class="div-to-print">
<img src="certificate-text.png" style="width:100%; height:auto; border:none; outline:none;">
<div id="name-line-and-position"></div>
<div id="for-line-position">
   <div id="for-line"></div>
</div>
</div>


<!-- The form to customize the certificate. -->
<div class="no-print-div">
<p>
Name on form:<br>
<input id="name-form" type="text" style="width:100%" onkeyup="TransferText()" onchange="TransferText()">
</p>
<p>
Description:<br>
<textarea id="for-form" style="width:100%; height:1in;" onkeyup="TransferText()" onchange="TransferText()"></textarea>
</p>
<p>
<input type="button" value="P R I N T" style="width:100%" onclick="TransferText(); print()">
</p>
</div>


<!-- The JavaScript to transfer text from the form onto the certificate. -->
<script type="text/javascript">
function TransferText()
{
   document.getElementById("name-line-and-position").innerHTML = document.getElementById("name-form").value;
   document.getElementById("for-line").innerHTML = document.getElementById("for-form").value;
}
TransferText();
</script>

The above is the code for the working parts of the online demonstration (link further above). The various sections are color-coded.

• The CSS style sheet is colored blue.

• The code for the certificate is colored red.

• The JavaScript is colored green.

• The instructions above the certificate and the form below the certificate are colored black.

While typing is being done in the form, JavaScript transfers each character to the certificate as they are typed.

When the "Print" button is clicked, CSS removes the instructions and the form from the copy sent to the printer so only the certificate is left on the page to print.

A few notes about the CSS: In addition to styling the various elements of the page, the CSS stylesheet contains three items of special note.

1. A .no-print-div selector. Elements of the demonstration page that should not print to the printer are enclosed in divs with this class name. They are the instructions above the certificate and the form below the certificate.

2. A .div-to-print selector. The demonstration certificate, which should print to the printer, is enclosed in a div with this class name.

3. A @media print selector. This selector assigns a display:none; declaration to the .no-print-div selector when the page is sent to the printer. It causes those elements to be removed from the page before it's sent to the printer. (They aren't removed from the web page, just from the copy sent to the printer.)

There are many interconnections, as you'll see when you study the code. As you'll also see when you use the demo, it works a treat.

To keep it uncluttered, it's not mentioned on the certificate customization form, but HTML code is allowed by default. Thus, indents, font changes, images, and other HTML elements can be used to customize the certificate. If desired for your implementation, the JavaScript could be customized to strip HTML tags.

When the certificate is printed from the web page, the user's browser may send the web page URL and other information to the printer for printing onto the page — in addition to the certificate. It depends on the user's browser and, if choice is available, the browser and printer settings.

The demonstration's simplistic certificate may be replaced for a more useful implementation. The form and JavaScript may be updated for additional customizations.

In addition to printing the certificate from the web page, consider these updates:

1. Let people generate a custom PDF of the text on the certificate. They can email the PDF to the award recipient, or to their friends for printing.

2. Let people generate an image of the custom certificate, perhaps with a choice of image size. Like a PDF, an image can be emailed. The image can also be posted elsewhere, like on Pinterest or Facebook. Or even Twitter.

Both of the above additions would require custom coding. You're bound to be pleased with the result.

Further, you're not restricted to certificates. Other types of documents can be customized with this method. Examples:

1. An image with a cartoon balloon can contain custom text. It can be a talk balloon or a thought balloon. Users might decide to post the image on their social media accounts. This could be a lot of fun.

2. Custom text above or below an image, or wrapping around an image. This could be implemented where the person might write a short story about the subject of the image to give to their friends, or just to keep.

3. Letter templates can be personalized and perhaps customized in a few places. Templates could be love letters, resignation letters, proposals, pretty much anything people need help with.

Let your imagination roam. You'll think of several things that could attract site visitors, I'm certain.

(This article first appeared in Possibilities ezine.)

Will Bontrager