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:
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:
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.
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.
•
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.
•
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.
•
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:
•
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:
•
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:
•
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:
•
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:
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:
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
