Home   CGS 2820C
  Web Development 		#10 Grading Criteria for:
Contact Form, Form Controls, Form Validation, Form Action

Description:  In your editor create a working Contact Form, which will be a linked through your common Menu Navigation to the rest of your website. Your Contact page will have the same format, layout, CSS sheet, and same Navigation as your other pages.

Caution: Be reluctant to put your personal home address and personal phone number on the Web.

Server Side processing: This is where a script file on the Web Server processes the posted form data and sends an email containing the form data to an appropriate recipient. This is the way professional forms are done. Server side scripts are typically written in PHP (PHP originally stood for Personal Home Page) or ASP (Microsoft's Active Server Page), which must be installed on the server. Server side scripts only run online from a remote web server, and do not run on local computers, unless special software is installed. That means, although you can view and edit your PHP or ASP script locally, you cannot run and test it until you upload it to the server. And although you can view the results of your PHP or ASP script when it is run on the server, you cannot view the source PHP or ASP code online.

Client Side processing: The processing of the form data is done on the Client's computer using the user's email client program, such as Outlook. This is seldom done for two reasons: 1. Windows will often display a warning message indicating that a process is trying to access their email client. 2. If a form is filled out in the library or in a computer lab, typically an email client has not been configured so the form data will not be submitted.

Form Action:  This is what happens after [Submit] is clicked. Usually a separate server-side script file is called to process the submitted data from the form HTML file. Using a server side form action is the preferred method.
Server side samples:
<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
Download FormProcess.php (right-click the .txt file and save as .php) and view FormDemo.htm
Note1: You will have to edit and modify FormProcess.php to work with your form and your email (see line 10).
Note2: SCF email accounts may not work with the php script; so use your Gmail, Hotmail, or other email address.
OR
<form name="contactForm" id="contactForm" action="webformmailer.php" method="post">
OR action="gdform.asp"  OR action="/cgi-bin/FormMail.pl"  (check with your hosting company)
Client side sample (not recommended):
<form action="mailto:name@domain.com?Subject=Inquiry" method="post" enctype="text/plain">
Form Method: Post the data to the Server or Get or download data from a database. Post is most common.
Form Encoding Type: ASCII (text/plain) or Unicode. Encoding is used in Client Side processing, which is not recommended.

The Text Fields, TextAreas, CheckBoxes, and Radio button elements on your form are called Fields. Fields hold the form data.

If you do not include the type attribute in an <input> tag, it becomes a text field by default. But for clarity, you should enter each form element type.

You can enter default values for fields by using the value=" " attribute (see below).

The user will move from field to field to enter values by either tapping [Tab], or by using the mouse. [Enter] will "Submit" the form.
When using the <select> and <option> field element, such as a list of items, users can use [Ctrl] to select two or more noncontiguous items, or [Shift] to select a contiguous series of items.

For Forms help using Expression Web see: eBook-Springer/ExpressionWeb3/Wise10EW-Forms.pdf
For Forms help using DreamWeaver see: eBook-Springer/DreamweaverCS4/Powers09CSSformsValidation.pdf

Reminder: .style1 or autostyle7 are not a meaningful names: -5 for each occurance
Reminder: Every web page needs a unique Title, specific for the page: -5
Reminder: Page must have: <meta name="author" content="Your Name"> and a unique Meta Description for the Contact page.

Topic Directions Points
1. Add a Form control to your Contact page.

2. If desired, insert a Table inside the Form Control.
Note: Some DOCTYPEs do not allow <form> tags inside <table> tag - so your <form> tags need to go outside the <table> tags

Use the same personalize banner/masthead in the top row or on the top of the page consistent with the rest of your site.

Note: you should only have one <form> tag and one </form> closing tag on your contact page.		 DW: Insert | Form, then select the desired control
EW2: Task Panes | Tool Box | Form Controls
EW3: Panels | Tool Box | Form Controls
and drag a Form control to an appropriate area after the <body> tag of your Contact page. Insert a table  about 12 rows, 2 columns inside the <form> tags:
Table | Insert Table
Merge the columns in your first row for your form title.

Also be sure to add your website Navigation to your Contact Page.  Your Contact page will use the same format, layout, CSS sheet, and same Navigation as your other pages. 10 pts.

Reminder: .style1 is not a meaningful name: -5
Reminder: Every page needs a Title: -5		 10

Note the
Troubleshooting
link at the bottom of the page.
3. Place the Field Labels (First Name, Last Name, City, ST, Zip, Email... ) in column one. Right Justify the field labels in column one:
<td style="text-align:right">

The example at right is NOT a working form; it is just a pictorial sample, so do not highlight and copy it.


Be sure to somehow specify (in an obvious manner) which fields are required - for instance see red *s in sample form shown at the right. Consider defining a class in your css called .required with color: red and bold.

Also add required to input tag:
<input type="text" name="FirstName" id="FirstName" size="40" required>

<input type="email" name="email" id="email" required>
 If you use a table: In column one, starting in row 2 type the field labels or descriptions of your form fields such as those shown below.
Be sure to use your site-wide CSS and Navigation.
Title Goes Here
* First Name
* Last Name
City
ST
Zip
* Email
Gender M F
Education AS BS
Comments
10

See the section immediately below for an alternative way to do a neatly lined up form without a table.
At right is code for a neatly aligned form without a table. Many webweavers prefer to avoid using tables with HTML5 and CSS3.

See output below:




  

Leave * Name blank and enter Abc for * Email then click [Submit] to see what happens. 		<head>
<style type="text/css">
label {
   width: 100px;
   float: left; text-align: right;
   padding-right: 20px; margin-bottom: 10px; }

input {
   width: 150px; margin-bottom: 10px; }
</style>
</head>

<body>
<form name="contactForm" action="FormProcess.php" method="post">
  <label for="FirstName">First Name</label>
  <input name="FirstName" type="text" required><br>
  <label for="address">Address</label>
  <input name="address" type="text"><br>
  <label for="email">Email</label>
  <input name="email" type="email"><br>
  <input name="Submit" type="submit" value="Submit">
</form>
4. Place the Form Control Elements shown above (text boxes, check boxes, buttons) in column two. Include at least: First Name, Last Name, City, ST, Zip, Email, and a Radio button, Checkbox, and Comment field.

All fields must have meaningful names such as FirstName, LastName, City...		 EW: Task Panes | Tool Box | Form Controls and drag the appropriate controls to column two.
DW: Insert | Form and choose the control
In Code view give an appropriate name for each control. For instance by default the "Input (text)" control for First Name will be: <input type="text" name="Text1">
Change to: <input type="text" name="FirstName">
Make sure there are no spaces in the input field name.		 10
Set State (as a Dropdown, default to FL, max length for value attribute=2)
<option value="FL" selected>Florida</option>		 Open the text file StatesOptionValue.txt
Copy the entire file from <select> to </select>
In code view, find the State dropdown and paste the entire code from <select> to </select>		 10
Radio buttons (also called option buttons) such as male/female or something similar where only one choice can be made. You must put them in a Group Box if there are multiple categories. Only one Radio button may be selected - make sure it has a meaningful field name.

<input type="radio" name="Gender" id="M" value="M">M
<input type="radio" name="Gender" id="F" value="F">F
Notice the same name, but different IDs. Use unique IDs with radio buttons or pages with multiple <form> elements. 		10
Add at least one Checkbox (such Education: H.S., College or something similar). Multiple Checkboxes may be selected - make sure it has a meaningful field name. Ex:
H.S.<input type="checkbox" name="HS" value="HS">
or
<input type="checkbox" name="Agree" value="Agree">I Agree		 10
For another example with multiple checkboxes:
  <label for="CallTime">Best Time to Call</label>
  <input type="checkbox" name="CallTime" id="CallTimeAM" value="Morning">Day<br>
  <label for="CallTime">&nbsp;</label>
  <input type="checkbox" name="CallTime" id="CallTimePM" value="Evening">Evening<br>
Add a Comment or Memo field
(Textarea)		 Textareas allow for longer entries and provide a scrollbar when the text area becomes longer than the length of the Text Area box. Ex:
<textarea name="Notes" cols="40" rows="6"></textarea>		 10
Notice how you can set a default value or directions for a textarea control:
<textarea name="Comments" cols="60" rows="3">Please provide feedback here!</textarea>
Add a working Reset Button
Add a working Submit Button		 Reset button will clear all fields
Ex: <input type="reset" name="Reset" value="Reset">		 10
Validate your form, that is:
Require at least 3 fields.
Make sure email is both required and valid - that is, at minimum it must have an @.

Have at least one field that is not required.		 The file FormProcess.php will validate and process your data. So there is no need to validate further.

To validate in Dreamweaver without using the PHP script: Select the [Submit] button, choose Window > Behaviors > [+] > Validate form. Select the fields that you want to require and check the Required box. BUT NOTE - FormProcess.php will do this validation for you. Use one or the other.

To use the more powerful Dreamweaver Spry validation:
1. Insert > Form > Spry Validation Text Field
2. Select the new field
3. Open the Properties panel (at bottom of window, choose Window > Properties if you do not see the Properties panel.)
4. Check Validate on Blur
5. Also explore the Type and Preview states dropdowns
6. When done. be sure to upload the new SpryAssets folder that was created.
 10

Troubleshooting:

There should only be one <form> tag for the entire page.

Does the form action call a script that you can see on your server?

Did you click on the [Submit] button when you validated the form in DW?

Set the Form Action, Method and Encoding.

See HTMLformDemo-ClientSide.htm
See HTMLformDemo-ServerSide.htm
and other form demos in the same Forms folder.

Test it: Make sure you can send/receive Form data to your own email.

Click for sample Form data sent to an email by a Server Side Script.

At this point there should be:
images     [Dir]
   contact.htm
   favicon.ico (may be in images folder)
   index.htm
   newsletter.htm
   portfolio.htm
   resume.htm
   yourSiteName.css
   FormProcess.php

 

Test on multiple browsers: such as IE, FireFox, Chrome, Safari. 		In Expression Web, you can right-click the <form> object and choose Form Properties. Click the [Options] button on the lower-left corner to set your form Action.

Most hosting companies provide built-in server side form processing scripts. These scripts are the form "action." For instance, GoDaddy used to automatically install webformmailer.php on Linux servers or gdform.php on Windows servers in the root directory, where your index,htm and contact.htm files are stored. (Sample ASP script). After GoDaddy went to the cPanel, they no longer provided form processing scripts, so I found and modified the following script for you to use: FormProcess.php. 
The form will not work unless your web page is uploaded to the Server (as in Server side).
(Before the cPanel, you had to go to the hosting company's Control Panel and click on Form Mail and enter the email address that the form data will be sent to.)

Sample 1 GoDaddy/Linux Server Side script:
<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
You will have to edit and modify FormProcess.php to work with your form and your email.
OR the older
<form action="webformmailer.php" method="post" name="contactForm" id="contactForm">
Sample 2 Server Side script:
<form name="contactMe" id="contactMe"
action="/cgi-bin/FormMail.pl" method="post">
OR
For Client Side
(not recommended due to Windows warning messages)
<form action="mailto:name@yourDomain.com" method="post" enctype="text/plain">

After the form is submitted - use an acknowledgement form or message, stating something like: "Thank you for contacting us. We will get back to you as soon as possible."

A good way to do this is to copy your contact.htm form and name the copy as contactSent.htm. Delete all of the form fields that were used in the contact.html form, and then add your acknowledgement message to the contactSent.htm form.

See the name="redirect" statement shown near the top of the sample form code shown at the bottom of this page.

Upload your contact.htm file to your website.
Fill out your contact online form and hit [Submit].
Wait a few minutes, then open your home email and you should get a copy of the filled out form data.
Copy the email and paste it into notepad; save it as EmailText.txt.
Upload EmailText.txt (20 points) AND the URL to the assignment Dropbox. 		10

Grading:

When I grade this, the first thing I will do is enter some sample data and then hit [Reset] and every thing should be reset.

Then I will hit [Submit] without entering any data and the data validation should prompt me that FirstName, LastName, Email, and Comments are required.

Then I will enter FirstName, LastName, Comments, and an Email without the @. It should prompt me that the email is not a valid email.

When I correctly enter all the required fields and hit [Submit], it should call a separate Contact sent page, stating thank you - see redirect code below.

Be sure to upload your email text that was sent after you hit [Submit] as well as your URL address.

Upload to server:
contact.htm
contactSent.htm
FormProcess.php

If you have problems: do an internet search or use the class discussion board.
Troubleshooting Your Form:
(Note - certain email addresses may not work - so if you think your code is correct, try another email address from another provider, just to rule that out.)
A. Do you have the line below in Contact.htm:
<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
B. Did you have </form> after the Submit buttom?
    You can only have one <form> tag for the entire page.
    You can only have one </form> for the entire page.
C. There is an area up top in the FormProcess.php file where you enter your email. Did you do that correctly?
D.  Did you upload FormProcess.php to the same directory (such as public_html) in GoDaddy?
E. You must match the fields listed in FormProcess.php (you will see them listed 3 times) exactly with the fields in the Contact.htm form.
For instance: LastName in Contact.htm and LastName shown 3 times in FormProcess.php. LastName cannot also be Last Name or Lastname or lastname because it is case sensitive.
Is FirstName in Contact.htm and shown 3 times exactly the same way in FormProcess.php
Is Address in Contact.htm and shown 3 times exactly in FormProcess.php
Is City in Contact.htm and shown 3 times exactly in FormProcess.php …
F. If the email does not arrive after a few minutes, consider using a different email address in FormProcess.php. Sometimes GoDaddy considers contact form emails from the same domain to be Spam. That is, if your GoDaddy domain is MyDomain.com and your email address is Mike@MyDomain.com, it may not go through. The solution is to use a different email address such as Mike@Outlook.com.
G. It takes longer to receive form submissions than it takes to receive an email. If your test submission did not arrive after a few minutes, check your Spam or Junk folder.
Sample code for a small form that you can copy and paste into the <body> of a demo file

<!-- FormProcess.php or webformmailer.php... is a Server Side Script stored in the root folder -->
<!-- It receives the form input and passes it to the email address of the recipient -->

<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
<input type="hidden" name="subject" value="MySiteName Contact Submission">
<!-- Use the line below for a Redirect to send Confirmation or to display Thank you -->
<input type="hidden" name="redirect" value="contactSent.htm">
<table>
 <tr>
   <td style="text-align:center;" colspan="2"> Contact (Your Name)</td>
 </tr>
 <tr>
   <td style="width:250px; text-align:right">
   * <label for="FirstName">First Name</label>
   </td>
   <td><input type="text" name="FirstName" id="FirstName" size="40" required>
   </td>
 </tr>
 <tr>
   <td style="text-align:right"><label for="LastName">Last Name</label> </td>
   <td><input type="text" name="LastName" id="LastName" size="40" required>
   </td>
 </tr>
 <tr>
   <td style="text-align:right"><label for="Telephone">Telephone</label> </td>
   <td> <input type="text" name="Telephone" size="40"> </td>
 </tr>
 <tr>
   <td style="text-align:right">
   * <label for="Email">Email</label>
   </td>
   <td><input type="email" name="Email" id="Email" size="40" required>
   </td>
 </tr>
 <tr>
   <td style="text-align:right"> <label for="Comments">Comments</label> </td>
   <td><textarea name="Comments" rows="5" cols="42"></textarea> </td>
 </tr>
 <tr>
   <td>&nbsp;</td>
   <td>
   <input type="reset" name="" value="Reset">&nbsp;&nbsp;&nbsp;
   <input type="submit" name="" value="Submit">
   <!-- Name="" so "Submit" does not show Submit=Submit on email to recipient -->
   </td>
 </tr>
</table>
</form>
The root folder of your actual local (USB thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) and remote (webserver) website should look now like this:
 images      [Dir] This is a subFolder - All images except possibly favicon.ico go here 
    contact.htm (Note: Your server will have a file named something like: FormProcess.php for your form action.)
    contactSent.htm This lets the user know the the form was submitted. It is a modified copy of contact.htm displaying a friendly confirmation message instead of the form.
    favicon.ico This is often in the images folder
    index.htm Your Home page (usually must be in lower case)
    newsletter.htm  
    portfolio.htm Your artwork, or books, or items for sale...
    resume.htm  
    FormProcess.php
 Godaddy/Linux Script used to process forms - this file is only works on the server.
 You will have to edit and modify FormProcess.php to work with your form and your email.
    yourSiteName.css Your external stylesheet