TUTORIAL: FORM WITH REQUIRED FIELDS within an iframe

This form is run through the CutnPaste server.

It has been placed into an iframe to save space (can be put in a border, etc)

and to control where the thank you page appears.

No CGI bin or PHP needed on your own host's server!

These features are provided by CutnPaste:

- REQUIRED: Choosen fields must be completed or form will not be sent! Popup warning tells what field is not filled.

- REDIRECT TO YOUR OWN RESPONSE PAGE!

- AUTOMATED EMAIL RESPONSE TO VISITOR'S EMAIL

- CAN HAVE UNLIMITED NUMBER OF FIELDS

AN ADDITIONAL FEATURE ADDED TO THE BASIC CSB FORM:

- DISABLE ENTER: to stop multiple partial forms when your visitor presses enter before completing the form

TRY THE FINAL FORM WITH ALL FIELDS REQUIRED!

The process:

Create a form in CSB (Trellix)

Publish it to a test page on your site

(CSB form is limited to 20 fields max!)

THIS IS THE ORIGINAL CSB FORM

First Name:

Last Name:

Email:

Company:

Address Line 1:

Address Line 2:

City:

State:

Zip:

Phone Number:

By submitting this form, I acknowledge that I have sent my subscription via a credit card. Once receipt of funds has been confirmed, I understand I will receive the next published issue of the magazine.

Send button removed from this form to make it NON-FUNCTIONAL.

From your browser, choose VIEW > Source to capture the form HTML code

Break the code into 3 pieces for easier manipulation:

START THE FORM: begins with: < form ends with: your email address>

FORM FIELDS: the code has table rows <tr> and divisions <td> and <input>

THE END: The buttons to send and reset the form

 You will NOT use this part of CSB's code!

<tr>

<td align="left">First Name:<br>

</tr>

<tr>

</tr>

<tr>

<td align="left">Email:<br>

</tr>

<tr>

<td align="left">Company:<br>

</tr>

<tr>

<td align="left">Address Line 1:<br>

</tr>

<tr>

<td align="left">Address Line 2:<br>

</tr>

<tr>

</tr>

<tr>

<td align="left">State:<br>

</tr>

<tr>

</tr>

<tr>

<td align="left">Phone Number:<br>

</tr>

<tr>

<td>

<input type="checkbox" name="MailingList" value="yes"> By submitting this form, I acknowledge that I have sent my subscription via credit card. Once receipt of funds has been confirmed, I understand I will receive the next published issue of the magazine.</td>

</tr>

</table>

<tr>

</tr>

</form>

Design note:

The CHECKBOX statement will be removed and the MailingList field name (shown in orange in the form shown above) in the final form because SOME servers have problems with them if they are not checked, and besides, I want EVERYONE that sends the form to agree to the statement!

Also moved the </table> statement UP to be at the end of the second section of the form!

Create a new response page in your CSB tlx design file. Include thank you statement, links, images, colors and styles to match your site. You can even place pay pal or other functional buttons on this page. This is what mine looks like

When I refer to webgem (Trellix), it also means Insert > HTML in CSB.

To capture the codes below, press Select All link, then COPY the contents.

I have made notes in code below to highlight etc and it might effect functionality! Use the Select All choice above each code!

An iFrame (a window cut into your web page) is great to limit the size of the form and response page! The sample on this page could blend into the page seamlessly or have a contrasting color, but either way, the personal response will show up inside the iFrame letting your visitors still have access to your links on the page without a pop-up window. (You can see 2 more samples on this page showing how the form can fit into your web page using iframes. And my main contact form for the site is on this page using the same technique. http://www.samisite.com/contact.htm)

If you DON"T choose to use an iframe on your webpage to hold your form:

Ignor the next instruction and go here.

If you choose to use an iframe on your webpage to hold your form:

1) place the following code into a webgem on the page that you want to see the form, where you want to see the form. Adjust the code to the size window you want.

for no scrollbar, ever:

<iframe name="FRAME1" src="formpage.htm" width="380" height="250" frameborder="0" scrolling="no" >

for a 3d edge around the frame:

<iframe name="FRAME2" src="formpage.htm" width="380" height="250" frameborder="1" >

2) Insert a NEW plain blank page wth no borders, titles, headers, etc. Place all the other webgems discussed below on it.

3) In the page properties (right click on the page to open the box), type formpage into the SHORT TITLE field. Your iframe code will point to that page.

Read more about iFrames here.

The Special Features are choosen at this point: disable enter.

Insert the webgems (the full sample has 4 webgems) in the order noted below if all are chosen. If you do not use one, then skip that particular webgem and the additional code that is needed in the START THE FORM or FORM FIELDS webgems

Tweak the codes to fit your site as noted in the

Field list

Colors

Email address

Field names

Response page code and message

Email subject

PUBLISH...try it and tweak if necessary.

Once the form is the way you want it, you can move the page onto a sequence line.

webgem #1: DISABLE ENTER KEY

Stops the form from being submitted by pressing the enter key!

Besides adding the code below in it's own webgem,

must add to the FORM statement in the FORM FIELDS webgem:

onkeypress="return handleEnter(this, event)" to each field description

Select All
 <script type="text/javascript"> /*********************************************** * Disable "Enter" key in Form script- By Nurul Fadilah(nurul@REMOVETHISvolmedia.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ function handleEnter (field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { var i; for (i = 0; i < field.form.elements.length; i++) if (field == field.form.elements[i]) break; i = (i + 1) % field.form.elements.length; field.form.elements[i].focus(); return false; } else return true; } </script>

/***********************************************

* Disable "Enter" key in Form script- By Nurul Fadilah(nurul@REMOVETHISvolmedia.com)

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

function handleEnter (field, event) {

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

if (keyCode == 13) {

var i;

for (i = 0; i < field.form.elements.length; i++)

if (field == field.form.elements[i])

break;

i = (i + 1) % field.form.elements.length;

field.form.elements[i].focus();

return false;

}

else

return true;

}

</script>

webgem #2: START THE FORM (= step 1 on basic 1-2-3 method)

Sign up at CutnPaste.com and define the fields for a form.

Copy the code that CutnPaste provides and place that code in this webgem.

This is a sample of how the code looks - do't copy it! Sign up here for your own!

<!- Form Processing, by Cut and Paste Scripts. Hosted CGI, with NO adverts and FREE. http://www.cutandpastescripts.com -!>

<!- Cut and Paste Scripts 2000 -!>

webgem #3: FORM FIELDS

Modified code notes:

Note the highlighted areas refer to code changes or additions:

Bolded items need to be adjusted to fit your form

Add blue items to disable the enter key for that field

USE THIS PART OF THE CODE THAT YOU CREATED WITH CSB FORM.

My code is shown here as a reference only:

<tr>

<td align="left">First Name:<br>

<input type="text" name="FirstName" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<input type="text" name="LastName" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">Email:<br>

<input type="text" name="Email" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">Company:<br>

<input type="text" name="Company" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">Address Line 1:<br>

<input type="text" name="Address1" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">Address Line 2:<br>

<input type="text" name="Address2" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<input type="text" name="City" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">State:<br>

<input type="text" name="State" size="30" maxlength="100" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<input type="text" name="Zip" size="10" maxlength="10" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td align="left">Phone Number:<br>

<input type="text" name="Phone" size="14" maxlength="14" onkeypress="return handleEnter(this, event)"></td>

</tr>

<tr>

<td>

By submitting this form, I acknowledge that I have sent my subscription via credit card. Once receipt of funds has been confirmed, I understand I will receive the next published issue of the magazine.</td>

</tr>

</table>

webgem #4: END THE FORM BUTTONS (= step 2 on basic 1-2-3 method)

Select All
<INPUT TYPE="submit" value="Send" name="tlx_send"> <INPUT TYPE="reset"> </form>

</form>

Use the form fields section of the code as is like this sample above.

Or if you want to place your codes into a customized table to match your website (like 1-2-3 method shown on the Design a Form with Tables):

Grab the form field codes out of the Form Fields area of CSB created code.

Place each <input> code into its own webgem (Insert > HTML) in a table between the starting and ending codes as shown.

Example - this table row came from the CSB form above. The part you want to use in a separate webgem for a Address field is shown in red bold lettering:

<tr> <td><font size=-1 face="arial">Address: </font></td><td><font size=-1 face="arial"><input type="Text" name="Address1" size="30" maxlength="100"></font></td> </tr>

Want to add dropdown fields? More sample input codes are here.

PUBLISH!