Using Forms and CGI

01
of 06

Create a Form and Have the Results Sent by Email

The most common use of CGI on a website is to automate forms. When you write a form, it will not work unless there is a program running on the back end to make it work. A CGI script that is the back-end for a form must be able to decode the form data, and then do something with it.

For this article, I will show you how to write a simple HTML form, and how to create a CGI that parses the form data and then sends the data via email to you.

This article is part of the HTML Forms Tutorial

02
of 06

The HTML Form

A form has three required elements:

  1. <form> </form>
    The element that creates the form. This element has two important attributes, method and action. The method is either post or get. These are described in the article Method Attribute of the Form Tag. The action is a URL pointing to the CGI script that will run on the form data.
  2. <input />
    The element that generates the data for the form. For this simple form, we will use the input type of text.
  3. <input type="submit" />
    This is actually a sophisticated form of the <input /> tag, but in order for a form to be sent to the CGI, you must have this element.

03
of 06

A Sample Form

A Sample Form
A Sample Form. Jennifer Kyrnin

The image is what our sample form would look like.

And here is the HTML for it:

<form action="form.cgi" method="post">
Please enter your name: <input type="text" name="full_name" size="20" /><br/>
<input type="Submit" name="submit" value="submit form" />
</form>

04
of 06

Explaining the CGI Script

This CGI will be written in Perl, one of the most popular languages for writing CGI scripts. The script will have three parts:

  1. parse the data
    All data from a web form will be URL encoded. What this means is that it is sent in a long string of characters, and your CGI has to turn that long string into a series of name/value pairs. For a simple form like the one above there may be only one name/value pair, but for more complex forms there will be lots of them. These need to be split up. Secondly, the data is sent so that special characters that might confuse a browser are encoded. These need to be decoded.
  2. write and send the email
    This is the meat of the program, where you open a pipe to sendmail (the program that will send the mail) and send the email.
  3. print a thank you page
    This is always a good idea with form generation, especially when you send out email. If there is no thank you page, the browser will run for a second or two and then stop, apparently having done nothing. Chances are good that your reader will then hit the submit button again, and you would have many emails sent to you.

05
of 06

How to Write the CGI

This line tells the CGI what language to run in, and the location. This is always the first line of a Perl CGI script. The only thing that might change is the path to perl. Your server might have perl in a different location.

#!/usr/local/bin/perl

These three lines call the three sub-routines in the script.

&parsedata;
&sendemail;
&printthanks;

And this is the first sub-routine. It takes the data from the input stream and converts it into name/value pairs that the CGI program can use.

sub parsedata
{
 read(STDIN, $in, $ENV{'CONTENT_LENGTH'});
 @in = split(/&/, $in);

 foreach $i (0 .. $#in)
 {
  $in[$i] =~ s/\+/ /g;
  $in[$i] =~ s/%(..)/pack("c",hex($1))/ge;
  ($key, $val) = split(/=/,$in[$i],2);
  $in{$key} .= '\0' if (defined($in{$key}));
  $in{$key} .= $val;
 }
}

06
of 06

Second Half of the CGI

This is the section of the script that sends the email. You need to know where sendmail is located on your server in order to use it. Also, always make sure that you include a Reply-to line in your email message. Since this mail is sent by the Web server, it could mess up the headers if you don't include that line.

sub sendemail
{
 open (SENDMAIL, "| /usr/bin/sendmail -t -n");
 print SENDMAIL <<EOM

From: from\@abc.com
To: to\@abc.com
Reply-to: from\@abc.com
Subject: Email from the mail form

This is a message from your mail form. The form results are:

fullname = $in{'full_name'}

EOM

}

This prints a thank you page that thanks the reader for submitting the form. You can include any HTML elements that you would put on a normal HTML page, including JavaScript and other dynamic elements.

sub printthanks
{

 print "Content-type: text/html \n\n";
 print <<"EOM";

<html>
<head>
<title>Thanks for Submitting the Form</title>
</head>
<body bgcolor="#ffffff">
<h2>Thank you for answering our form</h2>
You should receive a response shortly.
</body>
</html>
EOM

 print "";

}

This article is part of the HTML Forms Tutorial