Citynet: Home

Forms

DEV 101: placing Forms into HTML pages
This section delves into the ever-present email form, a necessity in most sites small and large.

The wonderful world of HTML Forms:
Although ugly and unfriendly, these elements are some of the most important players on your site. They provide the user interactivity that is necessary to many commerce sites and provide your users the ability to communicate with you directly according to the format in which you want questions answered. You can create surveys, mail forms, order forms, sign-up forms and just about anything you can think of with this one simple method.

Hit Counters:
Below is a list of free recources where you can create custom page counters to include on your website:

http://www.freestatscounter.com/
http://www.easycounter.com/


Simple Form Example:
 

Name:
Address 1:
Address 2:
City:
State/Zip:
Comments:
 

This form is designed to take the information provided and submit it via email to an address defined in the hidden field "sendto" :

<input type ="hidden" name="sendto" value="you@citynet.net">

The value of the hidden field sendto must be an email address on your Citynet account. The form will give an error if you use an email address from another provider. This is a security measure to keep spammers from exploiting the mail script.

If another person also needs to receive the information provided in the form, then a second email address can be defined in the hidden field "sendcc" :

<input type ="hidden" name="sendcc" value="someoneelse@somesite.com">

Next you need to add the mail server name:

<input type ="hidden" name="server" value="smtp.admin.citynet.net">

Then define the Subject of the email:

<input type ="hidden" name="subject" value="The Subject of the Form">

Define the page to go to after sending the form:

<input type ="hidden" name="resulturl" value="http://www.yoururl.com">

The complete form action without the fields:

The parts of this code that appear in red indicate where you need to place your information. The remainder of the code should not be altered.

<form action ="http://www.citynet.net/cgi-bin/mailto.cfm" method="post">
<input type="hidden" name="sendto" value="you@citynet.net">
<input type="hidden" name="server" value="smtp.admin.citynet.net">
<input type="hidden" name="subject" value="The Subject of the Form">
<input type="hidden" name="resulturl" value="http://www.yoururl.com">
-- INSERT FIELDS HERE --
</form>

Adding input fields to an html form:

Text field:


 

<input type="text" name="name" size="25">
 

pull Down Menu:

<select name=color>
<option value="red" selected>red</option>
<option value="green">green</option>
<option value="blue">blue</option>

Radio ButtonsOn Off

<input type="radio" name="status" value="open"><input type="radio" name="status" value="closed">

Text Area:

<textarea cols="25" rows="5" name="comments">Content</textarea>

Submit Button:

<input type="Submit" name="Submit" value="Submit">

Reset Button:

<input type="Reset" name="Reset" value="Reset">

You must add a unique value for each name="value" the information between the (" ") quotes is what you see in the email as in the first element above: name="name" you will see: name="User Input"

      ** DO NOT use commas when setting your field name values.
          Example of what NOT to do: <input type="text" name="city,state,zip" size="10">
          Example that works: <input type="text" name="city/state/zip" size="10">

putting it all together:

<form action="http://www.citynet.net/cgi-bin/mailto.cfm" method="post">
<input type="hidden" name="sendto" value="you@citynet.net">
<input type="hidden" name="sendcc" value="someoneelseneedsacopy@citynet.net">
<input type="hidden" name="server" value="smtp.admin.citynet.net">
<input type="hidden" name="subject" value="The Subject of the Form">
<input type="hidden" name="resulturl" value="http://www.yoururl.com">
<input type="text" name="name" size="10">
<select name=color><option value="red" selected>red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<input type="radio" name="status" value="open"><input type="radio" name="status" value="closed">
<textarea cols="17" name="comments">Content</textarea>
<input type="Submit" name="Submit" value="Submit">
<input type="Reset" name="Reset" value="Reset">
</form>

 Don't forget to close your <form> tag when you're done, or it won't work! Everything in your form should be contained between the:
<form action="" method=""> </form>tags.

Now that you've mastered the art of the HTML form, it's time to move on to the next topic: COLOR! >>

Citynet