Custom HTML

[DavidLi]

Hi,
I am trying to follow the various demos that were intended for earlier versions of ChronoForms.
I am duplicating the demo code.
Nothing is showing on page view.
I am not using the Wizard. I wanted to understand how ChronoForms works with custom HTML.
Is there a current demo / example with a basic custom HTML form?
I have used the Wizard and can get forms to work following demos so my install seems fine.
Thanx

One example:

Code: Select all

<style type="text.css">
@import url(templates/rt_crystalline/css/form.css);
</style>
<div class="required">
<label for='name'>Name:</label><input type="text" name="name" id="name"
   class="inputText" size="40" maxlength="100" value=""/>
</div>
<div class="required">
<label for='age'>Age:</label><input type="text" name="age" id="age"
   class="inputText" size="5" />
</div>
<div class="required">
<label for='email'>Email:</label><input type="text" name="email" id="email"
   class="inputText" size="40" />
</div>
<div class="required">
<label for='subject'>Subject:</label><input type="text" name="subject" id="subject"
   class="inputText" size="40" />
</div>
<div class="required">
<label for='subject'>Message:</label><textarea rows="5" cols="40" name="message" id="message"
id="subject" class="inputTextArea"></textarea>
</div>
<div class="submit">
<input type="submit" class="inputSubmit"value="Submit"/>
</div>

[GreyHead]

Hi DavidLi,

Use the New icon in the Forms Manager toolbar; click the Code tab and copy and paste in your Form HTML without <form> tags.

OR; you can mix and match by using the Wizard and pasting existing Form HTML into a Custom Element element. Then you can add other elements in the Wizard - this works well if you have one 'special' chunk of HTML that you need to include.

Bob

[DavidLi]

I think I am doing this:
Use the New icon in the Forms Manager toolbar; click the Code tab and copy and paste in yor Form HTML without <for,> tags.

Can you copy the code I include to see if a form appears on frontend view page load?
Here's another example without the CSS:

Code: Select all

<?php
$tabs = new mosTabs(1);
$tabs->startPane( 'test_form' );
$tabs->startTab( 'Tab 1', 'tab_1' );
?>
Name: <input name="name" value="" type="text">
<?php
$tabs->endTab();
$tabs->startTab( 'Tab 2', 'tab_2' );
?>
E-mail: <input name="email" value="" type="text">
<?php
$tabs->endTab();
$tabs->startTab( 'Tab 3', 'tab_3' );
?>
{imageverification}
<?php
$tabs->endTab();
$tabs->startTab( 'Tab 4', 'tab_4' );
?>
<input name="submit" value="Submit" type="submit">
<?php
$tabs->endTab();
$tabs->endPane();
?>

[GreyHead]

Hi DavidLi,

I think that mosTabs were Joomla! 1.0 code; that will need to be updated to work with Joomla! 1.6/2.5.

Bob

[jjspelman]

I too am trying to figure out how to use the custom html option.

I have a pretty involved form. So I copied and pasted the html into the new form code window (without form tags). The form does show up, created a link to it, and after i submit I even get the thank you message.

But my form is made up of form elements only, no "action" code, or "hidden" elements like recipients, etc.

Where do I tell the form where it is supposed to go? I am not getting emails after submission.

Code: Select all

<table width="100%" border="0" cellpadding="3" cellspacing="3" id="info">



        <tr>



          <td><table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" bgcolor="#c6def5" class="forms">



            <tr>



              <td bgcolor="#8E8E8E"><h1>Machine Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                    <input name="MACHINE TYPE" type="text" id="MACHINE TYPE" value="Case Packer/Tray Packer" size="35">



              </h1></td>



            </tr>



            <tr>



              <td bgcolor="#448ccb"><h1>Vital Info:</h1></td>



            </tr>



            <tr>



              <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">Name:</td>



                  <td width="250"><input name="realname" type="text" id="realname" size="30"></td>



                  <td width="50">Title:</td>



                  <td><input name="TITLE" type="text" id="TITLE2" size="30"></td>



                </tr>



              </table></td>



            </tr>



            <tr>



              <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">Company:</td>



                  <td width="541"><input name="COMPANY" type="text" id="COMPANY2" size="30">



</td>



                  </tr>



              </table></td>



            </tr>



            <tr>



              <td align="left"><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">Street:</td>



                  <td width="250"><input name="STREET ADDRESS" type="text" id="STREETADDRESS2" size="30">



</td>



                  <td width="50">P.O. Box:</td>



                  <td><input name="PO BOX" type="text" id="PObox2" size="10">



</td>



                </tr>



              </table></td>



            </tr>



            <tr>



              <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">City:</td>



                  <td width="250"><input name="CITY" type="text" id="CITY2" size="30">



</td>



                  <td width="50">State:</td>



                  <td><input name="STATE" type="text" id="STATE2" size="5">



</td>



                  <td>Zip Code:</td>



                  <td><input name="ZIP CODE" type="text" id="ZIPCODE2" size="10"></td>



                </tr>



              </table></td>



            </tr>



            <tr>



              <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">Phone:</td>



                  <td width="250"><input name="PHONE" type="text" id="PHONE2" size="30">



</td>



                  <td width="50">Fax:</td>



                  <td><input name="FAX" type="text" id="FAX2" size="30">



</td>



                </tr>



              </table></td>



            </tr>



            <tr>



              <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                <tr>



                  <td width="50">Email:</td>



                  <td width="541"><input name="formmail_mail_email" type="text" id="formmail_mail_email" size="30">



</td>



                </tr>



              </table></td>



            </tr>



          </table></td>



        </tr>



      </table>



      <table width="100%" border="0" cellpadding="3" cellspacing="3" id="urgency">



  <tr>



    <td><table width="100%" border="0" cellpadding="3" cellspacing="3" bgcolor="#e6e6e6" class="forms">



      <tr>



        <td bgcolor="#8E8E8E"><h1>How Urgent?:</h1></td>



      </tr>



      <tr>



        <td>When do you expect a buying decision?</td>



      </tr>



      <tr>



        <td><input name="WHEN BUYING DECISION EXPECTED" type="text" id="WHEN BUYING DECISION EXPECTED" size="50"></td>



      </tr>



      <tr>



        <td> What is your required delivery?</td>



      </tr>



      <tr>



        <td><input name="WHEN DELIVERY REQUIRED" type="text" id="WHEN DELIVERY REQUIRED" size="50"></td>



      </tr>



    </table></td>



  </tr>



</table>



<table width="100%" border="0" cellpadding="3" cellspacing="3" id="background">



  <tr>



    <td><table width="100%" border="0" cellpadding="3" cellspacing="3" bgcolor="#c6def5" class="forms">



      <tr>



        <td bgcolor="#448ccb"><h1>Background:</h1></td>



      </tr>



      <tr>



        <td>What is your product?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



          <input name="PRODUCT" type="text" id="PRODUCT" size="50"></td>



      </tr>



      <tr>



        <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



          <tr align="left">



            <td colspan="2" valign="top">What do you hope to accomplish?</td>



          </tr>



          <tr align="left" valign="top">



            <td width="300"><input name="ACCOMPLISH" type="checkbox" id="ACCOMPLISH" value="Reduce Labor">                 



              <label>Reduce Labor &nbsp;(by how many people)&nbsp;&nbsp;&nbsp;



                  <input name="REDUCE LABOR BY" type="text" id="REDUCE LABOR BY" size="2">



                  </label>            </td><td><input name="ACCOMPLISH" type="checkbox" id="ACCOMPLISH" value="Replace old machine">



      Replace old machine</td>



          </tr>



          <tr align="left" valign="top">



            <td><input name="ACCOMPLISH" type="checkbox" id="ACCOMPLISH" value="New line">



                <label>New Line</label>            </td>



            <td><label>



              <input name="ACCOMPLISH" type="checkbox" id="ACCOMPLISH" value="Increase line speed">



      Increase line speed</label>



            </td>



          </tr>



          <tr align="center" valign="top">



            <td colspan="2" align="left"><label>



              <input name="ACCOMPLISH" type="checkbox" id="ACCOMPLISH" value="Other">



      Other</label>



&nbsp;&nbsp;&nbsp;&nbsp;(please explain):&nbsp;&nbsp;&nbsp;



      <input name="ACCOMPLISH OTHER EXPLAIN" type="text" id="ACCOMPLISH OTHER EXPLAIN" size="25">



            </td>



          </tr>



          <tr>



            <td colspan="2" valign="top">How are you doing it now?&nbsp;&nbsp;&nbsp;



                <input name="HOW ARE YOU DOING IT NOW" type="text" id="HOW ARE YOU DOING IT NOW" size="30">



            </td>



          </tr>



        </table></td>



      </tr>



    </table></td>



  </tr>



</table>



<table width="100%" border="0" cellpadding="3" cellspacing="3" id="specifications">



  <tr>



    <td><table width="100%" border="0" cellpadding="3" cellspacing="3" bgcolor="#e6e6e6" class="forms">



      <tr>



        <td bgcolor="#8e8e8e"><h1>Specifications:</h1></td>



      </tr>



      <tr>



        <td><table width="100%" border="0" cellpadding="1" cellspacing="1" class="forms">



          <tr>



            <td nowrap> Machine Model:</td>



            <td nowrap>&nbsp;&nbsp;&nbsp;&nbsp;              <input type="radio" name="MACHINE MODEL" value="Automatic">



              Automatic&nbsp;&nbsp;&nbsp;&nbsp;</td>



            <td width="71%" nowrap>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="MACHINE MODEL" value="Semi-automatic">&nbsp;             



           



           



           



           



           



           



            Semi-Automatic</td>



          </tr>



        </table>



        </td>



      </tr>



      <tr>



        <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



          <tr align="center" valign="top">



            <td colspan="2"><img src="images/casePacker.gif" width="467" height="280"></td>



            </tr>



          <tr align="center" valign="top">



            <td colspan="2"><span class="style1">Please refer to the above diagram for the following



              questions<img src="../images/spacer.gif" width="1" height="5"></span></td>



            </tr>



          <tr align="center" valign="top">



            <td colspan="2">&nbsp;</td>



          </tr>



          <tr align="center" valign="top">



            <td colspan="2"><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



              <tr align="left">



                <td colspan="9" valign="top">Position of carton



                  as it feeds to the Packer?</td>



                </tr>



              <tr align="center" valign="top">



                <td><label>



                  <input type="radio" name="CARTON POSITION" value="Position C3">



C3</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position C 1">



C1</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position C 2">



C2</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 1">



1</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 2">



2</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 3">



3</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 4">



4</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 5">



5</label>



</td>



                <td><label>



                <input type="radio" name="CARTON POSITION" value="Position 6">



6</label>



</td>



              </tr>



              <tr align="center" valign="top">



                <td colspan="9"><table width="80%" border="0" align="left" cellpadding="3" cellspacing="3" class="forms">



                  <tr align="left" valign="top">



                    <td colspan="2" nowrap><p>Will you furnish carton in another position?&nbsp;&nbsp;&nbsp;



                      <label>



<input type="radio" name="CHANGE CARTON POSITION" value="Yes">



Yes</label>



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label><input type="radio" name="CHANGE CARTON POSITION" value="No">



No</label>  <br>



                    </p>



                      </td>



                  </tr>



                  <tr align="left" valign="top">



                    <td colspan="2">Will you change case type or pack configuration?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                      <label>



  <input type="radio" name="CHANGE CASE TYPE" value="Yes">



  Yes</label>                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



  <label>



  <input type="radio" name="CHANGE CASE TYPE" value="No">



  No</label>                       



                    </td>



                    </tr>



                  <tr align="left" valign="top">



                    <td colspan="2">Production rate per lane (units per minute)?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                      <input name="RATE PER LANE" type="text" id="RATE PER LANE" size="10"></td>



                    </tr>



                  <tr align="center" valign="top">



                    <td align="left">Infeed conveyor height?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                      <input name="INFEED CONVEYOR HEIGHT" type="text" id="INFEED CONVEYOR HEIGHT" size="10"></td>



                    <td align="left">How many lanes feeding?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                      <input name="NUMBER OF LANES FEEDING" type="text" id="NUMBER OF LANES FEEDING" size="10"></td>



                  </tr>



                </table>                 



                </td>



              </tr>



              <tr align="center" valign="top">



                <td colspan="9" align="left"><table width="100%"  border="0" cellspacing="0" cellpadding="0">



                  <tr bgcolor="#e6e6e6" class="forms">



                    <td><table width="100%" border="0" cellpadding="3" cellspacing="3" class="forms">



                        <tr align="center" valign="top">



                          <td>Item<br>



                            No.</td>



                          <td>CASE OR<br>



                            TRAY                            <br></td>



                          <td>LENGTH</td>



                          <td>WIDTH</td>



                          <td>HEIGHT</td>



                          <td>SPEED</td>



                          <td>CONTENTS</td>



                          <td>WEIGHT</td>



                          <td>PACK</td>



                        </tr>



                        <tr align="center" valign="top">



                          <td bgcolor="#BDBDBD">&nbsp;</td>



                          <td bgcolor="#BDBDBD">RSC</td>



                          <td bgcolor="#BDBDBD">12&quot;</td>



                          <td bgcolor="#BDBDBD">10&quot;</td>



                          <td bgcolor="#BDBDBD">8&quot;</td>



                          <td bgcolor="#BDBDBD">25 cpm</td>



                          <td bgcolor="#BDBDBD">Glass Bottles</td>



                          <td bgcolor="#BDBDBD">12 lbs.</td>



                          <td bgcolor="#BDBDBD">4x3x1</td>



                        </tr>



                        <tr align="center" valign="top">



                          <td valign="middle">1</td>



                          <td><input name="CASE OR TRAY TYPE1" type="text" id="CASE OR TRAY TYPE1" size="5">



                          </td>



                          <td><input name="LENGTH1" type="text" id="LENGTH1" size="5">



                          </td>



                          <td><input name="WIDTH1" type="text" id="WIDTH1" size="5">



                          </td>



                          <td><input name="HEIGHT1" type="text" id="HEIGHT1" size="5">



                          </td>



                          <td><input name="SPEED1" type="text" id="SPEED1" size="7">



                          </td>



                          <td><input name="CONTENTS1" type="text" id="CONTENTS1" size="15">



                          </td>



                          <td><input name="WEIGHT1" type="text" id="WEIGHT1" size="7">



                          </td>



                          <td><input name="PACK1" type="text" id="PACK1" size="7">



                          </td>



                        </tr>



                        <tr align="center" valign="top">



                          <td valign="middle">2</td>



                          <td><input name="CASE OR TRAY TYPE2" type="text" id="CASE OR TRAY TYPE2" size="5">



                          </td>



                          <td><input name="LENGTH2" type="text" id="LENGTH2" size="5">



                          </td>



                          <td><input name="WIDTH2" type="text" id="WIDTH2" size="5">



                          </td>



                          <td><input name="HEIGHT2" type="text" id="HEIGHT2" size="5">



                          </td>



                          <td><input name="SPEED2" type="text" id="SPEED2" size="7">



                          </td>



                          <td><input name="CONTENTS2" type="text" id="CONTENTS2" size="15">



                          </td>



                          <td><input name="WEIGHT2" type="text" id="WEIGHT2" size="7">



                          </td>



                          <td><input name="PACK2" type="text" id="PACK2" size="7">



                          </td>



                        </tr>



                        <tr align="center" valign="top">



                          <td valign="middle">3</td>



                          <td><input name="CASE OR TRAY TYPE3" type="text" id="CASE OR TRAY TYPE3" size="5">



                          </td>



                          <td><input name="LENGTH3" type="text" id="LENGTH3" size="5">



                          </td>



                          <td><input name="WIDTH3" type="text" id="WIDTH3" size="5">



                          </td>



                          <td><input name="HEIGHT3" type="text" id="HEIGHT3" size="5">



                          </td>



                          <td><input name="SPEED3" type="text" id="SPEED3" size="7">



                          </td>



                          <td><input name="CONTENTS3" type="text" id="CONTENTS3" size="15">



                          </td>



                          <td><input name="WEIGHT3" type="text" id="WEIGHT3" size="7">



                          </td>



                          <td><input name="PACK3" type="text" id="PACK3" size="7">



                          </td>



                        </tr>



                        <tr align="center" valign="top">



                          <td valign="middle">4</td>



                          <td><input name="CASE OR TRAY TYPE4" type="text" id="CASE OR TRAY TYPE4" size="5">



                          </td>



                          <td><input name="LENGTH4" type="text" id="LENGTH4" size="5">



                          </td>



                          <td><input name="WIDTH4" type="text" id="WIDTH4" size="5">



                          </td>



                          <td><input name="HEIGHT4" type="text" id="HEIGHT4" size="5">



                          </td>



                          <td><input name="SPEED4" type="text" id="SPEED4" size="7">



                          </td>



                          <td><input name="CONTENTS4" type="text" id="CONTENTS4" size="15">



                          </td>



                          <td><input name="WEIGHT4" type="text" id="WEIGHT4" size="7">



                          </td>



                          <td><input name="PACK4" type="text" id="PACK4" size="7">



                          </td>



                        </tr>



                        <tr align="center" valign="top">



                          <td valign="middle">5</td>



                          <td><input name="CASE OR TRAY TYPE5" type="text" id="CASE OR TRAY TYPE5" size="5">



                          </td>



                          <td><input name="LENGTH5" type="text" id="LENGTH5" size="5">



                          </td>



                          <td><input name="WIDTH5" type="text" id="WIDTH5" size="5">



                          </td>



                          <td><input name="HEIGHT5" type="text" id="HEIGHT5" size="5">



                          </td>



                          <td><input name="SPEED5" type="text" id="SPEED5" size="7">



                          </td>



                          <td><input name="CONTENTS5" type="text" id="CONTENTS5" size="15">



                          </td>



                          <td><input name="WEIGHT5" type="text" id="WEIGHT5" size="7">



                          </td>



                          <td><input name="PACK5" type="text" id="PACK5" size="7">



                          </td>



                        </tr>



                    </table></td>



                  </tr>



                  <tr>



                    <th scope="col">&nbsp;</th>



                  </tr>



                </table>



                  <p>Electrical requirements:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Volts&nbsp;&nbsp;



                      <input name="VOLTS" type="text" id="VOLTS" size="5">



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hz&nbsp;&nbsp;&nbsp;



  <input name="Hz" type="text" id="Hz" size="5">



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phase&nbsp;&nbsp;&nbsp;



  <input name="PHASE" type="text" id="PHASE" size="5">



                  </p>



                  <table width="100%"  border="0" cellspacing="0" cellpadding="0">



                    <tr bgcolor="#e6e6e6" class="forms">



                      <td align="left">Sealing System (if required):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



                          <input type="radio" name="SEALING SYSTEM" value="Hot melt adhesive">



&nbsp;&nbsp;&nbsp;Hot Melt Adhesive &nbsp;&nbsp;&nbsp;



    <input type="radio" name="SEALING SYSTEM" value="Tape">



&nbsp;&nbsp;&nbsp;Pressure Sensitive Tape</td>



                    </tr>



                    <tr>



                      <th scope="col">&nbsp;</th>



                    </tr>



                  </table>                  <p>&nbsp;                  </p></td>



              </tr>



              <tr align="center" valign="top">



                <td colspan="9" align="left">&nbsp;</td>



              </tr>



            </table></td>



            </tr>



          <tr align="center" valign="top">



            <td>Other options: (please specify:)<br>



              <textarea name="OPTIONS" cols="30" rows="5" id="OPTIONS"></textarea></td>



            <td>Additional comments: (please specify:)<br>



              <textarea name="COMMENTS" cols="30" rows="5" id="COMMENTS"></textarea></td>



          </tr>



          <tr align="center" valign="top">



            <td><img src="../images/spacer.gif" width="1" height="10"></td>



            <td>&nbsp;</td>



          </tr>



          <tr align="center" valign="top">



            <td colspan="2" bgcolor="#c6def5"><table width="40%" border="0" cellpadding="3" cellspacing="3" class="forms">



              <tr align="center" valign="top">



                <td>Submit Information</td>



                <td>Reset Form</td>



              </tr>



              <tr align="center" valign="top">



                <td><input type="submit"></td>



                <td><input name="reset" type="reset" id="reset" value="Reset"></td>



              </tr>



            </table></td>



            </tr>



        </table></td>



      </tr>



    </table></td>



  </tr>



</table>

[GreyHead]

Hi jjspelman,

Save the form then click the Wizard Edit link in the Forms Manager to access all that stuff.

Bob

[jjspelman]

Thanks for the reply, GreyHead. I did add the email to the onSubmit and received an email. So it now works.

There is obviously so much more I can do with this component, but I have no idea on how to do this. Is there any user manual, or instructions anywhere that I may read?

Thanks!

[GreyHead]

Hi jjspelman,

There is not manual as such; I have written a few articles and videos on my site at greyhead.net but mostly they respond to specific questions. There is also a lot of documentation for CFv3, including tThe ChronoForms Book, much of which can be adapted to CFv4.

The most important question is probably what do you need to do. If it involves forms and data then it can probably be done with ChronoForms.

Bob

[jjspelman]

Thanks, Bob. This component looks like a great solution for many needs. I have to start getting into it more.

I will check out your site and perhaps see if I can find a copy of the book.