Quick Guide for Writing Forms Using Transform 3.0
Table of Contents
General Information
Transform 3.0 was developed to make it easy for IU Information Providers to create working WWW forms without having to learn cgi programming.
Remember, you must install Transform in your Web account first! Login to your web account and change to the directory where you will store your forms (i.e., www/forms). Type tf_install at the prompt to install Transform. You should install Transform in every directory where you keep forms.
In order to create an online form using Transform 3.0, you will need two files: a Web form in HTML and a corresponding Transform template file.
| Web Form Document in HTML | Transform Template File |
|---|---|
| Much like any other HTML file, the Web form document contains the HTML coding for your form. A visitor to the page will see a form where they can enter information. An online registration form, for example, might be called registration.html and would display various text fields and buttons. | The template file controls what happens to the results of a submitted form. The template file for the online registration form would probably be called registration.tpl. You can choose to have the data submitted through your form appended to a file or sent to you via e-mail, or both, depending on what you put in the template file. |
Each field in an HTML form has a name (i.e. NAME = "question" ). In the corresponding plain text Transform template file, you control where the value of a form variable is displayed (i.e. the value entered by the user) by simply including the variable name in square brackets (e.g. [question]).
The following example demonstrates a form which shows you how to use radio buttons, checkboxes, and text fields. This Transform form allows users to check pre-defined items and enter basic contact information. After the user presses the Submit Form button, a message containing the submitted data is sent to both the user and the host. A confirmation page is also delivered to the user's browser.
This example contains the actual HTML codes and the template file for a working Transform form. You can copy these codes and the template file and customize them to meet your needs. If you'd like to learn more about Transform 3.0, please visit the User's Guide, which contains detailed instructions. More examples of Transform are also available. If you have any questions, please send email to IU Webmaster.
What does the form look like?
Note: This example doesn't actually work, but shows you a sample HTML form.
|
|
HTML Source Code for the Form
Here is the HTML code for a very simple form, the Example of a Registration Form above. Copy and paste the following into a text editor and then save it as an .html file, then make any changes you need to customize the form for your needs. You will need to make the same changes in the template form, so if you change the name of a field in the HTML form file you should make the same change in the template file.
<HTML>
<HEAD> </HEAD>
<BODY>
<CENTER> <FONT FACE="Arial">
<TABLE BORDER="1">
<TR>
<TD>
<CENTER>
<FONT FACE="Arial"> <B>Example of a Registration
Form</B></FONT>
</CENTER>
<P> <FONT FACE="Arial">
<FORM METHOD="POST" ACTION="transform.cgi">
<P> <FONT FACE="Arial"> Workshop and Panel Registration</FONT>
</P>
<BLOCKQUOTE>
<FONT FACE="Arial">
<INPUT TYPE=checkbox NAME=box1 VALUE=checked>
Keynote Address<BR>
<INPUT TYPE=checkbox NAME=box2 VALUE=checked>
Panel One<BR>
<INPUT TYPE=checkbox NAME=box3 VALUE=checked>
Panel Two</FONT>
</BLOCKQUOTE>
<P> <FONT FACE="Arial"> Gender</FONT> </P>
<BLOCKQUOTE>
<FONT FACE="Arial">
<INPUT TYPE=radio NAME=gender VALUE=Male>
Male<BR>
<INPUT TYPE=radio NAME=gender VALUE=Female>
Female</FONT>
</BLOCKQUOTE>
<P> <FONT FACE="Arial"> <TABLE BORDER=0>
<TR>
<TD>
<P> <FONT FACE="Arial"> Name:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial">
<INPUT TYPE=text NAME=name VALUE="" SIZE=30> </FONT> </P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> Email:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial">
<INPUT TYPE=text NAME=email VALUE="" SIZE=30 MAXLENGTH=20> </FONT>
</P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> Address:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial"> <INPUT TYPE=text NAME=address VALUE=""
SIZE=30> </FONT> </P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> City:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial"> <INPUT TYPE=text NAME=city VALUE=""
SIZE=30> </FONT> </P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> State/Province:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial"> <INPUT TYPE=text NAME=state VALUE=""
SIZE=30> </FONT> </P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> Postal/Zip Code:
</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial"> <INPUT TYPE=text NAME=zip VALUE=""
SIZE=30> </FONT> </P>
</TD>
</TR>
<TR>
<TD>
<P> <FONT FACE="Arial"> Country:</FONT> </P>
</TD>
<TD>
<P> <FONT FACE="Arial"> <INPUT TYPE=text NAME=country VALUE=""
SIZE=30> </FONT> </P>
</TD>
</TR>
</TABLE>
</FONT> </P>
<CENTER> <FONT FACE="Arial">
<INPUT TYPE=submit NAME=Submit VALUE="Submit Form"> </FONT>
</CENTER>
</FORM> </FONT> </P>
</TD>
</TR>
</TABLE>
</FONT> </CENTER>
</body>
</html>
Template File Code
Copy and paste the following into a text file. You should save it in the same directory where your form is kept, and it should have the same name and a .tpl file extension. (If your form is called registration.html, then save this file as registration.tpl so that the template and its form will have the same name.) Make sure to change username to your username.
*define-variables* *email-response*
[req-email]
[req-name]
[req-address]
[req-city]
[req-state]
[req-zip]
[gender]
[box1]
[box2]
[box3]
[country]
!use-if [Submit] eq "Submit Form"
To: username@indiana.edu,[email]
From: [email]
Subject: [name] - Registration Form
[!DATE]
[name] has registered.
!print-if [gender] eq "Male"
Gender is male.
!print-if [gender] eq "Female"
Gender is female.
!end-print-if
!print-if [box1] eq "checked"
Will attend Keynote Address.
!print-if [box2] eq "checked"
Will attend Panel One.
!print-if [box3] eq "checked"
Will attend Panel Two.
!end-print-if
Below is [name]'s contact information and mailing address:
-----------------------------------------------------------------------
[name]
[email]
[address]
[city], [state] [zip]
[country]
-----------------------------------------------------------------------
--end of message--
*success-response*
!use-if [Submit] eq "Submit Form"
<HTML><head><title>Registration Form Success Response</title></head>
<body bgcolor="#FFFFFF">
<h2> <center> Thanks, your registration form has been submitted.</center>
</h2><p>
<p>
<p>
<p>
The following information was submitted with your registration:<br>
(you may wish to print this page for your personal records)<br>
<hr>
!print-if [gender] eq "male"
Gender is male<br>
!print-if [gender] eq "female"
Gender is female <br>
!end-print-if
<blockquote>
!print-if [box1] eq "checked"
Will attend Keynote Address <br>
!print-if [box2] eq "checked"
Will attend Panel One <br>
!print-if [box3] eq "checked"
Will attend Panel Two <br>
!end-print-if
</blockquote>
<p>
Name: [name]<br>
Email: [email]<br>
Address: [address]<br>
City: [city]<br>
State/Province: [state]<br>
Postal/Zip Code: [zip]<br>
Country: [country]<br>
!end-print-if
</body></html>
*error-response*
!use-if [Submit] eq "Submit Form"
<HTML> <head> <title>Registration Request Error</title></head>
<body bgcolor="#FFFFFF">
<h2><center>Sorry, there was an error submitting your online
registration.</center></h2> <p>
You have not included the following required information in your request:
<p>
!print-if [name] eq ""
NAME:<br>
!print-if [email] eq ""
EMAIL:<br>
!print-if [address] eq ""
ADDRESS:<br>
!print-if [city] eq ""
CITY:<br>
!print-if [state] eq ""
STATE/PROVINCE:<br>
!print-if [zip] eq ""
ZIP:<br>
!end-print-if
<p>
Please GO BACK to the Registration Form and re-submit it with all of
the required registration information.
</body>
</html>
*append-response*
!use-if [Submit] eq "Submit Form"
!append-file-name = "/ip/username/www/filename.txt"
[!DATE],[name],[email],[address],[city],[state],[zip],[country],[gender]
