Design a Form!

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="697" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 35 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7">  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7"> <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >   </FONT></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> </div> </td> </tr><tr> <td valign="top" width=114 style="border-right: 1px solid #000000;" BGCOLOR="#EEEEEE" TEXT="#080000"> <div> <I><B>QUICK LIST</B></I></div> <bR> <div> <B>TYPES OF FORMS</B></div> <div> <A HREF="id108.htm" TARGET="_top" TITLE="Printable Form with Tables">"Print only" form</A></div> <div> <A HREF="id158.htm" TARGET="_top" TITLE="Create a basic CSB form">CSB form wizard</A></div> <div> Add to a CSB form</div> <div> Modify a CSB form</div> <div> <A HREF="id37_m.htm#inputfields" TARGET="TRLX_Middle" TITLE="Design a Form!">Form Field codes</A></div> <bR> <bR> <div> <B>SPECIAL FEATURES</B></div> <div> Redirect Response</div> <div> Require fields</div> <div> Disable enter key</div> <div> Limit the message</div> <div> Highlight input</div> <bR> <div> <B>SAMPLES</B></div> <div> Input Fields</div> <bR> </td> <td valign="top" height=430 width="100%" BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <STYLE>  </STYLE>                                                  </div> <bR> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="634" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#0000CC HEIGHT= 96 ><NOBR><div> <B>CSB FORM SERVER IS NOW OFFLINE AND WILL NOT RETURN!  </B></div> <div> <B>YOU MUST REPLACE YOUR CSB FORMS!</B></div> <div> <B> <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style>  </B></div> <div> <B> <a class="highlighttext" href="http://samisite.com/forum/index.php?topic=354.0">READ THIS THREAD ON THE FORUM ABOUT FORM ALTERNATIVES!</a>  </B></div> </NOBR></tD> </tR> </TABLE></B></div> <bR> <bR> <bR> <bR> <bR> <bR> <div> <B>The rest of the page is under revision...field codes are correct but there is no instruction how to process the forms!</B></div> <bR> <bR> <bR> <bR> <div> <B>DESIGN A FORM!  </B><FONT SIZE="4" COLOR="#330066" FACE="Arial" ><B>How to make or change a FORM for your site</B></FONT></div> <bR> <div> <B>This page will show you how to CUSTOMIZE the look of a form via email from your website. </B></div> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="620" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="HSIDES" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 730 WIDTH="614"><div> <B>What would you like to do?</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f0cc006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Have customer print a form and fax/mail it in.</B></div> <div> <A HREF="http://www.swgalleries.com/orderform1.htm" TARGET="_blank" TITLE="http://www.swgalleries.com/orderform1.ht"><B><IMG BORDER="0" SRC="Symb075c00b700c866003300.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Plain flat page.</B></A><B>  KW's website has a terrific example.  </B></div> <div> <B>Visitor prints form and completes offline with a pen/pencil/typewriter. </B></div> <div> <B>Just build a nice table and give instruction to print and fax.</B></div> <div> <A HREF="id108.htm" TARGET="_top" TITLE="Printable Form with Tables"><B><IMG BORDER="0" SRC="Symb075c00b700c866003300.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Interactive:</B></A><B>  customer fills in fields online, prints it to send it in via the mail or fax</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f0cc006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Create a basic CSB/Trellix form - using built-in wizard</B></div> <div> <A HREF="id158.htm" TARGET="_top" TITLE="Create a basic CSB form"><B><IMG BORDER="0" SRC="Symb075c00b700c866003300.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Step by Step instructions</B></A><B> (from the CSB4 User Guide) how to create a form and adjust it.</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f0cc006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Add a few fields to a basic CSB/Trellix form</B></div> <bR> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f0cc006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Modify your CSB or Trellix form</B><B>!</B><B>  Use another form server to process your current CSB form.</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f066003300.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make a basic form with the built-in wizard.  Publish.  Copy the code generated by CSB, then insert it into your CSB web page using INSERT  >HTML and change the form processing information.  </B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" ><B>Tutorial for this shortly.</B></FONT></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">4 SAMPLES with combinations of code and explanations:</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">2 special features: </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>require fields</B></FONT><B> to be filled and </B><B>redirect </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>response</B></FONT><B> </B><B>to your own thank you page </B><A HREF="formreq.htm" TARGET="_top" TITLE="Form with required fields"><B>Info here</B></A></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">4 special features: </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>require</B></FONT><B> fields, redirect </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>response</B></FONT><B> to your own thank you page, </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>disable enter key</B></FONT><B>, </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>limit</B></FONT><B> the text message size  </B><A HREF="formplus2.htm" TARGET="_top" TITLE="formplus 2"><B>Info here</B></A></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">6 special features available: </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>require</B></FONT><B> fields, </B><B>redirect </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>response</B></FONT><B> to your own thank you page, </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>highlight</B></FONT><B> input, </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>limit</B></FONT><B> the text message size  </B><A HREF="formplus.htm" TARGET="_top" TITLE="formplus"><B>Info here</B></A></div> <div> <FONT SIZE="4" COLOR="#330066" FACE="Arial" ><B><IMG BORDER="0" SRC="Symb075c00b7011866003300.png" HEIGHT="19" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Use an Iframe.</B></FONT><FONT SIZE="4" COLOR="#330066" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B> </B></FONT><B>Fit the form and the response into a tight space.  </B><A HREF="#iframe" TITLE="Design a Form!"><B>Info here.</B></A></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 special feature added to a plain, unformatted form </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>disable enter key.</B></FONT><B>  </B><A HREF="plaininiframe.htm" TARGET="_top" TITLE="Plain form in an iframe"><B>Two samples.</B></A><B>  Sample run through CutnPaste server to allow for unlimited fields and other options.</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc66003300.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Design your form with this 1-2-3 method, then seek a different way to PROCESS the form.  Read more </B><A HREF="#limits" TITLE="Design a Form!"><B>here</B></A><B>.  </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dccc006600.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 special feature added to basic form </B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>disable enter key</B></FONT><B>, AND run through CutnPaste server for unlimited fields  </B><A HREF="cutnpasteform.htm" TARGET="_top" TITLE="cutnpaste form"><B>Info here</B></A></div> </tD> </tR> </TABLE></B></div> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>Customize email web forms </B></div> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="613" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 225 WIDTH="601"><div> <B>The basic form code created with CSB form wizard has been split into 3 sections and redesigned.</B></div> <div> <B>1)</B><B>   Start of form (definition of fields, server and response page statement).</B></div> <div> <B>2) </B><B>  End the form with the print/submit/reset buttons to send input in an email to you.</B></div> <div> <B>3)   Between 1 and 2, build a table in CSB, then put the form fields into it.  </B></div> <bR> <div> <B>You can </B><A HREF="#convert" TITLE="Design a Form!"><B>convert an existing form or use CSB to create the form fields for you</B></A><B> then place the code into a customized table so they will match your site.  Or just use the sample codes provided below in your table.</B></div> <bR> </tD> </tR> </TABLE></B></div> <bR> <bR> <bR> <bR> <div> <IMG SRC="26419150.gif" border=0 width="25" height="21" ALT="link" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">  <A HREF="#other" TITLE="Design a Form!"><B>See other form examples</B></A><B> </B> <IMG SRC="26419150.gif" border=0 width="25" height="21" ALT="link" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">  <A HREF="#results" TITLE="Design a Form!"><B>See results of a form</B></A><B>  </B><IMG SRC="26419150.gif" border=0 width="25" height="21" ALT="link" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><B> </B></div> <bR> <bR> <hr> <div> <B> <A NAME="1st"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>HOW IT'S DONE:</B></div> <bR> <div> <B>#1   START THE FORM </B></div> <div> <B>(definition of fields, server and response page statement)</B></div> <bR> <div> <B>Put this code into INSERT >HTML (webgem in Trellix):</B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="576" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 173 WIDTH="564"><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><form action="h..............................pl" method="POST" enctype="application/x-www-form-urlencoded"><input type="hidden" name="tlx_SortOrder" value="</FONT>Name,Address, Time,MornEve,123-sFrame,123-s,123-mFrame,123-m,123-lFrame,123-l<FONT SIZE="3" COLOR="#000000" FACE="Arial" >"><input type="hidden" name="tlx_FormIndex" value="2"><input type="hidden" name="tlx_OKMessage" value="</FONT><br>Your form has been submitted! <br><br><br>Please choose a button to visit another page on our site.<FONT SIZE="3" COLOR="#000000" FACE="Arial" >"><input type="hidden" name="tlx_SendMode" value="</FONT><FONT SIZE="3" COLOR="#009900" FACE="Arial" ><B>1</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" >"><input type="hidden" name="tlx_Subject" value="</FONT>order form from website<FONT SIZE="3" COLOR="#000000" FACE="Arial" >"><input type="hidden" name="tlx_EmailTo" value="</FONT>xxxx<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>&#64;</B></FONT>emailaddress.com<FONT SIZE="3" COLOR="#000000" FACE="Arial" >"></FONT></div> </tD> </tR> </TABLE></B></div> <div> <B> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="621" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 184 ><NOBR><div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Modify </B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" ><B>red</B></FONT><B> items to suit.  Add fields to value list as you build the form.</B></div> <div> <B>Each field: unique name, single word with no spaces or symbols </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>(except _ and -)</B></FONT></div> <div> value="<FONT SIZE="1" COLOR="#CC0000" FACE="Arial" >Name,Address, Time,MornEve,123-sFrame,123-s,123-mFrame,123-m,123-lFrame,123-l</FONT>"</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Value list and fields used in table must be identical </B></div> <div> (Name is not the same as name)</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Change the order of the fields to change the order in the email</B></div> <div> (samples are shown below)</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Modify the email address to use the HTML equivalent for the @ symbol.</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">How do you want the form </B><A HREF="#results" TITLE="Design a Form!"><B>results</B></A><B>?  Send mode value (</B><FONT SIZE="3" COLOR="#009900" FACE="Arial" ><B>green</B></FONT><B> above): </B></div> <div> <B>1</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>=human readable; </B></FONT><B>2</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>=comma separated </B></FONT></div> </NOBR></tD> </tR> </TABLE></B></div> <bR> <div> <B> <A NAME="2nd"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B> </B><FONT SIZE="5" COLOR="#330099" FACE="Arial" ><B>#2 END THE FORM</B></FONT></div> <div> <B>(the submit/reset buttons to send input in an email)</B></div> <bR> <div> <B> Put this code into a second INSERT > HTML (webgem in Trellix) </B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="599" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 143 WIDTH="587"><div> <INPUT TYPE="button" name="printMe" onClick="print()" value="Print Page"></div> <div> <INPUT TYPE="submit" value="Send" name="tlx_send">   </div> <div> <INPUT TYPE="reset"></div> <div> </form></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>(Note: You can leave out the top line if you do not want to provide a print button like Sample B)</B></div> </tD> </tR> </TABLE></div> <bR> <bR> <div>  <A NAME="3rd"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <B>#3 BUILD A TABLE THEN</B></div> <div> <B>PUT THE FORM FIELDS</B><B> INTO DIFFERENT CELLS</B></div> <bR> <div> <B><IMG SRC="17a5fc40.png" border=0 width="607" height="196" ALT="table showing placement of insert > html placeholders" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="613" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 334 WIDTH="601"><div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Placement:</B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>  Create a table between the start code and the end code (buttons).</B></FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Click on a cell where you want an input field.  </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Choose how you want to put the HTML code into the table.</B></div> <div> <B>The image above shows two ways to do it:</B></div> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">PASSTHRU technique </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >(like Name and Address)<B> using</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT><B><| </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>before and</B></FONT><B> </B><B> |> </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>after the code.</B></FONT></div> <div> This puts the code directly into the table so you can see it in the design window.</div> <div> <B>If using this method, it must be </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>ALONE</B></FONT><B> on the line/cell and use the passthru codes. </B></div> <div> <B>Important:  make sure you have no spaces between the passthru codes</B></div> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">INSERT > HTML </B></FONT><B>(webgem in Trellix)  </B>(LIKE 123-s, 123-m, 123-l)</div> <div> The code is inserted and a <B>placeholder </B>image shows in the design window</div> <div> <B>If inserting the code into Insert> HTML (webgem) </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>DO NOT</B></FONT><B> use the</B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B> <| |>.</B></FONT></div> <div> <B>In smaller cells, I find this way works better than passthru technique.</B></div> <div> This is the placeholder image I use in tables so it doesn't take up so much space:</div> <div> Right click it to "save as" to use for HTML your placeholder. <B><IMG SRC="0d30a0f0.gif" border=0 width="10" height="15" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">  </B></div> </tD> </tR> </TABLE></B></div> <bR> <div> <B> <A NAME="inputfields"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>THE HTML CODE FOR INPUT FIELDS</B><B>: </B></div> <bR> <div> <B>To capture the code, press </B><B><U>Select All</U></B><B> then COPY (Ctrl C) the contents.</B></div> <div> <B>Paste (Ctrl V) code into an insert > html (webgem) in your webpage.</B></div> <div> <B>Modify the code to suit your form.</B></div> <bR> <div> <B>BOLD BLACK:  This is the NAME OF THE FIELD and must match the name listed in the VALUE LIST.</B></div> <div> <B> <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="9" WIDTH="652" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 391 WIDTH="624"><div> <B>Simple text entry:</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>        <input type="Text" name="small" size="10" maxlength="10">  </B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=1 cols=60 > <input type="Text" name="Name" size="60" maxlength="60"> </textarea> </form>  </B></div> <div> <input type="Text" name="<B>Name</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >60</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >60</FONT>"></div> <div> <input type="Text" name="<B>123-s</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <div> <input type="Text" name="<B>small</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <div> <input type="Text" name="<B>1</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >10</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>"></div> <bR> <div> <B>This one allows more input by the user than the field size visible:</B> </div> <div> <input type="Text" name="<B>Address</B>" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >60</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >200</FONT>"></div> <bR> <div> <B>This one allows you to put a </B><FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>statement</B></FONT><B> in the field so you can make the form thinner.  </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" >(seen in sample B above)</FONT><B> </B> <input name="<B>name</B>" type="text" value="<FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>Type your NAME here</B></FONT>" onfocus="this.value='';" size="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >25</FONT>" maxlength="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >60</FONT>"></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <B>Blue:</B> this cols number tells how WIDE the input area will be.</div> <div> <B>Red:</B>  this row number tells how many characters can be input.  </div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 168 ><NOBR><div> <B>Simple comment/message entry: </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >(can be seen on the green forms above)</FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code2"> <a class="highlighttext" href="javascript:HighlightAll('code2.select1')">Select All</a><br> <textarea name="select1" rows=1 cols=60 > <textarea name="comment" cols="52" rows="10" wrap="VIRTUAL"></textarea> </textarea> </form>  </B></div> <div> <textarea name="<B>Comment</B>" cols="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >52</FONT>" rows="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >10</FONT>" wrap="VIRTUAL"></textarea></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <B>Blue:</B> this cols number tells how WIDE the input area will be.</div> <div> <B>Red:</B>  this row number tells how TALL the input area will be.  </div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 390 WIDTH="624"><div> <B>Simple topic entry: </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  </B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" >(can be seen on sample B above)</FONT></div> <DIV ALIGN="LEFT"></DIV> <div>  <form name="code8"> <a class="highlighttext" href="javascript:HighlightAll('code8.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <select name="topic" size="4" style="font-family: Verdana; font-size:10 px; color:#000000; background: #FFFFFF; color:#000000 ;border: 1 solid #9999CC"> <option value="just trying form">Just Trying Form <option value="Hello!">Just want to say HELLO! <option value="suggestion for site">Suggestion for site <option value="need help, contact please">Need help, contact me please </option> </textarea> </form>  </div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <FONT SIZE="2" COLOR="#339900" FACE="Arial" ><B><U>Choose</U></B></FONT><B> </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>></B></FONT><B><U>CHOOSE ONE</U></B></div> <div> <B>Green:</B> this is a description that comes back in the email to you (no spaces unless you use "" )</div> <div> <B>Red:</B>  this is the word or phrase contained in the dropdown on the form</div> <div> <B>Gold:</B> set to number of options.  I have 4 options.</div> <bR> <div> <select name="<B>topic</B>" size="<FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>4</B></FONT>" style="font-family: Verdana; font-size:10 px; color:#000000; background: #FFFFFF; color:#000000 ;border: 1 solid #9999CC"></div> <div>            <option value="<FONT SIZE="3" COLOR="#339900" FACE="Arial" >just trying form</FONT>"><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Just Trying Form</FONT></div> <div>            <option value="<FONT SIZE="3" COLOR="#339900" FACE="Arial" >Hello!</FONT>"><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Just want to say HELLO!</FONT></div> <div>            <option value="<FONT SIZE="3" COLOR="#339900" FACE="Arial" >suggestion for site</FONT>"><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Suggestion for site</FONT></div> <div>            <option value="<FONT SIZE="3" COLOR="#339900" FACE="Arial" >Wandering the web</FONT>"><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Wandering the web</FONT></div> <div>            <option value="<FONT SIZE="3" COLOR="#339900" FACE="Arial" >need help, contact please</FONT>"><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Need help, contact me please</FONT></div> <div>  </option></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 1195 WIDTH="624"><div> <B>Simple dropdown choices: </B></div> <bR> <div> <B>Reference Note about the code:</B></div> <div> <B>Bold Black: </B>the name of the input field.</div> <div> <FONT SIZE="2" COLOR="#339900" FACE="Arial" ><B><U>Choose</U></B></FONT><B> </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B><U>selected</U></B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>></B></FONT><B><U>CHOOSE ONE</U></B></div> <div> <B>Green:</B> this is a <B>one word </B>description that comes back in the email to you (no spaces!)</div> <div> <B>Blue:</B> this word "selected" tells the form that this is the default answer (recommend you put this at the top of the dropdown list on a line that asks visitor to choose.)</div> <div> <B>Red:</B>  this is the word or phrase contained in the dropdown on the form</div> <bR> <div> <B>Simple dropdown choice:  </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> <SELECT NAME="State" SIZE=1> <option value=CHOOSE selected>CHOOSE ONE <option value=FL>Florida <option value=GA>Georgia <option value=SC>South Carolina </SELECT>  </B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code3"> <a class="highlighttext" href="javascript:HighlightAll('code3.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="State" SIZE=1> <option value=CHOOSE selected>CHOOSE ONE <option value=FL>Florida <option value=GA>Georgia <option value=SC>South Carolina </SELECT> </textarea> </form>  </B></div> <div> <SELECT NAME="<B>State</B>" SIZE=1></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >CHOOSE</FONT> <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" >selected</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >CHOOSE ONE</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >FL</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Florida</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >GA</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >Georgia</FONT></div> <div> <option value=<FONT SIZE="3" COLOR="#339900" FACE="Arial" >SC</FONT>><FONT SIZE="3" COLOR="#990000" FACE="Arial" >South Carolina</FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code4"> <a class="highlighttext" href="javascript:HighlightAll('code4.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="Heard" SIZE=1> <option value=heardabout selected>PLEASE CHOOSE ONE <option value=Google>Google <option value=Othersearch>Other Search Engine <option value=CSBforum>CSB Discussion Forum <option value=TCHforum>TCH Forum <option value=Other>Some other way </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="Heard" SIZE=1> <option value=heardabout selected>PLEASE CHOOSE ONE <option value=Google>Google <option value=Othersearch>Other Search Engine <option value=CSBforum>CSB Discussion Forum <option value=TCHforum>TCH Forum <option value=Other>Some other way </SELECT>  </B></div> <div> <SELECT NAME="<B>Heard</B>" SIZE=1></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >heardabout </FONT><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >PLEASE CHOOSE ONE</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Google</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Google</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Othersearch</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Other Search Engine</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >CSBforum</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CSB Discussion Forum</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >TCHforum</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >TCH Forum</FONT></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Other</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Some other way</FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code5"> <a class="highlighttext" href="javascript:HighlightAll('code5.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="123-sFrame" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=Oak-Light>Oak - Light <option value=Oak-Dark>Oak - Dark <option value=Cherry>Cherry <option value=Black>Black metal <option value=Silver>Silver metal <option value=Gold>Gold Leaf <option value=Wedding-crystal>Wedding - Crystal </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="123-sFrame" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=Oak-Light>Oak - Light <option value=Oak-Dark>Oak - Dark <option value=Cherry>Cherry <option value=Black>Black metal <option value=Silver>Silver metal <option value=Gold>Gold Leaf <option value=Wedding-crystal>Wedding - Crystal </SELECT>  </B></div> <div> <SELECT NAME="<FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>123-sFrame</B></FONT>" SIZE=1></div> <div>        <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Choose</FONT><FONT SIZE="2" COLOR="#990000" FACE="Arial" > </FONT><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CHOOSE ONE </FONT>                         </div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Oak-Light</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Oak - Light </FONT></div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Oak-Dark</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Oak - Dark </FONT> </div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Cherry</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Cherry </FONT></div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Black</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Black metal</FONT></div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Silver</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Silver metal</FONT>  </div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Gold</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Gold Leaf </FONT> </div> <div>      <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Wedding-crystal</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >Wedding - Crystal  </FONT></div> <div> </SELECT></div> <bR> <hr> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code6"> <a class="highlighttext" href="javascript:HighlightAll('code6.select1')">Select All</a><br> <textarea name="select1" rows=6 cols=60 > <SELECT NAME="123-scost" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=1=$10>1 = $10 <option value=2=$20>2 = $20 <option value=3=$25>3 = $25 <option value=4=$30>4 = $30 <option value=5=$35>5 = $35 </SELECT> </textarea> </form>  </B></div> <div> <B>Another simple dropdown choice:    <SELECT NAME="123-scost" SIZE=1> <option value=Choose selected>CHOOSE ONE <option value=1=$10>1 = $10 <option value=2=$20>2 = $20 <option value=3=$25>3 = $25 <option value=4=$30>4 = $30 <option value=5=$35>5 = $35 </SELECT>  </B></div> <div> <B>COMBINE YOUR ANSWER TO AVOID CALCULATIONS IN YOUR FORM!</B></div> <bR> <div> <SELECT NAME="<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" >123-scost</FONT>" SIZE=1></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >Choose</FONT><FONT SIZE="2" COLOR="#990000" FACE="Arial" > </FONT><FONT SIZE="2" COLOR="#3333FF" FACE="Arial" >selected</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >CHOOSE ONE </FONT>                         </div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >1=$10</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >1 = $10 </FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >2=$20</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >2 = $20</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >3=$25</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >3 = $25</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >4=$30</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >4 = $30</FONT></div> <div>                 <option value=<FONT SIZE="2" COLOR="#339900" FACE="Arial" >5=$35</FONT>><FONT SIZE="2" COLOR="#990000" FACE="Arial" >5 = $35</FONT></div> <div>  </SELECT></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 210 ><NOBR><div> <B>Simple radio dial entry:       <input type="radio" name="MornEve" value="AM"> AM <input type="radio" name="MornEve" value="PM" checked> PM  </B></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <form name="code7"> <a class="highlighttext" href="javascript:HighlightAll('code7.select1')">Select All</a><br> <textarea name="select1" rows=2 cols=60 > <input type="radio" name="MornEve" value="AM"> AM <input type="radio" name="MornEve" value="PM" checked> PM </textarea> </form>  </B></div> <div> <input type="radio" name="<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>MornEve</B></FONT><FONT SIZE="3" COLOR="#990000" FACE="Arial" >"</FONT> value="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >AM</FONT>"> <FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>AM</B></FONT></div> <div> <input type="radio" name="<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>MornEve</B></FONT><FONT SIZE="3" COLOR="#990000" FACE="Arial" >"</FONT> value="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >PM</FONT>" <FONT SIZE="3" COLOR="#339900" FACE="Arial" >checked</FONT>> <FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>PM</B> </FONT></div> <bR> <div> <B>Reference Note about the radio dial code:</B></div> <div> All choices for this field must be in the <B>same cell</B> to avoid errors.</div> <div> <B>Green:</B> this word "checked" tells the form that this is the default answer</div> <div> <B>Purple:</B><FONT SIZE="2" COLOR="#660066" FACE="Arial" >  </FONT>this word is typed into the table, not the inserted HTML code</div> <div> <B>Red:</B>  this is the word or phrase shown on the form</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 38 ><NOBR><div> <B>Don't use check boxes if possible.  </B></div> <div> <B>(Empty box can produce errors on some servers, so I did not include the code on purpose)</B></div> </NOBR></tD> </tR> </TABLE></B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="522" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 16 WIDTH="516"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="16" ALIGN="bottom" WIDTH="516" HSPACE="0" VSPACE="0"></tD> </tR> </TABLE></div> <bR> <div> <B> <A NAME="results"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><FONT SIZE="5" COLOR="#330099" FACE="Arial" ><B>SEE THE RESULTS!</B></FONT></div> <div> <B>THIS FORM WAS SENT FROM THE WEBSITE </B></div> <div> <B>(prior to addition of radio buttons)</B></div> <div> <B><IMG SRC="0d84cdb0.png" border=0 width="588" height="219" ALT="a completed form sent from the site" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> <B>AND PRODUCED THIS EMAIL</B><B>:  </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>(radio buttons would give same kind of result)</B></FONT></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="608" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 20 ><NOBR><div> <B>Standard: Human readable   (</B><FONT SIZE="3" COLOR="#009900" FACE="Arial" ><B>1</B></FONT><B>)</B></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>Comma separated response:     (</B><FONT SIZE="3" COLOR="#009900" FACE="Arial" ><B>2</B></FONT><B>)</B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 406 ><NOBR><div> <IMG SRC="0e023900.jpg" border=0 width="291" height="400" ALT="human readable response" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="0e13c2d0.jpg" border=0 width="316" height="301" ALT="comma separated response" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></B></div> <bR> <div>  <A NAME="convert"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="613" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 419 WIDTH="601"><div> <B><IMG BORDER="0" SRC="Symb075c00b700f0cc006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">CONVERT AN EXISTING FORM or use CSB to create the form fields for you!</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Create a form in CSB (Trellix)</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Publish it to a test page on your site (don't put it on a sequence line until complete)</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">From your browser, choose VIEW > Source to capture the form HTML code</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Break the code into 3 pieces for easier manipulation: </B></div> <div> <I><B>THE START:</B></I><B>  </B>begins with: < form       ends with:  your email address></div> <div> place this in a webgem (<A HREF="#1st" TITLE="Design a Form!">step 1</A> in the 1-2-3 method)</div> <div> <I><B>FORM FIELDS: </B></I> the code has table rows <tr> and divisions <td> and <input></div> <div> <I><B>THE END:</B></I><B> </B>The buttons to send and reset the form</div> <div> place this in a webgem (<A HREF="#2nd" TITLE="Design a Form!">step 2</A> in the 1-2-3 method)</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Grab the form field codes out of the Form Fields area of CSB created code.</B>  Place each <input> code into its own webgem (Insert > HTML) in a table between the starting and ending codes as shown. </div> <div> <I>Example - this table row came from a CSB form.  The part you want to use in a separate webgem for a Name  field is shown in red bold lettering:</I></div> <div> <tr></div> <div>         <td><font size=-1 face="arial">Name: </font></td><td><font size=-1 face="arial"><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B><input type="Text" name="Name" size="40" maxlength="40"></B></FONT></font></td></div> <div> </tr></div> <div> (<A HREF="#3rd" TITLE="Design a Form!">step 3</A> above gives other examples of input code that can be used.)</div> </tD> </tR> </TABLE></div> <bR> <bR> <div> <B> <A NAME="other"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>SEE OTHER FORM SAMPLES</B></div> <div> <B>Click the image to see other forms created using the 1-2-3 method</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="554" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 64 WIDTH="154"><div> <A HREF="http://www.samisite.com/galleryv020103/form.htm" TARGET="_blank" TITLE="http://www.samisite.com/galleryv020103/f"><IMG SRC="229553a0.gif" border=0 width="85" height="58" ALT="photo form- request copies of that galleries images" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </tD> <tD VALIGN=TOP><NOBR><bR> <div> <B>Send me a comment from the form if you like!</B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 94 WIDTH="154"><div> <A HREF="http://www.firstchoicephoto.ca/id161.htm" TARGET="_blank" TITLE="http://www.firstchoicephoto.ca/id161.htm"><IMG SRC="24066580.jpg" border=0 width="102" height="88" ALT="Paterson Photography form to order prints" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </tD> <tD VALIGN=TOP WIDTH="383"><div> <B>  The forms on this page were first drafts/samples for this site.  This black form is the final form in use by a photograher.    </B></div> <div> <B>(</B><A HREF="#3rd" TITLE="Design a Form!"><B>Minor change</B></A><B> made so fields could be required</B><B>)</B><B> </B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 77 ><NOBR><div> <IMG SRC="24196440.jpg" border=0 width="150" height="68" ALT="Richard sample forms" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="383"><div> <B>Richard has used the same concept of inserting html code into a table </B><FONT SIZE="3" COLOR="#6666FF" FACE="Arial" ><B>(my step 3)</B></FONT><B> to create a printable form.  Just leave out the top and bottom code that sends the form via email!  </B><A HREF="id108.htm" TARGET="_top" TITLE="Printable Form with Tables"><B>Info here.</B></A></div> </tD> </tR> </TABLE></div> <bR> <div>  <A NAME="limits"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="613" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 361 WIDTH="601"><div> <B>Want to use another company (third party) to handle the processing of the form?</B></div> <div> <B>Often these allow </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>more</B></FONT><B> fields and other options.</B></div> <bR> <div> <B>Fine. Replace code #1 to send the form to the proper place</B> (get the code from your form processor) and keep the rest intact unless you need to add something for required field.</div> <div> <A HREF="http://www.cutandpastescripts.com " TARGET="_blank" TITLE="http://www.cutandpastescripts.com "><B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">CutnPaste</B></A><B> </B><B>uses their CGI bin, free service - sign up, describe fields on thier site.</B></div> <div> Here's an <A HREF="http://www.firstchoicephoto.ca/id161.htm" TARGET="_blank" TITLE="http://www.firstchoicephoto.ca/id161.htm">active form</A> for a photographer.  The samples on this page were first drafts for his form.</div> <div> 123 method used to make the form with CutnPaste server information in the 1st start the form code: <FONT SIZE="2" COLOR="#CC0000" FACE="Arial" >red</FONT> altered.</div> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="479" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 91 WIDTH="467"><div> <!- <B>Form Processing, by Cut and Paste Scripts</B>.  Hosted CGI, with NO adverts and FREE.  http://www.cutandpastescripts.com -!><form method=POST action="http://www.cutandpastescripts.com/cgi-bin/formprocessing/forms.pl"><input type=hidden name="activenumber" value="<FONT SIZE="1" COLOR="#CC0000" FACE="Arial" >123456789012</FONT>"><input type="hidden" name="username" value="<FONT SIZE="1" COLOR="#CC0000" FACE="Arial" >MikeP</FONT>"><!- Cut and Paste Scripts 2000 -!></div> </tD> </tR> </TABLE></div> <div> <A HREF="http://www.phorm.com/jr.php3" TARGET="_blank" TITLE="http://www.phorm.com/jr.php3"><B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Phorm Jr</B></A><B> </B>uses your own CGI bin, free script </div> </tD> </tR> </TABLE></div> <bR> <div>  <A NAME="iframe"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="613" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 377 WIDTH="601"><div> <A HREF="http://www.samisite.com/contact.htm" TARGET="_top" TITLE="http://www.samisite.com/contact.htm"><B>see another way to insert a form into your site</B></A></div> <div> <FONT SIZE="2" COLOR="#000080" FACE="Verdana" ><B>My personal contact form is seen through an iFrame.</B></FONT><FONT SIZE="3" COLOR="#000080" FACE="Verdana" ><B> </B></FONT></div> <div> <B>(Unlike the ones on this page, it is a live real form that is used to contact me.)</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700b480000000.png" HEIGHT="12" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">An iFrame (a window cut into your web page) is great to limit the size of the form and response page!</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700b480000000.png" HEIGHT="12" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Your form will blend on the page and better yet, the personal response will show up inside the iFrame on the contact page letting your visitors still have access to your links! </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700b480000000.png" HEIGHT="12" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make your "contact" page the same color, place your links to other pages, fax, phone, etc as necessary. Also include an iFrame with no border pointing to your plain form page.   (</B><A HREF="http://www.samisite.com/contact.htm" TARGET="_blank" TITLE="http://www.samisite.com/contact.htm"><B>see my contact page</B></A><B>)</B></div> <div> <B>My iframe code</B><FONT SIZE="1" COLOR="#330099" FACE="Verdana" ><B> on the contact page, which cuts a window in the page  (and shows the form page)</B></FONT></div> <div> <B><iframe name="FRAME1" src="id68.htm" width="345" height="438" frameborder="0" scrolling="no" ></B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700b480000000.png" HEIGHT="12" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make a page that is totally plain, except for the form.   (mine: http://www.samisite.com/id68.htm)</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700b480000000.png" HEIGHT="12" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make a page that will be used as your response.  (mine: http://www.samisite.com/thanks.htm)</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>SAMPLE B (small skinny form shown above would work well for this project!)</B></div> <div> <A HREF="http://www.samisite.com/test-csb2nf/id43.htm" TARGET="_top" TITLE="http://www.samisite.com/test-csb2nf/id43"><B>Read more about iFrames here.</B></A></div> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>