Tutorial for newbies: Creating and manipulating web forms

Article written by Justin Love of J Love Web Design - www.justinlove.net

How to create a web form similair to the ones we use on this website, with many more tricks and tips as you go along!

First, you should determine what type of script you are going to use to process your forms. I prefer Matt's FormMail script as the newer versions are quite secure, and the web forms are easy to manipulate. This script is written in CGI/PL and is available in the 'Downloads' section of our website. There are also many alternatives in the downloads section such as PHP form scripts amongst others.

If your server doesn't recognize PERL but does recognize CGI, then simply rename the formmail.pl file to formmail.cgi, and it will work the same. Next, you should upload the formmail.cgi file to your webserver in the "cgi-bin" directory if your host requires CGI scripts be placed there (J Love Web Hosting does require this). It is most likely that most other webhosts require this.

Now, you should begin writing the form itself. FormMail has many different possible attributes, but we are going to cover the main ones, how they are used, and how to implement them.

1. Start with:

Code:

<FORM METHOD="POST" ACTION="/CGI-BIN/FORMMAIL.CGI">

This will tell your form which script to use for processing.

2. Next, we want to tell the script where to send the mail, so we use this line of code:

Code:

<INPUT TYPE="HIDDEN" NAME="RECIPIENT" VALUE="YOU@YOUREMAIL.COM">

The fact that it is hidden makes it invisible on your browser, but it still performs the task.

3. Now we will pick a pre-determined subject for your form.

Code:

<INPUT TYPE="HIDDEN" NAME="SUBJECT" VALUE="My E-mail Form!">

4. Optionally, you can create a page which users will be re-directed to upon completion of your form.

Code:

<INPUT TYPE="HIDDEN" NAME="REDIRECT" VALUE"HTTP://URLTOTHANKYOUPAGE.COM">

5. You can also determine which fields should be required and which ones are optional. The variables in VALUE="" should be the same as those chosen below when you create the actual fields.

Code:

<INPUT TYPE="HIDDEN" NAME"REQUIRED" VALUE="NAME,EMAIL,COMMENTS">

6. As an option for step 5, you can also create a page users are redirected to if they leave a required field blank:

Code:

<INPUT TYPE="HIDDEN" NAME="MISSING_FIELDS_REDIRECT" VALUE="HTTP://URLTOMISSINGFIELDSPAGE.COM">

7. Now that we have set-up the pre-determined attributes for your form, we will create the necessary text-fields and buttons. For this example, we are creating 2 text boxes, a comment box, and 2 buttons. The size variable determines how long a text-box will be in characters.

Code:

<INPUT TYPE="TEXT" NAME="NAME" SIZE="25">
<INPUT TYPE="TEXT" NAME="EMAIL" SIZE="25">
<TEXTAREA NAME="COMMENTS" COLS="25" ROWS="5"></TEXTAREA>
<INPUT TYPE="SUBMIT" name="SUBMIT" value="Submit">
<INPUT TYPE="RESET" name="RESET" value="Clear">

8. Finally, we close the form with:

Code:

</FORM>

9. Help on customizing the appearance of a form with tables can be found in our 'Articles' section. We also provide scripting help on the Support Forum.
Article written by Justin Love of J Love Web Design - www.justinlove.net

[Join us @ facebook]

Nice tutorial for beginners.

Matt's script can be located here but as we are talking for beginners here, i would recommend to use a php form mail program.

Here is a great list of php form mail scripts :

http://php.resourceindex.com/Complete_Scripts/Form_Processing/

i used to use a php script for them, i like them better as well but i cant find a good one that will fit my layout on my site at justinlove.net now, so i use formmail. got any ideas?

[Guest]

[36.290]

Googlebot, Yahoo crawler, Baidu Spider