Making Forms Work for You
Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
Forms provide interaction between you and your visitors. You can use them to do all sorts of tasks, such as getting subscribers for a mailing list, taking a survey, and giving people an easy way to contact anyone on your church staff.

You can also use a series of forms as a kind teaching tool to help evangelize them or aid their spiritual growth. For an example of this, see and test "The Master Needs You" (by Good News Ministries).

Forms work on any server that uses a cgi-bin to process them. Most hosting companies offer it as part of the package, already set up, requiring no knowledge of cgi scripting from you. They have done the programming; all you need to know is the HTML code for adding forms to your webpage.

Once you create an area on your webpage for the form (using the form tag), you include any number of input fields. An "input field" is a request for specific information, such as name or email address. You can assign the input or create a blank field so the visitor can assign the input.

This tutorial lists a variety of input fields and how to set them up.

1. First you need to create the form on your webpage. The form tag must include an "action" and a "method" for the host server to understand what you're doing. Your hosting company will tell you how this line of code should look. Here is a typical one:

<FORM ACTION = "/cgi-bin/formmail.pl" METHOD = "POST">

2. There is only one form field that you must have in your form for it to work correctly. This is the recipient field. It allows you to specify to whom the form results should be mailed. Most likely you will want to configure this option as a hidden form field with a value equal to that of your e-mail address, like so:

<input type=hidden name="recipient" value="your_email@yoursite.org">

3. OPTIONAL Form Fields
This tutorial assumes you already know how to use radio buttons, check boxes, text boxes and text areas in your form for gathering whatever information you want to collect from the user. Beyond these basics, here are other input fields you can use.

subject
Allows you to name the subject that will appear in the email that is sent to you after this form has been submitted. Change the value to whatever you want it to say.

<input type=hidden name="subject" value="My Form">

Or you can allow the user to choose the subject, like so:
Name this topic:

<input type=text name="subject">

email
Allows the user to give you their return email address. If you want to be able to return email to your user, you must include this. This will be put into the From: field of the email notice you receive. If you name this field "E-mail" or any other variation, it will show up in the body of the emailed results sent to you, but not as a return address you can reply to.

<input type=text name="email">

realname
Allows 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. If you name this simply "name" or "first name" or "last name", it will show up in the body of the emailed results sent to you, but not in the email's header.

<input type=text name="realname">

sort
Allows you to choose the order in which the fields show up in the form's results that are emailed to you. If you don't use this field, the order will simply default to the way the user's browser sends the information, which is usually, but not always, the order they appeared on your webpage.

To sort alphabetically:
<input type=hidden name="sort" value="alphabetic">

To sort by a set field order, be sure to include the word 'order:' as the first part of the value, and then follow that with the field names you want to be listed in the e-mail message, separated by commas:
<input type=hidden name="sort" value="order:phone,address,church,etc...">

redirect
Use this if you want to redirect the user to a new webpage; otherwise they will see the default response page, which shows them everything they filled out on the form.

To choose the URL the user will automatically go to next:
<input type=hidden name="redirect" value="http://yoursite.org/thankyou.htm">

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

required
Allows you to require that certain fields be filled in before the user can successfully submit the form. Put the names of all mandatory fields into this input tag (the example below requires the person's name and email address). Thus, if the required fields are left empty, the user will be notified of what they need to fill in and will be given a link back to the form.

<input type=hidden name="required" value="realname,email">

env_report
Allows you to find out what browser the user had, what domain they came from, or any other attributes associated with environment variables. Here's a few such variables:

REMOTE_HOST - the hostname making a request.
REMOTE_ADDR - the IP address of the remote host.
HTTP_USER_AGENT - the browser used.

<input type=hidden name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">

title
Allows you to specify the title and header that will appear on the form results page (if you do not redirect the user to a new webpage). Change the value to whatever you want it to be.

<input type=hidden name="title" value="Here's the information you sent us">

return_link_title
Allows you to add a link to the bottom of the form results page to lead your visitors where you want them to go next. This is the text that will be used for the link; it must go with the "return_link_url" input field, which is explained after this.

<input type=hidden name="return_link_title" value="Back to Home Page">

return_link_url
Here is how you specify the link's URL that makes the above "return_link_title" text become a link on the form results page.

<input type=hidden name="return_link_url" value="http://yoursite.org/">

background
Allows you to choose a background image for the form results page (if you do not redirect the user to a new webpage).

<input type=hidden name="background" value="http://yoursite.org/yourimage.jpg">

bgcolor
Allows you to choose the background color for the form results page (if you do not redirect the user to a new webpage). This example will make it white:

<input type=hidden name="bgcolor" value="#FFFFFF">

text_color
Allows you to choose the text color on the form results page (if you do not redirect the user to a new webpage). This example will make the fonts black:

<input type=hidden name="text_color" value="#000000">

link_color
Allows you to choose the color of any links on the form results page (if you do not redirect the user to a new webpage). This example will make the links red:

<input type=hidden name="link_color" value="#FF0000">

vlink_color
Allows you to choose the color of visited links on the form results page (if you do not redirect the user to a new webpage). This example will make the visited links blue:

<input type=hidden name="vlink_color" value="#0000FF">

alink_color
Allows you to choose the color of active links on the form results page (if you do not redirect the user to a new webpage). This example will make the visited links blue:

<input type=hidden name="alink_color" value="#0000FF">

Download this tutorial as a printable Word Document.

Additional ideas from GNWDA members:
Posted by: Mike Fone of Onfire Ministries

button color control
To decorate a form with colour, use inline styles in the tags. For example, the following code controls the colours for the button itself, it's border, and its font:

<input type="submit" value="Submit" style="background-color: #99FFCC; border-color: #009999; color:blue;">

If you aren't happy with hex colour codes, you can use words for the basic sixteen colours, such as red, green, yellow, navy and magenta etc, but don't use the # sign.

 

Want a tutorial
one how to set up
a form using a
PHP script?

EXTRA TIPS

Send an immediate, automatic "thank you" or a note that explains what will happen next with the information that a visitor submits to your form. To do this, set up a new email address specifically for this form, and assign it to the "recipient" field of the form. Then use the autoresponder for this address as your "thank you" reply. When anyone hits the "submit" button of your form, if they've supplied their email address, they will immediately receive your autoresponse as an email with the subject name you've assigned to the form.

Add more to your forms using a JavaScript. Here are some free scripts from The JavaScript Source

Return to Directory of Tutorials or GNWDA home page