You might want to add a form to a Web page to review customer feedback, have the ability to conduct e-commerce on the Web, or just allow the user to send you common messages. Implementing forms can be somewhat of a hassle when adding them into complex page layouts. You may want to insert a table inside the form area to organize the form fields better rather than cramming all the fields together. (Refer to the previous discussion of how to implement tables).
The form field construction set can be found to the end of your task bar. There should be 6 grouped icons. Again, the capabilities of these icons will produce a short description if you do a mouse-over. In order from left to right, they should be labeled “One-Line Text Box”, “Scrolling Text Box”, “Check Box”, Radio Button”, “Drop-Down Menu”, “Push Button”.
Try clicking on all 6 buttons to see the function they create. Now that you have a sense of what the button functions create, delete everything and start creating your personalized form. You might find it helpful to first draw your form out on paper to decrease the chances of irritation, if you have limited experience creating forms.
When you have your plot constructed, go ahead and create the table layout with all the text pre-typed in the appropriate cell(s). Now go to the HTML view (“View”, “HTML…”) and go to the table you just created. It should be quite obvious which table it is because it should have all the data you inputted. Just before the <TABLE> tag, insert the tag <FORM>. Now look for the point where your table ends and insert the tag </FORM> after the </TABLE> tag.
We are assuming that you don’t know how to implement CGI or PERL scripts at this point so we’ll have the form’s “action” attribute link to your e-mail address. Do this by inserting the ACTION=”mailto:youremailaddress” attribute inside your <FORM> tag. Also be sure to insert the METHOD=”POST” attribute in the same tag or your form won’t send. It might also be worth suggesting to name your forms in the case you receive multiple forms (use the NAME=”yourformname” attribute. Example: <FORM NAME=”Feedback” METHOD=”POST” ACTION=”mailto:info@pcmachines.com”>
At the end of your form, you’ll want to place a “Submit” button to allow the user to transfer applicable form data to your e-mail address. Simply do this by inserting the following code at the end of your form: <INPUT TYPE=”submit” NAME=”Submit” VALUE=”Submit”>.
Also worth mentioning is the fact that you’ll want to name your form fields so that form data may easily be identified at the time you review a specific user’s input. In every form field, insert the name=”anyspecification” attribute. Example: <INPUT TYPE=”checkbox” NAME=”yes”> would identify the user’s choice for a field as “yes”. Place the “VALUE” attribute if you want a field already pre-typed. This is helpful for fields such as “country” where it is typically more likely to find that user is from the United States so you would place VALUE=”United States” for that tag. And if someone’s from Canada (or any other country) they can just simply erase what’s in the form field and type in their own country.
Unfortunately, special characters will be encrypted with this process but is normal. For this reason, many advanced programmers choose to program complex CGI or PERL scripts that allow the form data to send directly and unencrypted to a specified e-mail address where it can be easily interpreted when viewed. This book assumes you’re not an advanced CGI or PERL programmer so we’re just letting you in on the basic approach for having form data sent to your e-mail address.
Hyperlinks can either be in the form of a graphical hyperlink or regular hypertext (linked text). They can link to virtually anything in computer format you can think of. Most often, however, you will find they are commonly used to link Web pages, Web sites, photographs, and downloadable programs on the World Wide Web. Hyperlinks leading to downloadable programs typically begin with the “ftp” protocol rather (especially on corporate Web sties) than the “http” version since downloading via FTP (File Transfer Protocol) is typically faster versus the conventional “http” method. In other cases, you’ll see the “http” protocol but see the filename extension ending with “.zip” which means the file is saved as a the ZIP archive file format. Many Net users use a version of WinZip, which both compresses and decompresses (extracts) the data within the archive. This file format is normally used for one of two purposes: 1) It saves time downloading because the file(s) is(are) compressed and 2) It immediately begins the file download process on many common browsers rather than calling up a security precaution window. In other words, the browsers recognize the file format as a downloadable archive and immediately begins the file download process. You can download the latest version of WinZip at http://www.winzip.com.
To create a hyperlink with FrontPage Express, simply click on the icon depicting a small globe with a chain link. This icon can be found to the right of the “Insert Image” icon. Again, if you’re not sure if you have the right icon, do a mouse-over. You should read “Create or Edit Hyperlink” when you do a mouse-over for this icon. When you click on the button, you should see something similar to the following depiction:
Enter the URL (World Wide Web address) of your link in the appropriate area. By default, FPE inserts the link as the text you inputted for the link. So if you want another title for the link, go to the HTML view (located in “View”, “HTML…”) and scroll down until you see the repetitive link. For example, if you typed “http://www.pcmachines.com” into the URL area of the “Create or Edit Hyperlink” dialog box, you would see something similar to <A href=”http://www.pcmachines.com”>http://www.pcmachines.com</A>. Simply replace the repetitive URL with your own text. Some people like to insert the format “Click here to go to x” (where “x” is the destination).
If you want to create a new Web page link and create a new document, click on the “New Page” tab and insert the page title and URL in the appropriate fields.
Side Note: If you don’t like the appearance of underlined hyperlinks, you’re in luck. Go back to the HTML view and type the following inside the <HEAD> tags:
<STYLE>a {text decoration: none}</STYLE>
This is actually a small style sheet, formatting every hyperlink on your Web page. As you can see, the script calls for the removal of the “text decoration.”
You may also find the following helpful:
To make a message appear in the status box when a user moves their cursor over a hyperlink, type the following in the body area:
<A href=”pagename.htm” onMouseOver=”window.status=’Title’; return true;”>type description here</A>
To set-up an e-mail address, simply type
<A href=”mailto:someone@somewhere.com”>type the link here</A>
If you want to insert a pre-set subject line when the user’s browser e-mail dialog box appears, insert the attribute “?Subject=Your Subject” inside the <A> tag.
Example: <A href=”webmaster@pcmachines.com?Subject=Hello There”>Send me an e-mail message!</A>