Search the OSCAR Documentation
< All Topics
Print

Creating eForms from Scratch/eForms HTML Tutorial

Documentation Copyright © 2022 by Adrian Starzynski under the Creative Commons Attribution-Share Alike 3.0 Unported License

The purpose of this article is to give you a quick “copy and paste” tool to make your own eForms the advanced manual method (the easier and method is to use OSCAR’s built-in eForm generator). If you want to learn more advanced stuff, check out online tutorials such as W3 Schools. I refer back to this site often for my eForms.

Basics

Here’s the basic skeleton of a webpage:

<html>
<head>
<title> </title>

</head>
<body>

</body>
</html>

Copy and paste the above into a text editor such as simply Notepad on Windows, or fancy plain text editor programs such as Notepad++ on Windows or Coteditor on Mac (AUTHOR of this article recommends you use Notepad++ for Windows and Coteditor for Mac).

Save the file as “filename.html”. Make sure you select “all files” under the “save as type”.

Everything is enclosed between an “opening tag” that look like <tag> and a “closing tag” that looks like </tag>.

The <html></html> tells the browser that it’s an html file, aka a webpage.

The <head></head> contains extra information that is useful for displaying the page

You can put in a title between the <title></title>, and it’ll show up in the title bar

All the code inside the <body></body> are the actual contents that you get to see in the browser.

Make sure you don’t overlap different opening and closing tags. For example,
<tag1> <tag2></tag2> </tag1> is ok, but
<tag1> <tag2> </tag1> </tag2> is not ok.

Inserting the image file

Now, it’s time to put in the image file:

<div style="position: absolute; left: 10px; top: 10px;" >
	<img src="${oscar_image_path}imagename.png" width="750">
</div>
<!-- You can remove ${oscar_image_path} as you develop the eForm, but make sure you put it back before uploading to OSCAR otherwise the image wouldn't show. -->
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in Windows, but not in OSCAR because it's based on a Linux platform -->

Copy the above and paste between the <body> and </body>

Make sure you put the image file and the html file in the same folder while you’re editing the eForm

Temporarily delete the ${oscar_image_path} inside the <img> tag if you’re editing the file locally. You’ll need to put it back in after you upload it onto OSCAR.

Note: I find that having an image with a width of 750 pixels fits a letter-sized paper the best (I set the print margins in firefox to “0”). I usually prepare the image file so that it’s 1500 pixels wide, so that it scales down by 50% in the browser.

Inserting the ‘form’ element

<form method="post" action="" name="FormName">
<!--  put all the form inputs here-->


<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
	<tr>
		<td>
			Subject: <input name="subject" size="40" 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()">
		</td>
	</tr>
</table>
</div>
</form>

Copy the above and paste between the <body> and </body>

You can customize the position of the submit buttons by changing the numbers in blue

Install the tools to help with placement of the input boxes

<!-- SCRIPT GIVES THE MOUSE COORDINATES - Hold SHIFT and click two points for distance between -->
<script type="text/javascript" language="javascript">
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
document.onclick = captureposition;
var capX = 0;
var capY = 0;
var sy = 0;
var sx = 0;

function getMousePosition(e) {
var _x;
var _y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
  document.title = _x + " " + _y;
  return true;
}
function captureposition(e) {

  if (e.shiftKey) {
     if ((capX == 0) && (capY == 0)) {
        capX = e.pageX;
        capY = e.pageY;
     } else {
        var diffX = e.pageX-capX;
        var diffY = e.pageY-capY;
        if (Math.abs(diffX) > Math.abs(diffY)) {
            alert('X-coordinate distance: ' + diffX + 'px');
        } else {
            alert('Y-coordinate distance: ' + diffY + 'px');
        }
        capX = 0;
        capY = 0;
     }
   }
}
</script>
<!-- ----------End coordinate script--------------------------------------------------------- -->

Copy above and paste between <head></head>

This script will give you the mouse coordinates in the titlebar, so you can find out where to put the input boxes

I simply delete the above script when I’m done with putting in the input boxes.

The Inputs

Rules:

  • Each input needs a name. If not, oscar won’t remember it after you’ve submitted it
  • Each input name has to be unique
  • The input name cannot contain spaces or symbols

Single-line text input

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;">
</div>

Copy above and paste under the <!– put all the form inputs here–> inside the <form></form>.

Move your mouse to the top left corner of the form input box and note the x and y coordinate. Substitute these numbers into the “left: Xpx” and the “top: Ypx;”.

Move your mouse to the left edge of the form input box, press-and-hold the shift key, click on the left edge then click on the right edge of the input box. A pop-up box will come up showing you the width of the box. Input this number into the “width: Wpx;”.

Multi-line text input

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;"></textarea>
</div>

Again, you’ll have to customize the “left:”, “top:”, “width:”, and “height:” numbers to the form.

Checkboxes

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="CheckboxName" type="checkbox">
</div>

The actual X and Y coordinates of the checkboxes are somehow about 4 pixels less than the indicated numbers

Radio Buttons

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="RadioName" type="radio" value="value1">
</div>
<div style="position: absolute; left: 100px; top: 110px;">
        <input name="RadioName" type="radio" value="value2">
</div>

The actual X and Y coordinates of the checkboxes are somehow about 4 pixels less than the indicated numbers

Auto-populating input fields from the OSCAR database

A list of database info that you can auto-populate into eForms can be found here.

To use these, just put the oscarDB=xxxx inside the input tag. I usually put it right before the closing “>”.

For Example, the following will auto-populate the textarea with the clinic label.

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;" oscarDB=clinic_label></textarea>
</div>

Please note that you DON’T need the quotes around the oscarDB database tag.

Some of the things you’ll need to do to make the eForm print properly

You probably don’t want to print out some of the things on the screen such as the border around the input boxes and the submit/print buttons at the bottom.

To take these away:

1. Copy the following and paste it into the between the <head> and </head>

<style type="text/css" media="print">
<!-- CSS Script that removes the whole division when printing -->
.DoNotPrint {
	display: none;
}
<!-- CSS Script that removes textarea and textbox borders when printing -->
.noborder {
	border : 0px;
	background: transparent;
	scrollbar-3dlight-color: transparent;
	scrollbar-3dlight-color: transparent;
	scrollbar-arrow-color: transparent;
	scrollbar-base-color: transparent;
	scrollbar-darkshadow-color: transparent;
	scrollbar-face-color: transparent;
	scrollbar-highlight-color: transparent;
	scrollbar-shadow-color: transparent;
	scrollbar-track-color: transparent;
	background: transparent;
	overflow: hidden;
}
</style>

2. To remove a whole division (i.e. everything between a <DIV> and </DIV>) when printing, add class=”DoNotPrint” as an attribute in the opening tag of <div>. For example:

<form method="post" action="" name="FormName">
<!--  put all the form inputs under here-->


<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
	<tr>
		<td>
			Subject: <input name="subject" size="40" 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 and Submit" name="PrintSubmitButton" type="button" onClick="window.print(); document.FormName.submit()">
			</td>
	</tr>
</table>
</div>
</form>

3. To remove the outline of an input box when printing, add class=”noborder” as an attribute in the <input>. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;">
</div>

Pre-filling an input box with your customized value

Single-line text input

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder" style="width: 100px;" value="Substitute your pre-filled text here" >
</div>

Multi-line text input

<div style="position: absolute; left: 100px; top:100px;"> 
	<textarea name="MultiLineInputName" class="noborder" style="width:100px; height:100px;"> Substitute your pre-filled text here </textarea>
</div>

Checkboxes

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="CheckboxName" type="checkbox" checked>
</div>

Radio Buttons

<div style="position: absolute; left: 100px; top: 100px;">
        <input name="RadioName" type="radio" value="value1" checked >
</div>
<div style="position: absolute; left: 100px; top: 110px;">
        <input name="RadioName" type="radio" value="value2">
</div>

Pre-checking the gender checkboxes in some eForms

This one is a bit tricky, you’ll have to do a few different things

1. Put the following in between <head> and </head>

<!-- Pre-checking Gender script -->
<script type="text/javascript" language="javascript">
function checkGender(){
	if (document.getElementById('PatientGender').value == 'M'){
		document.getElementById('Male').checked = true;
	}else if (document.getElementById('PatientGender').value == 'F'){
		document.getElementById('Female').checked = true;
	}
}
</script>

2. Put onload=”checkGender();” within the opening <body> tag

<body onload="checkGender();">

3. Put the following with the other input boxes within the <form></form>

<div style="position:absolute; left:100px; top: 100px;">
	<input name="Male" id="Male" type="checkbox" class="noborder">
</div>
<div style="position:absolute; left:110px; top: 100px;">
	<input name="Female" id="Female" type="checkbox" class="noborder">
</div>
<input name="PatientGender" id="PatientGender" type="hidden" oscarDB=sex >

To maximize the eForm window when it opens

Put the following between the <head> and </head>

<script language="JavaScript">
  top.window.moveTo(0,0);
  top.window.resizeTo(screen.availWidth,screen.availHeight);
 </script>

To hide headers and footers on print

By default when you print a page, it will include the page’s “headers and footers”, and browsers will print the web address of the page you printed.
For example:

There are several reasons why you wouldn’t want headers and footers to show on the eForms you print.
For example, that prints your OSCAR’s link/IP address on the page, which isn’t normally something you’d want the public to know of.

To have your printed eForms not show the headers and footers by default, add the following between the <head></head>

*NOTE: This snippet currently works fine on Chrome and Firefox. Safari browser ignores these settings and still prints headers/footers and malforms the page. Chrome and Firefox are the recommended browsers for using OSCAR because Safari doesn’t display certain elements correctly (e.g. certain icons and css).
If you find that an extra page is being added to print, you may want to adjust the padding-top and padding-bottom settings below as necessary.

<style type="text/css" media="print">
@media print {
    @page {
        margin-top: 0;
        margin-bottom: 0;
    }
    body {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}
</style>

Addding fax capability

Your OSCAR must have FAX enabled (via the properties file) and set up to use faxing.
See this article on setting up the SRFax gateway with OSCAR.

Add the following between the <head></head>
Note: if you already have jQuery added, then you can omit the first 3 lines shown below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="../js/jquery-1.7.1.min.js">< \/script>') </script>
<script> window.jQuery || document.write('<script src="jquery-1.7.1.min.js">< \/script>') </script>

<script type="text/javascript" src="${oscar_javascript_path}eforms/faxControl.js"></script>
<script language="javascript" type="text/javascript" src="${oscar_javascript_path}eforms/printControl.js"></script>

This will show the fax controls in the eForm:

Add a one-touch Submit & Fax to destination button

You must already have added the code above (“Adding fax capability”) for the following to work.

If you want to add a button that will submit the eForm and also fax it to a specific fax number, add the code bolded shown below just above the Subject line:

Note: where it says value=”Submit & Fax to Xray Department” you put the name of the place you are faxing to. In the value=’555-555-5555′; you put the fax number where you want the eForm to be faxed once the one-touch Submit & Fax button is pressed.

<div class="DoNotPrint" style="position: absolute; top: 1000px; left: 10px;">
<table>
	<tr>
		<td>
<input type="button" value="Submit & Fax to Xray Department"
onClick="document.getElementById('otherFaxInput').value='555-555-5555';
AddOtherFax();submitFaxButtonAjax(true);  ">
<br>
<br>
			Subject: <input name="subject" size="40" 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 and Submit" name="PrintSubmitButton" type="button" onClick="window.print(); document.FormName.submit()">
			</td>
	</tr>
</table>
</div>
</form>

You can also be fancy and add several of these buttons. I have created a MyHealth Centre Requisition eForm that can be one-touch faxed to a specific destination out of a list just by clicking the desired destination’s button.

Example of how this can look:

Simple only 1 one-touch fax option

Example of the code for multiple one-touch fax options:

Several one-touch fax options
<div class="DoNotPrint" id="BottomButtons" style="position: absolute; top:1000px; left:0px;">
      <table><tr><td>
<br>
<input type="button" value="Submit & Fax to LifeLabs General Fax"
onClick="document.getElementById('otherFaxInput').value='905-795-9891';
AddOtherFax();submitFaxButtonAjax(true);  ">
<input type="button" value="Submit & Fax to Dynacare General Fax"
onClick="document.getElementById('otherFaxInput').value='888-333-8044';
AddOtherFax();submitFaxButtonAjax(true);  ">
<input type="button" value="Submit & Fax to Alpha Lab Nixon"
onClick="document.getElementById('otherFaxInput').value='519-668-6428';
AddOtherFax();submitFaxButtonAjax(true);  ">
<br>
<br>
          Subject: <input name="subject" size="40" type="text"> <br>
//the rest of the form goes here... (not shown for simplicity purposes)

Customizing fonts in the input fields

Put the following between the <head></head>

<style type="text/css">
.style1 {
		font-family: arial, sans-serif;
		font-size: 12px;
		font-weight: normal;
	}
</style>

For more styling, check out the css fonts page at W3schools.com

Insert class=”style1″ as an attribute into the <tag> that you want to customize the text. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="style1" style="width: 100px;">
</div>

If you want to apply multiple styles to the same element, just separate the classes by a space. For example:

<div style="position: absolute; left: 100px; top: 100px;"> 
	<input name="SingleLineInputName" type="text" class="noborder style1" style="width: 100px;">
</div>

Uploading it onto your OSCAR server

Almost done! Make sure you save the file first.

Upload your eForm image file onto OSCAR first:

  1. Click on “Administration”
  2. Under “Manage eForms”, click on “Upload an Image”
  3. Browse to your image file, and click “Upload”

Now upload your html file:

  1. Under “Manage eForms”, click on “Upload”
  2. Type in the “eForm name”, and “Additional Information”
  3. Click “Choose File”, browse to you eForm html file
  4. Click on “Upload”

Once the html file is uploaded, make sure you add the ${oscar_image_path} back into the <img> tag

<div style="position: absolute; left: 10px; top: 10px;" >
	<img src="${oscar_image_path}imagename.png" width="750">
</div >
<!-- You can remove ${oscar_image_path} as you develop the eForm, but make sure you put it back before uploading to OSCAR otherwise the image wouldn't show. -->
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in Windows, but not in OSCAR because it's based on a Linux platform -->

That’s it! Now you can make your own eForm for your office!

Just a few reminders:

  • Make sure you have a unique name for each input element
  • The filenames and image names are case sensitive
Next eForm Magic Part A – Standard Tags
Table of Contents