2.5.4 Finishing it up signature stamp, checkbox sizing and more

How to incorporate the electronic equivalent of your signature stamp in an eForm, control checkbox size and more

Finishing it up

The eForm opens up a large range of possibilities to introduce functionality that extends the basic form. Below are several examples that users have found to add utility or change appearance of the eForms that are used.

Signatures

If you have need of a signed eForm (say for faxing from the computer) and you can't browbeat the agency to accept "digitally authenticated" nonsense that the specialists like to use, you can contain scanned signatures within each form. This merely replaces the signature stamp that your MOA might apply to a paper form. This I would point out, does not fulfill the requirements of an "original signature", for that see technique 3.

Technique 1

This following technique is expandable to any number of signed versions of a form. This technique is more involved but allows the end user to pick the signature, and the signature can overlap form elements (very useful for busy forms)

1) Say you have a scanned mammography form "mammo.png". Scan a signed copy at the same settings (Or just add the image of your signature to the blank with image editing software such as the Gimp) to form mammoPHC.png for Peter's signed form, mammoNNN.png for Nancy's signed form etc

2) add javascript in the head of the form to reference the series of forms in an array

<script type="text/javascript">

var ImgArray = [
"${oscar_image_path}mammo.png",
"${oscar_image_path}mammoPHC.png",
"${oscar_image_path}mammoNNN.png",
];

function ChangeImg(imgPtr) {
     document.getElementById('CommonImg').src = ImgArray[imgPtr];
}

</script>

3) Ensure that the background image has an id. You can use any id you like, but it should be unique and the id in the script and image should match. For the example I gave the image in the form would be referenced as below with an id of CommonImg

<img id="CommonImg" src="${oscar_image_path}mammo.png" 
 style="position: absolute; left: 0px; top: 0px; width:750">

3) add check boxs at the bottom of the form in the no print area for the user to choose from.

<br><input type="radio" name="imgControl1" id="0" value="0" onclick="ChangeImg(this.value)" > plain form
<input type="radio" name="imgControl1" id="1" value="1" onfocus="ChangeImg(this.value)" > Signed PHC
<input type="radio" name="imgControl1" id="1" value="2" onfocus="ChangeImg(this.value)" > Signed NNN

Technique 2

An alternate approach is to layer the image of the signature on the form. This technique has the advantage that its more portable as you can reuse the code. Its only disadvantages are that if there is any form element (eg checkbox) that is overlapped by the rectangle of the signature image, then you will not be able to access it, and you are stuck using the signature that it offers you.

1) Scan copies of the signatures that you will use and save them with transparent backgrounds PHC.png for Peter and so on. Name a transparent image (it can be a single pixel) BNK.png

2) Add Javascript to check against the patients physician which signature file should be used (match the indexOf to the particular names of the doctors in your case)

<body Onload="SignForm(); ">

<input type="hidden" name="physician" id="physician" oscarDB=doctor >

<script type="text/javascript">
function SignForm(){
       if (document.getElementById('physician').value.indexOf('zapski')>0){
               document.getElementById("signature").src = "${oscar_image_path}PHC.png";
       }
       else if(document.getElementById('physician').value.indexOf('dermott')>0){
               document.getElementById("signature").src = "${oscar_image_path}TMD.png";
       }
       else if(document.getElementById('physician').value.indexOf('urman')>0){
               document.getElementById("signature").src = "${oscar_image_path}MCH.png";
       }
       else {
               document.getElementById("signature").src = "${oscar_image_path}BNK.png";
       }
}
</script>

3) The second piece is a reference to the transparent blank file as a placeholder for the signature at a given position on the form where you want the signature to appear.

<div style="position: absolute; left: 80px; top: 940px; z-index:2;">
<img id="signature" src="${oscar_image_path}BNK.png" width="260" height ="40">
</div>

Technique 3

Sometimes you just need an original signature. This can be provided by the use of a tablet device (eg one made by Topaz) to capture the signature and the drawing eForm. This is the simplest approach. Just use your form for the background of one of the graphical forms on the Oscar User Society webpage. The only design disadvantage is that you cannot easily overlap the drawing area with the areas that have form elements (buttons, text areas, check boxes and the like) and retain access to the elements, so be sure to size the drawing area accordingly.

Checkbox Sizing

Forms need large clear check boxes. You can make check boxes larger by assigning them to a class with a style sheet indicated as below. 1.3x for the screen and 1.8 for printing works well with Firefox 3.5 on Windows systems, your mileage may vary.

<head>

<style type="Text/css">
input.largerCheckbox {
	-moz-transform:scale(1.3);         /*scale up image 1.3x - Firefox specific */
	-webkit-transform:scale(1.3);      /*Webkit based browser eg Chrome, Safari */
	-o-transform:scale(1.3);           /*Opera browser */
}
</style>
<style type="text/css" media="print">
input.largerCheckbox {
	-moz-transform:scale(1.8);         /*scale up image 1.8x - Firefox specific */
	-webkit-transform:scale(1.3);      /*Webkit based browser eg Chrome, Safari */
	-o-transform:scale(1.3);           /*Opera browser */
}
</style>
<!--[if IE]>
 <style type="text/css">
 input.largerCheckbox {
	height: 30px;                     /*30px checkboxes for IE 5 to IE 7 */
	width: 30px;
 }
 </style>
<![endif]-->

</head>

For the body of the eForm ensure that all checkboxes are marked for the largerCheckbox class.

<body>
<form action="./">

<input type="checkbox" class="largerCheckbox" name="checkBox">

</form> 
</body>

This code works on

Firefox 3.5 or newer
Safari (or similar WebKit) 3.1 or newer
IE 5-7 or IE 8 running compatibility mode
Opera 10.5

Multi-page Forms

Forms sometimes extend past several pages. There have been several ways the community has done this, and perhaps the most elegant solution is as below. You can control the images so that they print one to a page using relative and absolute position. A simplified 4 page form is displayed below with most non essential javascript and style removed for clarity. Note that each page lies within a division whose position is relative and which has a forced page break. Images are within the division and do not have a position, but can be expressly labeled as relative. Inputs within the page division have absolute positions.

<HTML>
<head>
</head>

<body>
<form method="post" action="" name="fourPageForm">

<div id="page1" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport1.png" style="position: relative; left: 0px; top: 0px; width:750px">
<input name="Patient_Name1" type="text" class="noborder" style="position:absolute; left:59px; top:153px; width:337px; height:34px;"  oscarDB=patient_nameF>
</div>
	
<div id="page2" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport2.png" width="750"> <!-- Because the img is within a div that has a relative position its not necessary to express the position  -->
<input name="Page2_1" type="text" class="noborder" style="position:absolute; left:64px; top:44px; width:228px; height:39px;" >
</div>

<div id="page3" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport3.png" width="750">
<input name="Page3_1" type="checkbox" class="largerCheckbox" style="position:absolute; left:65px; top:173px; ">
</div>

<div id="page4" style="page-break-after:always;position:relative;" >
<img src="${oscar_image_path}ServiceCanadaMedicalReport4.png" width="750">
<textarea name="Page4_1" class="noborder" style="position:absolute; left:70px; top:740px; width:310px; height:70px;"  oscarDB=clinic_address></textarea>
</div>

<div class="DoNotPrint" style="position: absolute; top: 3900px; left: 10px;">

<table>
	<tr>
		<td class="subjectline">

			Description: <input name="subject" size="20" type="text">
			<input value="Submit" name="SubmitButton" type="submit">
			<input value="Reset" name="ResetButton" type="reset">
			<input value="Print" name="PrintButton" type="button" onClick="window.print();">
			<input value="Print & Submit" name="PrintSubmitButton" type="button" onClick="window.print();document.forms[0].submit()">

		</td>
	</tr>
</table>

</div>
</body>
</html>

Document Actions

Send this

Personal tools