There is an enormous variety of forms being used at clinics today.  It would be impossible for the original OSCAR team to create e-forms for every single one.  Besides, the beauty of OSCAR's open source individual-oriented concept is that our software and features are easily used to make OSCAR functional for your unique work environment.

If you have a basic knowledge of HTML, you should be able to design forms to input/output data for a patient. The process is simple:

1. Design HTML form – Be familiar with the rules (see the next section) and design the HTML page.
   
2. Upload the form – Log in as admin and go to ‘E-Form’ topic.
3. Upload images if required – see above
4. Test – Log in as provider and go to a patient’s Master page.

Step 1- Designing the Form

• Strategy A: If the form is quite simple, you can create a new html form from scratch using the paper form as a model.  Be sure to look through the HTML rules below when designing your form.  Sometimes, it is easier/quick to use Dreamweaver or FrontPage to do the work.
• Strategy B: If the form is more complex, you can scan the original paper form onto your computer, and follow the instructions below to add html text fields and checkboxes to the image. 
  

1. Scan the form onto your computer.  Save it as a .GIF file. 
   
2. Using a program like Paint, go through the image and clean up any shadows or spots created by the scanning.  Resize the image so that the page fits on one page, if possible.
3. Create an html document in a program like Notebook using this template.
   
4. Change the image source to the .GIF file of the scanned form, then preview the page in your internet browser. 
   
5. The JavaScript allows you to view the position of your cursor (Left, Top).  Place your cursor over the point where you would like a text field or checkbox to begin on your form, and record the pixel position to be specified in your html code.
   You can also measure the length/height of a text area: hold the SHIFT key down while clicking 2 points on your screen, and an alert box will pop up with either the x or y distance between the two points (it will measure the longer of the x and y distances between the points).
   
6. For each new text/check box, copy and paste the desired element's code in the html template directly under where it says <!-- --All textfields/checkboxes/textareas go here...-->, and modify the tag with the correct position, name, box length, etc. 
   

   Text box (one line): 
   <div style="position: absolute; left:90px; top:5px;"> 
   	<input type="text" class="noborder" name="thisfield121" style="width: 289px; font-family: Arial; font-size: 12px;" tabindex="1">
   </div>
   
   Text area (multiple lines):
   <div style="position: absolute; left:90px; top:30px;"> 
   	<textarea class="noborder" name="thisfield122" style="height: 83px; width: 289px; font-family: Arial; font-size: 12px;" tabindex="2"></textarea>
   </div>
   
   Check box:
   <div style="position: absolute; left:90px; top:130px;">
           <input type="checkbox" name="thischeckbox1042">
   </div>

7. Keep the class attribute the same ("noborder") in order to ensure that none of the borders of the boxes appear in the final printed form.  If you wish for OSCAR to fill in patient information automatically from the patient's e-chart, use the oscarDB tags shown below in the HTML rules.
   NOTE: Make sure all of the HTML rules explained below are met for each tag of your form, or the data in your form may not be saved!
   
8. With each new element, preview the page in your internet browser to make sure the length, location, etc. is correct.  If you wish to see what the form will look like when printed, you can click "Print Preview" in your internet browser.
9. Repeat steps 5-7 until the form is complete.  Test the form by filling out every text field and checking every checkbox, then printing the form.  You may wish to erase unnecessary boxes and lines from the form image in a photo editing program (ex. Paint), now that electronic boxes are now in place.
   
10. Before you add your e-form to OSCAR:
    
    • Change your image source to <IMG SRC="${oscar_image_path}imagename.gif">; this will allow OSCAR to find the form image when pulling up the form. 
      
    • Remove the mouse cursor location JavaScript from your code:
      

      From:
      <!-- SCRIPT GIVES THE MOUSE COORDINATES----- -->
      <script type="text/javascript" language="javascript">
      var isIE = document.all?true:false; 
      ...
      To:
         }
      }
      </script>

HTML RULES

1. These tags are designed for users to use if they want certain fields to be automatically filled out with information from the patient's chart. Copy the tags directly in the HTML file for the wanted items.
2. The name of each text field and checkbox MUST be unique.  The information WILL NOT SAVE if there are duplicate names. The name of the tag should start with “name_”. The name looks like “name_yourDefinedName”.
   
3. Make sure you remember to save your form as an .html file.
   

Step 2- Uploading the E-Form

1. Go to the Admin screen.  Click on "Upload a Form" under the E-Forms heading.
   
2. Enter the form's name and subject (this can be a description of the form, or the category under which the form falls).  Click "Browse", and locate the html file of your form.  Click "Upload".
   
3. Once the form is added, we can click on form name to view it.  One thing you might notice is that the image cannot be displayed: this is because it hasn’t been stored on the OSCAR Server yet.  This is the next step!
   

Step 3- Uploading the Form Image

In order to display the image properly on the E-Form, we have to upload the image to E-Form Image Container.

1. In the Admin view, click on "Upload an Image" under the E-Forms heading.
   
2. Click "Browse" and locate the right image.  Click "Upload".
   
3. Click on the image link to check that the image uploaded properly.

Step 4- Testing the Form