Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Submit Forms Without CGI

By Stephen Bucaro

There are many reasons why you might not want to use CGI forms on your Web site. For example your web site may be on a free host that does not allow custom CGI scripts. You may want to conserve bandwidth on your Web server. Or maybe you just don’t want the hassle of CGI programming.

An alternative method to let visitors to your Web site submit forms is through email. If you know how to code a form in html and you know a little JavaScript, then designing a form for email submission is not difficult. If you don’t know either of those things, you can still design your own email submission form if you can follow the pattern of the code provided with this article.

The code provides an example of using checkboxes, a select list, and a text area with an email submission form. If you can follow the pattern, you can edit the code to your requirements, remove some elements, and add more of a different element.

The code comes in two basic parts, the html form, and a JavaScript function that applies a bit of processing to the form’s data before submitting it to the users email program.

The first problem I found with submitting a form by email is that the form’s action property captures only the first input element of the form. So I added a hidden input as the first element of the form. When the user clicks on the "Submit" button, the form is passed to a JavaScript function that collects the data from all the input elements of the form and places them in that first hidden element.

The second problem I found with submitting a form by email is that the form’s data is submitted in URL encoded format. It's possible to type any character into a text box on a form, including slashes and other characters that have meaning in a URL. Also, a URL can’t have spaces. When you submit the form, the browser replaces dangerous characters with other characters, and spaces are replaced with "+" signs. The JavaScript function uses URL escape characters to reformat the data so it creates a more understandable email message.

To a non-programmer, the escape characters make the JavaScript code look way more complicated than it is. You might want to make a second copy of the code, and in that copy, remove all the escape characters to make the program more readable. The escape characters used are listed below.

%0a = Line Feed
%0d = Carriage Return
%20 = Space

Here's the code. Copy it and paste it into your web page. Then follow the pattern of the code to modify it to your requirements.

<script language="JavaScript">
function setMessage(form)
{
var strBody;
var strInComment;
var strOutComment;
var i;

strInComment = form.comment.value;
strOutComment = '%20';

for(i = 0; i < strInComment.length; i++)
{
   if(strInComment.charAt(i) == " ")
   {
      strOutComment += '%20';
   }
   else
   {
      strOutComment += strInComment.substring(i,i + 1);
   }
}

strBody = "%0a%0dcomputer%20=%20" + form.computer.checked;
strBody += "%0a%0ddesign%20=%20" + form.design.checked;
strBody += "%0a%0dmoney%20=%20" + form.money.checked;
strBody += "%0a%0dsystem%20=%20" + form.system.value;
strBody += "%0a%0dcomment%20=%20" + strOutComment;
form.Message.value = strBody;
}
</script>

<form name="nocgi" method="post" enctype="text/plain"
action="mailto:webmaster@bucarotechelp.com?subject=survey&body=">
<input type="hidden" name="Message">

What subjects are you interested in?<br>
<input type="checkbox" name="computer">Computer Maintenance<br>
<input type="checkbox" name="design">Web Site Design<br>
<input type="checkbox" name="money">Making Money<br>

Which operating system do you use?<br>
<select name="system" size="3">
<option selected value="System">Operating System</option>
<option value="w2k">Windows 2000</option>
<option value="wxp">Windows XP</option>
<option value="wme">Windows Me</option>
<option value="w98">Windows 98</option>
<option value="w95">Windows 95</option>
<option value="w31">Windows 3.1</option>
<option value="linux">Linux</option>
<option value="mac">Mac</option>
<option value="other">Other</option>
</select><br>

Do you have any comments or suggestions?<br>
<textarea name="comment" rows="3" cols="40" wrap></textarea><br>

<input type="submit" name="submit" value="Submit" onClick="setMessage(this.form);">
</form>

You can modify this code to use as a suggestion form, a subscription form, or even use it to take orders from your web site. However, this method of taking orders provides absolutely no security, so don’t use it to submit information such as credit card account numbers.

Note: In the form's method attribute, you can use either get or post. Using the get method opens the users email program and displays the message. The user can then choose to send the message. Using the post method does not display the message, it provides only a warning to the user that the message is being sent. If you use the post method, you don’t need the part of the program that uses the URL escape characters. The code provided lets you use either method. You might want to use the get method for testing, and then implement the form with the post method