Description:  This is the second part of two assignments used to 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.

Option: If you choose to rebuild your website in WordPress, you can use a Contact Form Plugin to easily build your Contact page, such as Ninja Forms or WPForms. Then submit the absolute WordPress URL address to the Canvas assignment Dropbox.

Caution: It is OK if you are reluctant to put your real personal home address and personal phone number on the Web.

Server: The main network computer that supplies centralized software and connects local client computers together or to 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 - the owner of the website. 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: A typical home or business computer connected to a server. You can build, edit, test and view HTML files on a client computer. 
You can build and edit PHP and ASP files on a client computer, but you cannot test and view them unless you install server software.
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 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 html form code samples:
<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
Download FormProcess.php (right-click the FormProcess.txt file and save it as FormProcess.php) and view FormDemo.htm
Note1: You will have to edit and modify FormProcess.php to work with your form and your email.
Note2: SCF email accounts may not work with the php script; so use your Gmail, Hotmail, or other email address.
Note3: Each field in the FormProcess.php file must match each field in the Contact.htm file. For instance, you cannot use Telephone in the HTML file and use Phone in the PHP file. Also the field names are case sensitive. If you have a single mismatch error nothing will see to happen, and the email will not go through. However, a file may placed in the public_html folder of the server, named error_log.txt. Open this file to look for help on mismatched fields if your email did not go through.

Form Method: Post the data to the Server or Get / download data from a database. Post is most common.

The Text Fields, TextAreas, CheckBoxes, and Radio button elements on your form are called Fields. Fields hold the form data, that is the names, address, phone number...

If you do not include the type attribute in an <input> field 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).

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.

The user can move from field to field to enter values by either tapping [Tab], or by using the mouse. [Enter] will "Submit" the form.

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.

In DreamWeaver:
Insert | Form, then select the desired control

Optional pattern and placeholder:

<input name="Zip" type="text" pattern="[0-9]{5}" title="Five digit zip code">

<textarea cols="40" name="Comments" placeholder="Enter feedback here" rows="4"></textarea>

10 <input...>
Name, City, State, Zip
10 type "email"
10 set required fields

(p 168, p 343)

See the section immediately below for an alternative way to do a neatly lined up form without a table.

See output below:

<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" pattern="[A-Za-z0-9]+"><br>
  <label for="email">* Email</label>
  <input name="email" type="email"><br>
  <input name="Submit" type="submit" value="Submit">
</form>

Test on multiple browsers: such as Edge, FireFox, Chrome, Safari and smartphone.

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."

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.

10pts Upload to the dropbox a Screen Capture of the email that was sent after you hit [Submit].
10pts Also upload your Contact page URL address.

Upload to server:
contact.htm
contactSent.htm
FormProcess.php
(p 149, 151)