Dan Fergus Design > Student Resources > Syllabus > Class Schedule > E-mail Form Exercise

VCA225 Digital Production

Simple E-Mail Form

Forms are very useful items—they allow individuals and companies to collect data directly from users right over the web. And they're pretty easy to create. However, to make a form truly function requires more than simple HTML. Some sort of "server-side" scripting is also needed. This means that the web host has to make use of one of a number of technologies that can process data. Scripts can then be written in a number of languages such as PHP, C, and Java. If the server supports one or more of these, a program file must be written in the appropriate language and placed on the server to handle the form data. This can get complicated; usually a web designer would work with a programmer to set this up. For this exercise, I am providing you with a PHP script; all you need do is create the form.

Exercise

Create a form that will send an e-mail message.

Part One: PHP File

  1. Download this zip file; it contains a copy of the formToEmail.php. Place it into your root folder.
  2. Open up formToEmail.php in Dreamweaver and look for the line (79) that says: $my_email = "delete these words and put the email address only in here between the quotes";. Put in your actual e-mail address (leave the quotes!).
  3. In the line (89) that says: $continue = "http://www.danfergusdesign.com/studentSites/yourName/"; replace yourName with your root folder designation (first initial–last name; for example: dFergus).
  4. Save it and close it.
  5. Upload the php file to your server.

Part Two: HTML Form

  1. Open a new HTML document. Save it as "form.html" into your root folder.
  2. Create a table with 2 columns and 5 rows. Give it a padding of 5 and a border of 1.
  3. Go into your code and place the following tag after the <body> but before the <table> tag:
    <form name="form1" method="post" action="formToEmail.php">
  4. Put the closing </form> tag after the </table> tag.
  5. In the first table cell write "Name". In the cell directly below write "E-mail". Below that in the next cell down write "Bio". Below that write "Favorite Color". Leave the bottom cell blank for now.
  6. Go up to the Dreamweaver Insert bar and click on the left-hand button (which probably says "Common") and choose "Forms" from the pop-up menu.
  7. On your HTML document, select the top-right table cell (next to the "Name" cell). Now click on the "Text Field" button in the Insert bar (the icon looks like a box with a little "i-bar" inside). An accessibility window will open. Choose "No label tag" and then click OK.
  8. Notice that a text field appears in the cell. Click in the text field and look at the Properties window. make sure "Single Line" is checked. For "Char With" put 60. In the field to the left labeled "Text Field", write "Name".
  9. Click inside the next cell down (next to "E-mail"). Add another text field as above (same number of characters), but this time name it "Email".
  10. Click inside the third cell down in your table (next to "Bio"). This time from the Insert bar, choose the "Textarea" button. Note that the "Multiline" button is now selected. Once again change the "Char width" to 60. For "Num lines" put 3 (or more). Name this field "Bio".
  11. Click inside the 4th cell down (next to "Favorite Colors"). From the Insert bar choose "Radio Group". A dialog box will appear. For "Name" write "Color". Then change the first "Radio" under label to "Red". Change the value to Red too. Change the Second Radio/Value to Blue. Press the "plus" button to add a third option. Make this one Green/Green. Add as many colors as you like (don't get too carried away). Click "OK".
  12. Click inside the bottom-right table cell. In the Insert menu, click on the "Button" button. In the Properties window, change the "Action" to "Reset Form" (note how the button label changes automatically). Add one more button, but leave this one as a "Submit" button.
  13. Upload html form page to your server. Update your index page to point to the form.html page and upload the changes to that page too.
  14. Go to your form page on the web and try it.
  15. Customize your form. Try changing the info/fields. Instead of favorite colors you could have folks select their favorite actor or breed of dog or ice cream flavor. You could add additional fields/button groups. You could add one or more check boxes. Also add style (colors, formatting, etc.). Make the form uniquely your own.

Point Breakdown

10 pts

Went well above and beyond and created something special.

9 pts

Went above and beyond requirements (added styles, customized the form questions/buttons, etc.).

8 pts

Did what was required.

7 pts

Missing one or more required elements or contains one or more errors.

0–6 pts

Poor showing; mostly incomplete or full of errors.

 

Course Outline

Syllabus

Student Resources