Bookmark and Share

Search Google


Dreamweaver CS5 Tutorial
DVD - Training Video

Another fine course from our friends at Infinite Skills. Great value. Free videos available on their website.

Easy Instructions for Implementing NMS FormMail

NMS FormMail is a free script for implementing a Contact Form on your website. The code, made available by The nms Project, is based upon "Matt's Script," but is more secure.

Author: Patricia Lynn

For this tutorial we assume that your web host uses a Unix or Unix-type server and that you see a folder called cgi-bin or cgi inside the root folder. The form code, however, can be used regardless of the platform.

First we will customize the FormMail Perl script and upload it to the server. Then we will copy and paste one of our sample forms into a webpage and test.

Our sample forms validate Strict XHTML!

Step 1: Download, Unzip, and Rename

  1. Download: Go to http://nms-cgi.sourceforge.net/scripts.shtml. Under the FormMail section at the top, click on "zip archive" for the "compat" package. Save the zip file to your hard drive.
  2. Unzip: Unzip the file to a convenient folder and notice the five files. The three important files are:
    • FormMail.pl: this is the script that will take the input from your HTML Contact Form and send you an email.
    • README: provides information on how to install and use NMS FormMail.
    • EXAMPLES: gives examples of simple data-entry forms that are table-based. Also explains how to send an email to multiple recipients.
  3. Copy and Rename: First, make a copy of FormMail.pl. Give the copied file a name that does NOT contain the words formmail, form, contact, feedback, email, etc. Spammers look for scripts with these names in order to harvest email addresses. Some hosts will disable scripts whose names contain these words. Name your script something like umbrella.pl.

Step 2: Edit the FormMail Script File

Open the renamed FormMail.pl file (umbrella.pl) with a text editor such as Notepad. Modify some or all of the items described below. Do not delete any code. Other configuration options can be found in the README file. One additional change should be made when you have

1. #!/usr/bin/perl -wT   - the first line of the file, called the shebang line, specifies the path to the Perl program on your web host's system. Since many hosts use this default path, you may want to test first and only verify if testing fails. If your host's path is different, only replace the /usr/bin/perl portion of the line.

The remaining items are located in the USER CONFIGUATION SECTION.

2. $max_recipients    = 5;  - this specifies the number of email addresses that will receive the email generated from the form submission. To increase security, reduce this value to the actual number of email addresses specified.

3. $mailprog = '/usr/lib/sendmail -oi -t';   - this is the path to your web host's Sendmail program. Again, you may want to test with the default first. If the path is different, only replace the /usr/lib/sendmail portion of the line.

4. @referers = qw(dave.org.uk 209.207.222.64 localhost);   - this line defines the website allowed to use the script. Type your domain inside the parenthesis; e.g. @referers = qw(www.mysite.com);

5. @allow_mail_to = qw(you@your.domain some.one.else@your.domain localhost);   - here is where you specify the email address(es) to receive the email created from the Contact Form. Substitute your email address(es) inside the parenthesis; e.g. @allow_mail_to = qw(feedback@mysite.com);. See Example 3 in the Examples document that came with the program for instructions on how to send the email to multiple recipients.

6. $style = '/css/nms.css';   - if you are going to create a separate CSS file for the form, enter the path here. If you are not using CSS, using inline CSS, or specifying the styling elements for your form in the CSS file already specified in a meta tag for the webpage, remove css/nms.css from the line so that only $style = ''; remains. Otherwise, replace css/nms.css with the path to your CSS file.

Step 3: Upload the Script and Change Permission

Using a file transfer program or your host's cPanel, upload your script in ASCII (text mode) to the cgi-bin (or cgi) folder which should be inside the root folder. (The root, usually htdocs or public_html, is where your index file and other first-level webpages are stored).

Change the file's permission (chmod) to 755. In FileZilla, just right-click on the file and click File Permissions. If you set permissions by function, see the image below. If you had to create the cgi-bin folder or directory, change its permission to 755 as well.

Image of the Change File Attributes window in FileZilla

Step 4: Create the Form

Copy and paste the code for our sample form below into your webpage. If you would like a more complex form, go to our tutorial Sample XHTML Contact Forms (opens in new browser tab/window), and copy the code from one of those forms. We will explain how to modify the form to point to the location of your FormMail script (umbrella.pl) and how to accomplish some other neat things that many tutorials do not address. After pasting the code, proceed to Step 5.

Sample Form

Simple Contact Form

For more information, please complete the information below and click Submit.

















Form Code:

Copy and paste the code below into your webpage.

<div class="myform1">
<h2>Simple Contact Form</h2>
<p>For more information, please complete the information below and click Submit.</p>
<form action="/cgi-bin/umbrella.pl" method="post">
<div class="myform2">
<input type="hidden" name="required" value="name,phone,email" />
<input type="hidden" name="title" value="Thank you for contacting Keynote Support" />
<input type="hidden" name="return_link_url" value="http://www.keynotesupport.com/index.shtml" />
<input type="hidden" name="return_link_title" value="Go to the Homepage" />
<label for="subject1">SUBJECT:</label><br />
<span><input type="text" name="subject" id="subject1" size="40" /></span><br /><br/>
<label for="name1">NAME:</label><br />
<span><input type="text" name="name" id="name1" size="60" /></span><br /><br />
<label for="phone1">PHONE:</label><br />
<span><input type="text" name="phone" id="phone1" size="60" /></span><br /><br />
<label for="email1">E-MAIL ADDRESS:</label><br />
<span><input type="text" name="email" id="email1" size="60" /></span><br /><br />
<label for="comments1">COMMENTS:</label><br />
<span><textarea name="comments" id="comments1" rows="4" cols="45"></textarea></span><br /><br />
<input type="reset" name="Submit2" value="RESET" />
<input type="submit" name="Submit" value="SUBMIT" />
</div><!--end div myform2c-->
</form>
</div><!--end div myform1-->

Step 5: Style the Form

If you want your form to display as it does on this webpage, (except for the heading (h2) and introductory paragraph), place the two CSS classes below into your stylesheet. If you do not use an external stylesheet, copy and paste the code below into your webpage above the closing Head tag </head>. A short explanation of the classes follows:

<style type="text/css">
<!--
.myform1 {text-align:center;font-size:100%;color:#003399;margin:10px 0;padding:10px 0;border:solid #999999 1px;}
.myform2 {text-align:left;margin:0 auto;width:440px;}
-->
</style>

.myform1 adds a thin border around the form and centers everything inside the form. It also adds top and bottom padding (inside the border), and margins (outside the border). It also specifies the font-size and color of the text.
.myform2 left-aligns the labels and input elements, but centers the elements as a whole inside the bordered area of the form - even on liquid or fluid page layouts! It also specifies the form's width. PS: If you want the form to have a background color, add background-color:#999999; to the class, substituting your color's hex code for 999999.

Step 6: Customize the Form for Your Environment

Text: Modify the form title and instructions if desired. Notice that we use a <br /> tag after each label (SUBJECT, NAME, etc.) to push the input box to the next line. Then we use two <br /> tags to allow adequate space between the input boxes.

Location of Script File: <form action="/cgi-bin/umbrella.pl" method="post"> - replace umbrella.pl with the name of your FormMail script file. Also, it is recommended that method="post" is listed last.

Required Fields: <input type="hidden" name="required" value="name,phone,email"> - use this line of code to specify required fields. (The "name=" value from the input control is what you specify in the "value=" field.) If a user doesn't fill in all required fields, they receive an error message.

Subject of the Email: <input name="subject" type="text" size="40"> - by requesting the visitor enter a subject, and ensuring that name="subject" is included, the subject the visitor enters will be the subject of the email. Without this input element on your form, or if it is not a required field and the visitor enters no data, the subject of the email will be WWW Form Submission. (You can change this default verbiage in the FormMail script if you are adventurous.)

Alternatively, you can skip asking the visitor to enter a subject and specify your own subject text for the emails coming in from the form. Place this line of code in the top portion of your form and replace the text after "value=" with the subject of your choice:
<input name="subject" type="hidden" value="Email from Website Form" />

The Visitor's Email Address <input name="email" type="text" size="65"> - if you specify name="email" on the input control for Email, the script will place the email address the visitor enters into the "From" field of the email you receive. Then you can just press the Reply button to reply. Otherwise, the email will display "Nobody" in the From field.

Comments <textarea name="comments" rows="4" cols="65"> - You can prefill text in the comments box as shown in the following example, but the user has to erase the text first, so only do so in unique situations:
<textarea name="comments" rows="4" cols="65">Type your comments here</textarea>

What NOT to Put in Your Form? Do NOT put your email address in the HTML form like some tutorials suggest unless you want every spammer in the world to find it! There is no need as your email address is specified in the script as explained in Step 2, #5 above. So if you are using form code from somewhere else, DELETE any code that looks like the following: <input type="hidden" name="recipient" value="info@mysite.com">

Step 7: Test the Form

After making the required changes to the form code, review each line carefully to make sure all URLs, < and > signs, quotation marks, <br /> tags, etc. are correct as most errors are due to missing or incorrect syntax. Then place the form code into a webpage and upload the page to the server. Go to the Contact Form, fill it out, and click Submit. Then go check the email that you received.

If you follow our directions carefully, FormMail will work. Here are some problems you may encounter while testing:

  • If you receive a "Document not found" or "Object not found" error, you either misspelled something, or did not load the Perl program to the cgi-bin folder. If your form is on a webpage located in a subfolder, you must load the program to the cgi-bin folder inside of the subdomain folder. If you do not have a cgi-bin folder, create one.
  • If you get a "Internet Server Error" or "Internal Server Error," common causes are: failing to change the permission of the script file to 755, the cgi-bin folder not having a permission of 755, uploading the file in binary and not ASCII mode, having an incorrect path specified to the Perl program in your form code, having blank lines in the Configuration Section of the script, missing program code, or code that has become corrupted from editing the file in Microsoft Word or another word-processing program instead of a simple editor like Notepad.
  • If you receive a "Bad Referer - Access Denied" error, verify that you entered the correct URL in Step 2, #3 above.
  • If you receive a "Error: GET Request" error, make sure method="post" is entered correctly and is at the end of the line of code.
  • An "Application Error" might indicate that your web host's path to Sendmail is not the default specified in the script.

Step 8: Wrap-up Tasks

Once the NMS FormMail program is working properly, there is one change to make to the formmail Perl file. We need to restrict the amount of information that a potential hacker can obtain from your website.

  • Open the Perl file in Notepad or similar editor
  • Locate $DEBUGGING      = 1; in the "User Configuration Section"
  • Change the "1" to "0" and save the file
  • Upload the file to the website server

Step 9 (Optional): Customize the Thank You Page

You can either modify the default Thank You page, or have the script display a custom Thank You page that you create.

Modify the Default Thank You Page: Place these three lines of code in the top portion of the form. In the value attribute of the first line, type a custom page title. In the value attribute of the next line, specify a URL link to display on the page. Then specify the link text for the URL in the value attribute of the third line of code:

<input type="hidden" name="title" value="Thank you for contacting ABC Company" />
<input type="hidden" name="return_link_url" value="http://www.mysite.com/index.html" />
<input type="hidden" name="return_link_title" value="Go to the Homepage" />

Specify a Custom Thank You Page: Instead of using the default Thank You page, you can create one yourself. Place this line of code in the top part of the form, substituting your page URL for mysite.com/thankyou.html:

<input type="hidden" name="redirect" value="http://www.mysite.com/thankyou.html" />


We hope this tutorial has been helpful. Cheers!

Share |
   Back to Top