CS2020:   Web Science, Sytems and Design
Instructor Outline Syllabus Projects Links  

Lab 5: Contact Form and CGI FormBuddy

Point 50

start Feb 6

due Feb 13, 11pm

 

Objectives: Use Dreamweaver to create a XHTML form for your Contact Us page (contact.htm). It should be linked from your template(s) from Lab 4 so all pages through the navigation bar can link to this new page in your site. You will also register for formbuddy.com's free service to get emails sent to you when someone uses your form. This uses a CGI program that formbuddy offers for free use that capture the form data sent to it in the CGI request (when you hit the submit button of your form) and then on its server stores the data and emails it to the email you registered with formbuddy.

 

Resources: Check out a number of instructional video and web materials off our class website on how to use formbuddy. Also, check out class and book materials on CGI and XHTML forms.

Definition of Problem:

PART 1 = Register for a free account on FormBuddy.com

  1. See information on our website and also read up on rules on formbuddy.com. This is a third party site I do not control and you will need to read and follow instructions they give.
  2. You will need to give an email address which you can recieve the emails at.
  3. You will need to create a login and password ----remember it...write it down somewhere safe --this is something I can not fix for you (again a 3rd party site).
  4. Save instructions on what you need to do to make your form work and point to the formbuddy.com cgi email service (they will give you a URL for the action="formbuddy's Url for YOUR account" and tell you what the method=GET or POSTshould be and may also direct you about some additional XHTML you may have to hand code inside the form tags you create next in dreamweaver. SAVE THIS INFORMATION FORMBUDDY GIVES YOU so you can use it in Part 2!!!!

PART 2= Create XHTML form inside the Contact Us page  

  1. Using the template(s) you created in Lab 4, generate a new page for Contact Us called contact.htm.
  2. Update all navigation links in your website through the templates (this is the whole idea of navigation bar being in tempalte) so the Contact Us link will point to contact.htm
  3. Insert an XHTML form inside the approriate editable region of your new contact.htm page. (in dreamewaver Insert->Form->Form). Make the method type and action statement the appropriate values as directed by FormBuddy.com (see part 1..where you were to have saved the info formbuddy gave you)
    • this form must have fields for users name, email address, and text area for comments and a submit and reset button. You may add other elements to your form and ofcourse need appriate labels.
  4. Upload the updated website with new contact.htm page to your server account using Dreamweaver transfer tool.

 

 

PART 3 =Test it and Save Results from FormBuddy email  

Test the contact us page ---type in the form and hit submit. Do you get an email from formbuddy.com with the contents? If not, something is wrong with the form or the action statement , etc. you edited. If you have problems here are my suggestions:

  • Validate the contact.htm page using w3.com's validator -- you may have some problems especially if you had edited the XHTML
  • Go back over the formbuddy.com's instructions --see if the url for the action= in the <form> tag is correct. Is the method= in the <form> tag correct? Are you appropriately passing all the form data---see what formbuddy says about this---they have some special instructions.
  • If all the above fail to resolve your problem you may need to seek help from me....comming in to office hours may be the best bet and save you time.
 


Evaluation Guidelines

Deliverables

  1. Upload all of your web-pages (remember their navigation bars altered with link to contact.htm page) and any related content that is altered or new using Dreamweaver file transfer (you set up the site in part 1) into your server account under your public_html directory ( Make sure all the files and directories have file mode (permissions) of 755.
  2. Test out your site by typing in the url (http://puzzle.sci.csueastbay.edu/~YOURLOGIN) ---this should go to your index.htm page --- Test it in IE and Firefox and Chrome browsers.
  3. Upload content of email sent to you from formbuddy.com showing the complete data entered in the form (name, email, comments).
  4. Turn in the following information Blackboard->Lab->Lab5

    • URL to website (e.g http://puzzle.sci.csueastbay.edu/~YOURLOGIN/index.htm)
    • Upload content of email in #3.

 
© Lynne Grewe