Hands-On: Dreamweaver CS3 HIDDEN FORM FIELDS for CGI SCRIPTS
I own a CGI script that you may use and link to as long as you follow the instructions carefully. This script requires that you use YOUR OWN Email Address to receive the comments from your visitors. If you do not, then I receive the letters instead. This is NOT a good thing, trust me! By following the Hands-on steps on this page you'll be able to create these pages anytime you wish.
Exercise: CGI Hidden Form Fields You Can Use
Using any or all of the following Hidden Tags helps to build the "Results" page after a form has been submitted. If for any reason, part of the form was left incomplete, a virtual Whoops page will be built using the information from these hidden tags. The same is true for a correctly filled out form, a Thank You page will then be generated stating what the user entered on the form.
If you want to see all this in action go to my home page and click the Contact Me Here button, try submitting before entering any content and you’ll see a “Whoops” page and then after you do what is requested you’ll see a “Thank You” page.
Download the Hidden CGI Graphics here to your images folder if you wish to use them: http://cis347.info/forms/thanks.jpg
http://cis347.info/forms/whoops.jpg
1. Reopen contactForm.html and save it as contactFormHIDE.html, let’s add a whole bunch of really cool hidden tags to the form. On the Forms menu, the third button from the left is the Hidden Field button. Click it to add a Hidden Field icon to the page, use the Properties Inspector to add the content.
2. This special Hidden input tag, with name="Recipient Address", is where YOU put YOUR Email address; that way you will get to see the results of the Form. If you want to send to multiple addresses, use a comma-separated list of Email addresses.
This is what you see when you press the Hidden Field button, type the input name in the HiddenField textbox and then place the value I give you in the Value textbox. You may also work from the Code View.
Professor Al Fichera
Page 1 of 4
FormHiddenFieldsCS3.doc
Hands-On: Dreamweaver CS3 HIDDEN FORM FIELDS for CGI SCRIPTS
id="Recipient
3. This special Hidden input tag, with name="Background Image", is used to add a background tiled image on all virtual pages created. This tag is quite optional and is OK if you don’t use it.
4. This special Hidden input tag, with name="Background Color", is used to color the background color on all virtual pages created. Your choice of colors here by hexadecimal notation. If you are using a tiled background image, then the color will not be used.
5. This special Hidden input tag, with name="Text Color", is used to change the text color on all pages submitted. This is a nice feature since your background color or tiled image may require a different color than the default black. Your choice of colors here. If you choose to work from the Code View, this dialog box opens for you to insert your values. How you input your Hidden codes is strictly up to you.
6. This special Hidden input tag, with name="Link Color", is used to change the link color on all pages submitted. As stated with the text color above, your background choices will dictate the color needed for hypertext links. Your choice of colors here.
7. This special Hidden input tag, with name="VisitedLink Color", is used to change the visited link color on all pages submitted. Ditto the above on Link colors. Your choice of colors here.
8. This special Hidden input tag, with name="Graphic", provides the absolute path URL of the graphic which will appear onscreen when the form is submitted. Although not necessary for the virtual Thank you page, it is a chance to repeat graphic images used within the site and does tie the pages together through graphics. You will need the complete address of the graphic for this to work.
Professor Al Fichera Page 2 of 4 FormHiddenFieldsCS3.doc
Hands-On: Dreamweaver CS3 HIDDEN FORM FIELDS for CGI SCRIPTS
9. This special Hidden input tag, with name="Required Graphic", provides the URL of the graphic which will appear onscreen when the form is submitted without all the required fields completed. I like to call this the “Whoops” graphic since it is to remind the user that more information is required before they can submit the form. I’ve added an absolute address here.
10. This special Hidden input tag, with name="Response Page Title", specifies the title of the page that will appear onscreen when the form is submitted. Your choice of word here, but I'd keep it simple and to the point, such as the choice shown below stating that there Email was sent successfully.
11. This special Hidden input tag, with name="Show Results", specifies whether to show the form name/value pairs onscreen when submitted. I consider this the most important, and grade down if I don't see this feature used on student work. Without this, there will only be the thank you on the virtual page, this feature recaps all the submitted fields the user used on the form.
12. This special Hidden input tag, with name="Email Subject Line", specifies the text used as the subject line of the email that is generated when the form is submitted. If you chose to ignore this hidden tag, when you receive your Email the Subject line will be empty, and the Email could look like SPAM and you will probably ignore it and delete it without opening it up.
13. This special Hidden input tag, with name="Greeting", specifies the text that appears onscreen when the form is submitted. This is where you can write a small paragraph or two thanking the user or informing them of additional things before they move away. Note that the "*" in the value is used to specify a new paragraph.
14. This special Hidden input tag, with name="Return URL", specifies the URL to use for the return link on the response page. This feature of the hidden tags helps the visitor to move on the page you wish them to go to next; otherwise they would have to use the back button to return to the form. This is another great way to move them to a second form if that is in your ultimate plan.
15. This special Hidden input tag, with name="Return Link Text", specifies the text to use for the return link on the response page. Of course you need this hidden tag to tie-in with the above tag; this is just the clickable text that they will use to hyperlink to the next page.
Professor Al Fichera
Page 3 of 4
FormHiddenFieldsCS3.doc
Hands-On: Dreamweaver CS3 HIDDEN FORM FIELDS for CGI SCRIPTS
After you have inserted all of the wanted Hidden Fields, your Design View could look like this if you have your View > Visual Aids > Invisible Elements showing on the page. Each of the icons represents one of your hidden fields and is a direct connection to that element.
At this point you are finished inputting hidden form tags and you can return to the actual form itself. If and when you use this CGI-BIN Script, you also have the ability to do some validation without the use of JavaScript. In Code View, locate any input tag you need to have filled-in by a visitor. At the end of the name and id tags, add an asterisk before the closing quotes. This will stop the form from being submitted by the viewer until that field is filled. This doesn’t make them put the right information in the field, it just asks them to fill before submitting. Do the next two steps to experience this for yourself. 1. Choose any input tag , such as input name="firstName*", it will fill the name field in the email from line. Note that the "*" appended to the name means the field must be completed before the form will be accepted. This is quite easy to do from the Property Inspector. Also note: Any text field can have an asterisk * added before the closing quotes, this will cause the CGI script to create the virtual “Whoops” page of missing items.
2. You can also ask for an Email address, such as input name="Email*" it will look for an Email address to be filled out. Note: Dreamweaver Behaviors can be added to this Form to demand that the field be filled in with a “real” email address, one that uses the @ symbol in the name. Of course, it can not tell if they are giving a false email address. Also note: An "*" appended to the name means the field must be completed before the form will be accepted by the CGI script.
These dozen plus Hidden codes discussed above are yours to use in any combination you like. You can use them all, or just a few, it really depends upon what the form is trying to do. I have no restrictions other than that you follow the instructions carefully, and that you use your own Email address where requested. (That way I don't get your form results in my Email; and if I do get them, a lot of good that will do for you! Not!)
Professor Al Fichera
Page 4 of 4
FormHiddenFieldsCS3.doc