FutureQuest, Inc. FutureQuest, Inc. FutureQuest, Inc.
Knowledgebase: Email
How do I set up a web based email form?
Posted on 01 December 2004 09:28 AM

FormMail is a universal www form-to-email gateway. It allows you to add a form to your web site that requests specific information from your visitors. Once they fill in this information the script generates an email and sends the information to the email address you specify.

The form is very simple to set up on your FutureQuest web site and we have already installed the CGI script that runs it for you! If you would rather not create the code yourself, you may use our Instant Mail Form Generator to create it for you by clicking here. To create the form yourself or enhance a form already created, follow the steps outlined below.

Step 1
Decide where you want to have your form placed. This can be on an html page already on your web site or you may wish to create a brand new page to display this form. Then decide what information you want to ask on your form. You can use this form as a way for people to simply email you from your web site to answer specific questions, place orders, make inquiries, etc, etc ...the possibilities are endless... You decide.

Step 2
Copy and paste the following lines of code to your page, exactly as they appear here, to begin your form:
    <FORM ACTION="/cgi-sys/mailform" METHOD="POST"> <INPUT TYPE=hidden name="recipient" value="DesiredEmail@example.tld">

Backspace over the text between the quotes where it says DesiredUser@example.tld and replace this text with the email address you would like to receive the formmail responses at (e.g. your email address). The form should only send to ONE email address and that email address should be located within your FutureQuest package, e.g. You@YOURdomain.com.

Step 3
Think about what you want to ask for and use any of the fields described in further detail below to set up your form -- see "More Detail on Step 3".

Step 4
Copy and paste the following three lines of code at the end of your form. These lines are what put the buttons on your page and close your form. You may change the 'VALUE' to anything you would like it to say on your buttons. The "Submit" button is what sends the form. The "Reset" button will clear all of the visitor's input and allow them to start over. (You do not need to include the 'Reset' button; it's considered common courtesy to do so though.)

    <INPUT TYPE="submit" VALUE="Send" >
    <INPUT TYPE="reset" VALUE="Restart">
    </FORM>

All that's left to do is to upload your new page to your web site and let your viewers know it's there by remembering to provide links to your new form!

More Detail on Step 3:
Adding various fields to your form.

Remember that you can add HTML code before and after any of these form fields. We recommend you do so in order to keep it looking clean and neat. Utilizing HTML tables (or CSS) is a good way to do this when setting up HTML forms.

All of the fields you will use to request information from your viewers are called 'INPUT FIELDS'.

A few basic examples of different types and names of INPUT FIELDS are:

Field Type Code Looks Like:
Text Box <INPUT TYPE="TEXT" Name="Whatever" Value="Whatever">
Value is optional. Whatever you put inside the quotes will show in the area the viewer is to type in.
Password Box <INPUT TYPE="Password" Name="Whatever">
This appears the same as the text box, except all of the text entered in this field will show as '***' rather than regular text.
Check Box <INPUT TYPE="CHECKBOX" Name="Whatever">
If you add CHECKED with a space on each side within this tag then it will appear already selected to the viewer and they will need to select a different option to uncheck it.
Radio Button <INPUT TYPE="RADIO" Name="Whatever">
If you add CHECKED with a space on each side within this tag then it will appear already selected to the viewer and they will need to select another radio button to deselect this one.
Hidden Field <INPUT TYPE="HIDDEN" Name="Whatever" Value="Whatever">
Allows you to add commands to the form script without them being displayed on the page.
 
Text Window <TEXTAREA cols="60" rows="10" name="Whatever" > </TEXTAREA>
Creates a text box for the viewer to type in. Specifying a larger or smaller number for the cols and rows will decide the height and width of the text area.
Menu <SELECT> <OPTION> </SELECT>
Creates pull down menus

Read on to see the many different configuration options available to you with the FormMail Script.

Note: Any other form fields that appear in your script will be mailed back to you and displayed on the resulting page if you do not have the redirect field set (explained below). There is no limit as to how many other form fields you can use with this form, just use the NAME="whatever" tag to define other fields. Play around with it as that's the best way to see what all you can do.

Optional Form Fields:

subject
Description: The subject field will allow you to specify the subject that you wish to appear in the email that is sent to you after this form has been filled out. If you do not have this option turned on, then the script will default to a message subject of: WWW Form Submission

Syntax:
If you wish to choose what the subject is:
<input type=hidden name="subject" value="Your Subject">

To allow the user to choose a subject:
<input type=text name="subject">

email
Description: This form field will allow the user to specify their return email address. If you want to be able to return email to your user, we strongly suggest that you include this form field and allow them to fill it in. This will be put into the From: field of the message you receive. If you want to require an email address with valid syntax, add this field name to the 'required' field (explained below).

Syntax:
<input type=text name="email">

realname
Description: The realname form field will allow the user to input their real name. This field is useful for identification purposes and will also be put into the From: line of your message header.

Syntax: <input type=text name="realname">

redirect
Description: If you wish to redirect the user to a different URL, rather than having them see the default response to the filled out form, you can use this hidden variable to send them to an HTML page of your choice.

Syntax:
To choose the URL they will end up at:
<input type=hidden name="redirect" value="http://www.example.tld/file.html"> (replace the URL with the URL you wish to use)
To allow them to specify a URL they wish to travel to once the form is filled out:
<input type=text name="redirect">

title
Description: This form field allows you to specify the title and header that will appear on the resulting page if you do not specify a redirect URL.

Syntax:
If you wanted a title of 'Feedback Form Results':
<input type=hidden name="title" value="Feedback Form Results">

return_link_url
Description: This field allows you to specify a URL that will appear, as return_link_title, on the following report page. This field will not be used if you have the redirect field set, but it is useful if you allow the user to receive the report on the following page and want to offer them a way to get back to your main page.

Syntax:
<input type=hidden name="return_link_url" value="http://www.example.tld/main.html">

return_link_title
Description: This is the title that will be used to link the user back to the page you specify with return_link_url. The two fields will be shown on the resulting form page as:
<ul>
<li><a href="return_link_url">return_link_title</a>
</ul>

Syntax:
<input type=hidden name="return_link_title" value="Back to Main Page">

background
Description: This form field allow you to specify a background image that will appear if you do not have the redirect field set. This image will appear as the background to the form results page.

Syntax:
<input type=hidden name="background" value="http://www.example.tld/image.gif">

bgcolor
Description: This form field allow you to specify a bgcolor for the form results page in much the way you specify a background image. This field should not be set if the redirect field is set.

Syntax:
For a background color of white:
<input type=hidden name="bgcolor" value="#CCCCCC">

text_color
Description: This field works in the same way as bgcolor, except that it will change the color of your text.

Syntax:
For a text color of black:
<input type=hidden name="text_color" value="#000000">

link_color
Description: Changes the color of links on the resulting page. Works in the same way as text_color. Should not be defined if redirect is set.

Syntax:
For a link color of red:
<input type=hidden name="link_color" value="#FF0000">

vlink_color
Description: Changes the color of visited links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is set.

Syntax: For a visited link color of blue:
<input type=hidden name="vlink_color" value="#0000FF">

alink_color
Description: Changes the color of active links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is set.

Syntax:
For a visited link color of blue:
<input type=hidden name="alink_color" value="#0000FF">

required
Description: You can require certain fields in your form to be filled in before the user can successfully submit the form. Simply place all field names that you want to be mandatory into this field. If the required fields are not filled in, the user will be notified of what they need to fill in and a link back to the form will be provided. To use a customized error page, see 'missing_fields_redirect'.

Syntax:
If you want to require that they fill in the email and phone fields in your form, so that you can reach them once you have received the mail, use a syntax like:
<input type=hidden name="required" value="email,phone">

env_report
Description: Allows you to have environment variables included in the email message you receive after a user has filled out your form. Useful if you wish to know what browser they were using, what domain they were coming from or any other attributes associated with environment variables. The following is a short list of valid environment variables that might be useful:
REMOTE_ADDR - Sends the IP address of the remote host making the request.
HTTP_USER_AGENT - The browser the client is using to send the request.
There are others, but these are a few of the most useful. For more information on environment variables, you can visit the following link:
cgi.resourceindex.com

Syntax:
If you want to find the remote host and browser sending the request, you would put the following into your form:
<input type=hidden name="env_report" value="REMOTE_ADDR, HTTP_USER_AGENT">

sort
Description: This field allows you to choose the order in which you wish for your variables to appear in the email that FormMail generates. You can choose to have the field sorted alphabetically or specify a set order in which you want the fields to appear in your mail message. By leaving this field out, the order will simply default to the order in which the browser sends the information to the script (which is usually the exact same order as they appeared in the form). When sorting by a set order of fields, you should include the phrase "order:" as the first part of your value for the sort field and then follow that with the field names you want to be listed in the email message, separated by commas. This version allows a little more flexibility in the listing of ordered fields in that you can include spaces and line breaks in the field without it messing up the sort. This is helpful when you have many form fields and need to insert a line wrap.

Syntax:
To sort alphabetically:
<input type=hidden name="sort" value="alphabetic">
To sort by a set field order:
<input type=hidden name="sort" value="order:name1,name2,name3,etc...">

print_config
Description: print_config allows you to specify which of the config variables you would like to have printed in your email message. By default, no config fields are printed to your email. This is because the important form fields like email, subject, etc. are included in the header of the message. However, some users have asked for this option so they can have these fields printed in the body of the message. The config fields that you wish to have printed should be in the value attribute of your input tag separated by commas.

Syntax:
If you want to print the email and subject fields in the body of your message, you would place the following form tag:
<input type=hidden name="print_config" value="email,subject">

print_blank_fields
Description: print_blank_fields allows you to request that all form fields are printed in the return HTML, regardless of whether or not they were filled in. FormMail defaults to turning this off, so that unused form fields aren't emailed.

Syntax:
If you want to print all blank fields:
<input type=hidden name="print_blank_fields" value="1">

missing_fields_redirect
Description: This form option allows you to specify a URL that users will be redirected to if there are fields listed in the required form field that are not filled in. This is so you can customize an error page instead of displaying the default.

Syntax:
<input type=hidden name="missing_fields_redirect" value="http://www.example.tld/error.html">

Any other form fields that appear in your script will be mailed back to you and displayed on the resulting page if you do not have the redirect field set. There is no limit as to how many other form fields you can use with this form, just use the NAME="whatever" tag to define other fields.

Enjoy!