Simple Help Desk System Using Master Form V4
Create your own Help Desk using Master Form V4 and a little JavaScript. It's a great solution for support personnel who require an email system to correspond with clients rather than using a web based forum.
This system utilizes the numbering system feature of Master Form V4 to offer ticket tracking. With this feature, each customer support request is assigned a unique tracking number, thus keeping the system organized.
This article also shows how to view all of support tickets online in a password protected area.
Step 1. Create a form where customers can initiate support requests.
Example code:
<form action="http://www.YourDomain.com/cgi-bin/mf4/MasterFormV4.cgi">
<input type="hidden" name="requiredfields" value="name,email,product,domain,problem">
<input type="hidden" name="redirect" value="http://www.YourDomain.com/helpdesk/thankyou.html">
<input type="hidden" name="filetemplate" value="helpdesk/hdtablefiletemplate.txt">
<input type="hidden" name="dbfile" value="/helpdesk/hdtableinfo.js">
<input type="hidden" name="filetemplate" value="helpdesk/hdticketfiletemplate.txt">
<input type="hidden" name="dbfile" value="/helpdesk/[[use_number]].html">
<input type="hidden" name="emailtemplate" value="helpdesk/hdemailtemplatear.txt,helpdesk/hdemailtemplate.txt">
<input type="hidden" name="use_numbering_key" value="Help Desk Ticket">
<input type="hidden" name="use_numbering_start" value="12160700">
<h3>Customer Support Form</h3>
<p>** Enter a customizable message for customers here. **</p>
<p>Name: <input type="text" name="name"></p>
<p>Email: <input type="text" name="email" id="email">
<p>Product- Select One:<br>
<select size="4" name="product" id="product">
<option value="Product 1">Product 1</option>
<option value="Product 2">Product 2</option>
<option value="Product 3">Product 3</option>
<option value="Product 4">Product 4</option>
</select> </p>
<p>Purchasing Company Domain: <input type="text" name="domain" id="domain">
<h4>Issue:</h4>
<p>Please describe the problem in as much detail as possible. </p>
<textarea name="problem" id="problem" cols="45" rows="10"></textarea>
<br><br>
<input type="submit" name="button" id="button" value="Send to Customer Support">
</form>
The form would look like this:
Step 2. Create a thank you page.
On the thank you page, (named, for this example thankyou.html) additional resources such as Frequently Asked Questions, links to manuals, etc. could be listed.
Step 3. Create two email templates.
Upload the email templates to a subdirectory, possibly "helpdesk" per the example, within the Master Form V4 installation directory.
Following is example "hdemailtemplatear.txt", the autoresponse sent to the customer.
To: "[[name]]" <[[email]]> From: support@YourDomain.com Subject: Support TT:#[[use_number]] This is an automated response from the Support system. We received your message and assigned it tracking number [[use_number]]. We will be in touch with you shortly. We look forward to assisting you. Thank you for taking the time to write to us! -- Site Owner/ Support Person
Next is the "hdemailtemplate.txt" template. This will be the email the site owner (or other designated person) receives when a customer submits a support request.
To: Support@YourDomain.com From: "[[name]]" <[[email]]> Subject: Support TT:#[[use_number]] The following support ticket was submitted on [[MONTH2]]/[[DAY2]]/[[YEAR2]] at [[AMPMHOUR]]:[[MINUTE2]] [[AMPM]] PST Name: [[name]] Product: [[product]] Domain: [[domain]] Issue: [[problem]]
To view the support submission database in a web page, complete these steps:
Step A. Create a password- protected directory.
Click here and follow the instructions to create a simple password protected area.
Assuming the web page is called index.html and is located in a subdirectory of the root directory named "helpdesk" the URL would be:
http://www.YourDomain.com/helpdesk/index.html
Step B. Create two filetemplates.
One template, hdtablefiletemplate.txt, will create a JavaScript file, hdtableinfo.js, that will provide the tabular data displaying the support submissions within a webpage. (This article provides instructions on how to include a Master Form V4 database within a webpage.)
"hdtablefiletemplate.txt"
document.write(' <tr>');
document.write(' <td>Pending</td>');
document.write(' <td>');
document.write('[[product]]');
document.write('</td>');
document.write(' <td><a href="http://www.YourDomain.com/helpdesk/');
document.write('[[use_number]]');
document.write('.html">');
document.write('Ticket #');
document.write('[[use_number]] ');
document.write('/ ');
document.write('[[domain]]');
document.write('</a>');
document.write('</td>');
document.write(' <td>');
document.write('[[MONTH2]]/[[DAY2]]/[[YEAR2]]');
document.write('</td>');
document.write(' </tr>');
Step B. Create two filetemplates.
One template, hdtablefiletemplate.txt, will create a JavaScript file, hdtableinfo.js, that will provide the tabular data displaying the support submissions within a webpage. (This article provides instructions on how to include a Master Form V4 database within a webpage.)
"hdtablefiletemplate.txt"
<html>
<head>
<title>Support Ticket [[use_number]]</title>
</head>
<body>
<h3>Support Ticket [[use_number]]</h3>
<p>Name: [[name]]</p>
<p>Email: <a href="mailto:[[email]]">[[email]]</a></p>
<p>Product: [[product]]</p>
<p>Domain: [[domain]]</p>
<p>Issue:<br>
<p>[[problem]]</p>
</body>
</html>
This example.html file will display the support submissions (using the JavaScript method as outlined in the article, Include a Master Form V4 Database in a Web Page, and would go within the password protected area created in Step A.
<html>
<head>
<title>Support Submissions</title>
</head>
<body>
<table border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="4" align="center">Customer Support Ticket List</td>
</tr>
<tr>
<td><strong>Status</strong></td>
<td><strong>Product</strong></td>
<td><strong>Ticket Number / Domain</strong></td>
<td><strong>Created</strong></td>
</tr>
<script type="text/javascript" language="JavaScript" src="hdtableinfo.js"> </script>
</table>
</body>
</html>
>
There you have it. A great way to get organized with a Help Desk system using Master Form V4.
Jackie McCutcheon
