#10 Grading Criteria for:
Tables and Forms. Part 2
Contact Form, Form Controls, Form Validation, Form Action
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.
Caution: It is OK if you are reluctant to put your
real personal home address and personal phone number on the Web.
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.
For Forms help using Expression Web see: eBook-Springer/ExpressionWeb3/Wise10EW-Forms.pdf
Reminder: .style1 or autostyle7 are not a meaningful names: -5 for each occurance
|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.
|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.
Note: you should only have one <form> tag and one </form> closing tag on your contact page.
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:
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.
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.
You can use this techique, as long as your previous table assignment has
been submitted and graded.
See output below:
Leave * Name blank and enter Abc for * Email then click [Submit] to see what happens.
float: left; text-align: right;
padding-right: 20px; margin-bottom: 10px; }
width: 150px; margin-bottom: 10px; }
<form name="contactForm" action="FormProcess.php" method="post">
<label for="FirstName">First Name</label>
<input name="FirstName" type="text" required><br>
<input name="address" type="text"><br>
<input name="email" type="email"><br>
<input name="Submit" type="submit" value="Submit">
|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 good names|
|Set State (as a Dropdown, default to FL, max length for value attribute=2)
<option value="FL" selected>Florida</option>
|Open the text file
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 option dropdown|
|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
<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 radio buttons
|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">
<input type="checkbox" name="Agree" value="Agree">I Agree
or radio buttons
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"> </label>
<input type="checkbox" name="CallTime" id="CallTimePM" value="Evening">Evening<br>
|Add a Comment or Memo field
|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 comment textarea|
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">
|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. But be sure to set email type as
See Troubleshooting section below
|Set the Form Action, Method and Encoding.
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:
favicon.ico (may be in images folder)
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"
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.
1. Upload your contact.htm file to your website.
2. Fill out your contact online form and hit [Submit].
3. Wait a few minutes, then open your home email and you should get a copy of the filled out form data.
4. Copy the email and paste it into notepad; save it as EmailText.txt.
5. Upload EmailText.txt (20 points) AND the URL to the assignment Dropbox.
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:
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.)
1. There should only be one <form> tag for the entire page.
You can only have one <form> tag for the entire page.
You can only have one </form> for the entire page.
2. Did you have </form> after the Submit buttom?
3. Do you have the line below for the form action in contact.htm:
<form name="contactForm" id="contactForm" action="FormProcess.php" method="post">
4. There is an area up top in the FormProcess.php file where you enter your email. Did you do that correctly?
5. Did you upload FormProcess.php to the same directory (such as public_html) in GoDaddy?
6. 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 …
7. 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.
8. 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 -->
<!-- Use the line below for a Redirect to send Confirmation or to display Thank you -->