Feature - Sample HTML Codes for Order Acknowledgement Email
Versions: 8.6 and Above
Sample HTML Codes for Order Acknowledgement Email
The purpose of this document is to assist Elliott source code developers who wish to modify the Elliott HTML Order Acknowledgment email. Prior to Elliott 8.5, we supported text order acknowledgement. In Elliott 8.6 and after, Elliott will optionally support HTML order acknowledgement email as well:
Sample HTML Email Order Acknowledgement Format
The following is a screen capture of the sample HTML format of order acknowledgement email in a browser:
HTML Codes Used in Order Acknowledgement
The following is a list of HTML codes used in HTML Order Acknowledgement emails.
- The <?> and </?> is the common HTML code format that represents the start and end of a section.
- <html> </html> - All Elliott HTML emails should begin with the <html> tag in the beginning. This will cause Elliott's email engine to flag this as "HTML." Without the <html> tag in the beginning of the email text, Elliott's email engine will interpret this as a text email. Thus, the recipients of the email will see html tags in the body of the email, which will make no sense to them.
- <head> </head> - HTML heading: Contains elements that are not displayed in the web browser when a page is loaded.
- <style> </style> - Style: Contains styling declarations to be applied to an element.
- <body> </body> - HTML body: The content of an HTML document.
- <table> </table> - Table: Tabular data within a document. Inside a table, you will find "tr" (table row) and "td" (table data).
- <tr> </tr> - table row (One row.)
- <td> </td> - table data (One cell.)
- <p> </p> - Paragraph: Paragraph of text.
- <b> </b> - Bold: Enclosed text will be bold.
- Border=1 – Creates a border around all table cells.
- Margin – Space around a cell with an object in it.
- Padding – Space around an object within a cell – values entered are in this order: Top, Right, Bottom, Left.
- Text-align – Default is left; other options are Right, Center, Justify.
- Line-height – Default is normal.
- border-collapse:collapse – Adjacent cells have shared borders.
- rowspan – When a cell spans more than one column in a table.
- class= - References a style definition from the <style> section.
- style= - Defines table, row, detail, data, or paragraph attributes.
- background: - Defines color and shading for a cell.
- - Non-breaking space: This is used between two words that should not have a line break inserted between them.
HTML Sample Codes
The following are the actual HTML statements used to produce the above Order Acknowledgement, most of which can be found in the COBOL program CPACKHTM:
<html>
<head>
<style>
/* Style Definitions */
p.MsoNormal11C
{text-align:center;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.MsoNormal11L
{padding:0in 5.4pt 0in 5.4pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.MsoNormal10L
{padding:0in 5.4pt 0in 5.4pt;
font-size:10.0pt;
font-family:"Calibri",sans-serif;}
p.MsoNormal14L
{padding:0in 5.4pt 0in 5.4pt;
font-size:14.0pt;
font-family:"Calibri",sans-serif;}
</style>
</head>
<body>
<table style='width:8.25in;border-collapse:collapse;border:none;height:19.3pt'>
<tr>
<td style='width:5.25in;border:none'>
<p class=MsoNormal14L><b>Company Address 1 xxxxxxxxxxxx</b></p></td>
<td rowspan=4 style='width:1.5in;border:solid .5pt;'>
<p class=MsoNormal14L><b>Order Acknowledgment</b></p></td>
<td style='width:1.5in;border:solid .5pt;border-left:none;
background:#D9D9D9'>
<p class=MsoNormal11C>Order# </p></td>
</tr>
<tr>
<td style='width:5.25in;border:none'>
<p class=MsoNormal14L><b>Company Address 2 xxxxxxxxxxxx</b></p></td>
<td style='width:1.5in;border-top:none;border-left:none;
border-bottom:solid 1.0pt;border-right:solid 1.0pt'>
<p class=MsoNormal11C>123456</p></td>
</tr>
<tr>
<td style='width:5.25in;border:none'>
<p class=MsoNormal14L><b>Company Address 3 xxxxxxxxxxxx</b></p></td>
<td style='width:1.5in;border-top:none;border-left:none;
border-bottom:solid 1.0pt;border-right:solid 1.0pt;
background:#D9D9D9'>
<p class=MsoNormal11C>Ship Date</p></td>
</tr>
<tr>
<td style='width:5.25in;border:none'>
<p class=MsoNormal14L><b>Company Address 4 xxxxxxxxxxxx</b></p></td>
<td style='width:1.5in;border-top:none;border-left:none;
border-bottom:solid 1.0pt;border-right:solid 1.0pt'>
<p class=MsoNormal11C>Sd/99/99 </p></td>
</tr>
<tr>
<td style='width:5.25in;border:none'>
<p class=MsoNormal14L><b>Telephone: 999-999-9999</b></p></td>
</tr>
</table>
<table style='width:8.25in;height:12.0pt'>
<tr>
<td style='width:.75in'><p class=MsoNormal11L style='margin-top:8.0pt'>
<b>Bill To: </b></p></td>
<td style='width:3.0in'><p></p></td>
<td style='width:.75in'><p class=MsoNormal11L style='margin-top:8.0pt'>
<b>Ship To:</b></p></td>
<td style='width:3.75in'><p></p></td>
</tr>
<tr>
<td><p></p></td>
<td><p class=MsoNormal11L>Bill-to Namexxxxxxxxxxxxxxxxxx1 </p></td>
<td><p></p></td>
<td><p class=MsoNormal11L>Ship-to Namexxxxxxxxxxxxxxxxxx1 </p></td>
</tr>
<tr>
<td><p></p></td>
<td><p class=MsoNormal11L>Bill-to Address1xxxxxxxxxxxxxxx3</p></td>
<td><p></p></td>
<td><p class=MsoNormal11L>Ship-to Address1xxxxxxxxxxxxxxx3</p></td>
</tr>
<tr>
<td><p></p></td>
<td><p class=MsoNormal11L>Bill-to Address2xxxxxxxxxxxxxxx3</p></td>
<td><p></p></td>
<td><p class=MsoNormal11L>Ship-to Address2xxxxxxxxxxxxxxx3</p></td>
</tr>
<tr>
<td><p></p></td>
<td><p class=MsoNormal11L>Bill-to Address3xxxxxxxxxxxxxxx3</p></td>
<td><p></p></td>
<td><p class=MsoNormal11L>Ship-to Address3xxxxxxxxxxxxxxx3</p></td>
</tr>
<tr>
<td><p></p></td>
<td><p class=MsoNormal11L style='margin-bottom:8.0pt'>
Bill-to Countryxxxxxxxxxxxxxxxx3</p></td>
<td><p></p></td>
<td><p class=MsoNormal11L style='margin-bottom:8.0pt'>
Ship-to Countryxxxxxxxxxxxxxxxx3</p></td>
</tr>
</table>
<table style='height:12.0'>
<tr>
<td style='width:.89in'> <p class=MsoNormal11L style='margin-bottom:8.0pt'>
<b>Transfer To:</b></p></td>
<td style='width:.65in'> <p class=MsoNormal11L style='margin-bottom:8.0pt'>xx
</p></td>
</tr>
</table>
<table style='height:12.0pt'>
<tr>
<td style='width:1.25in'><p class=MsoNormal11L>
<b>Ship Instructions:</b></p></td>
<td style='width:3.65in'><p class=MsoNormal11L>Ship Instructions1xxxxxxxxxxx </p></td>
</tr>
<tr>
<td><p class=MsoNormal11L></p></td>
<td><p class=MsoNormal11L style='margin-bottom:8.0pt'>
Ship Instructions2xxxxxxxxxxx </p></td>
</tr>
</table>
<table border=1 style='width:8.25in;border-collapse:collapse'>
<tr style='height:15.7pt;background:#D9D9D9'>
<td style='width:.61in'><p class=MsoNormal10L>JOB#</p></td>
<td style='width:.92in'><p class=MsoNormal10L>ORDER DATE</p></td>
<td style='width:.57in'><p class=MsoNormal10L>CUST#</p></td>
<td style='width:.41in'><p class=MsoNormal10L>LOC</p></td>
<td style='width:.43in'><p class=MsoNormal10L>SLM</p></td>
<td style='width:2.23in'><p class=MsoNormal10L>PURCHASE ORDER NO.</p></td>
<td style='width:1.38in'><p class=MsoNormal10L>TERMS</p></td>
<td style='width:1.28in'><p class=MsoNormal10L>SHIP VIA</p></td>
<td style='width:.42in'><p class=MsoNormal10L>FRT</p></td>
</tr>
<tr style='height:14.85pt'>
<td><p class=MsoNormal11L>job456</p></td>
<td><p class=MsoNormal11L>Od/99/99</p></td>
<td><p class=MsoNormal11L>cust56</p></td>
<td><p class=MsoNormal11L>L2</p></td>
<td><p class=MsoNormal11L>xxx</p></td>
<td><p class=MsoNormal11L>PO3456789012345</p></td>
<td><p class=MsoNormal11L>Terms6789012345</p></td>
<td><p class=MsoNormal11L>Shipvia89012345</p></td>
<td><p class=MsoNormal11L>F</p></td>
</tr>
</table>
<table border=1 style='width:8.25in;border-collapse:collapse'>
<tr style='height:15.7pt;background:#D9D9D9;border-top:none'>
<td style='width:.9in'><p class=MsoNormal10L>QTY ORDER</p></td>
<td style='width:1.39in'><p class=MsoNormal10L>ITEM NO.</p></td>
<td style='width:2.69in'><p class=MsoNormal10L>DESCRIPTION</p></td>
<td style='width:1.04in'><p class=MsoNormal10L>UNIT PRICE</p></td>
<td style='width:.47in'><p class=MsoNormal10L>UOM</p></td>
<td style='width:.6in'><p class=MsoNormal10L>DISC.</p></td>
<td style='width:1.16in'><p class=MsoNormal10L>NET PRICE</p></td>
</tr>
<tr style='height:14.85pt;border-top:none;border-bottom:none'>
<td style='border-bottom:none'>
<p class=MsoNormal11L >123,456.78</p></td>
<td style='border-bottom:none'><p class=MsoNormal11L >ITEMNOXXXXXXXXX</p></td>
<td style='border-bottom:none'>
<p class=MsoNormal11L >DESCRIPTION1XXXXXXXXXXX</p></td>
<td style='border-bottom:none'><p class=MsoNormal11L >1,234,567.89-</p></td>
<td style='border-bottom:none'><p class=MsoNormal11L >UM</p></td>
<td style='border-bottom:none'><p class=MsoNormal11L >123.45</p></td>
<td style='border-bottom:none'><p class=MsoNormal11L >$12,345,678.90-</p></td>
</tr>
<tr style='width:8.25in;height:14.85pt;border-top:none'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>DESCRIPTION2XXXXXXXXXX</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
</tr>
<tr style='width:8.25in;height:14.85pt;border-top:none'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>CUST ITEM:</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>CUSTITEMXXXXXXX</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>CUSTITEMDESC1XXXXXXXXXXXXXXXX</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
</tr>
<tr style='width:8.25in;height:14.85pt;border-top:none'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>CUSTITEMDESC2XXXXXXXXXXXXXXXX</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L ></p></td>
</tr>
<tr style='width:8.25in;height:14.85pt;border-top:none'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td colspan=3 style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>
Item and line item notesXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx</p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
</tr>
<tr style='width:8.25in;height:14.85pt;border-top:none'>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
<td style='border-top:none'>
<p class=MsoNormal11L></p></td>
</tr>
</table>
<table border=1
style='width:8.25in;border-collapse:collapse;height:14.85pt;border-top:none'>
<tr>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L> </p></td>
</tr>
<tr>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>
Customer ship-to notes and Order header notesxxxxxxxxxxxxxxxxxxxx</p></td>
</tr>
<tr>
<td style='border-top:none'>
<p class=MsoNormal11L> </p></td>
</tr>
</table>
<table border=1
style='width:8.25in;border-collapse:collapse;border-top:none'>
<tr style='height:15.7pt'>
<td style='width:5.95in;border-top:none;border-bottom:none'>
<p class=MsoNormal11L>COMMENT:</p></td>
<td style='width:1.15in;border-top:none;
background:#D9D9D9'>
<p class=MsoNormal11L>Sales Total</p></td>
<td style='width:1.15in;border-top:none'>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>
COMMENT1 XXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxX</p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Misc. Charges</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>
COMMENT2XXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Freight Charges</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L>
COMMENT3XXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Sales Tax</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Grand Total</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none;border-bottom:none'>
<p class=MsoNormal11L></p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Amount Paid</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
<tr style='height:15.7pt'>
<td style='border-top:none'>
<p class=MsoNormal11L>
*** The Grand Total Does Not Include Freight Charges and Sales Tax ***
</p></td>
<td style='background:#D9D9D9'>
<p class=MsoNormal11L>Balance Due</p></td>
<td>
<p class=MsoNormal11L>$12,345,678.90-</p></td>
</tr>
</table>
</body>
</html>
Modified Programs: NSCTLFIL.FD, NSCTLFIL.W38, NSCTLMN5, CP01P2E, CPIMDACK, CP01P3e, CPIMDQUO, CP01P4E, CPIMDRMA, CPSLSDSK
Added Programs: CPACKHTM, CPQUOHTM, CPRMAHTM, CPQUSHTM
DLM