FrontPage Forums
FrontPage How-To Articles
Website Design Articles
Software & Book Store
Newsletter <- Sign up here!
Website Links
About WebWorkshop.org
FrontPage How-To Articles
   
Forms Tutorial #1: An E-mail Form
Although there are instructions on how to use forms included with the FrontPage 2000 manual, it still seems to be an area of confusion for many people, so here's a tutorial and some tips on how to set up a simple form and have the results e-mailed to you.

Before you attempt this tutorial, make sure you've read through the tutorial in the FrontPage 2000 manual, and you're familiar with the basic concepts of FrontPage.

First, you should open the FrontPage web you want the form in. For the purposes of this tutorial, you might want to create a new, blank Web page. Save the page as "test.htm". Remember, you must have the FrontPage server extensions installed for the form to work (although you can create the page on your hard disk, and later publish it to the server that has the FrontPage server extensions; consult the FrontPage 2000 manual for more information on publishing Web pages).

The E-mail Form
Judging by the number of questions I receive, most people seem interested in having form results e-mailed to them. Here's a quick tutorial on how to do that. We'll set up a simple feedback form, asking for the user's name, e-mail address, and a comment. Tip: If you make a mistake during this tutorial, you can always hit Ctrl-Z to quickly undo your last action; hit Ctrl-Z multiple times to undo multiple actions.

  • First, locate the area of the page where you want the form to appear, and click the mouse to move the insertion point there.
  • Choose Insert > Form > One-Line Text Box. This will automatically create the basic elements of a form, including the text box, Submit and Reset buttons, and the "behind-the-scenes" HTML code. Notice the dotted line that borders the form. This indicates the "boundaries" of the form. Any elements you wish to add to the form must be inside this boundary (the blinking insertion point must be inside the dotted line). If you try and insert a form element outside the boundary, FrontPage will create an entirely new form (which you probably don't want).
  • Right now, everything is on one line. To make the Submit and Reset buttons on their own lines, make sure the blinking insertion point is just to the left of the Submit button (if it's not, carefully move the mouse until it's just to the left of the Submit button, and click). Once the insertion point is in the correct spot, press Enter on your keyboard. (Tip: Positioning the insertion point can require great precision; it's usually easier if you use the arrow keys on your keyboard to move the insertion point around.)
  • So far, we have one text-input field. We want to indicate to the user to enter their name in the field. First, move the insertion point so it's just to the left of that field (use the arrow keys if you need to). Then type "Name: " (without the quotes, of course).
  • We want to make sure the input field is labeled "Name" in our form output. Double-click on the field; you'll get the Text Box Properties window. You'll see an input field for "Name:"; this is where you enter the "name" of the text box (the fact that we want this text box's name to actually be "Name" is coincidental). Right now, its value is probably "T1". Select the "T1" (it's probably already selected by default), then type "Name" to replace it. Click OK.
  • If you've been following along, your form should look like this:

  • Next, we'll add the field for the user to enter their e-mail address. First, position the blinking insertion point to the right of the text input field we use for name, and hit Enter on your keyboard.
  • To indicate to the user that the input field on this line will be for e-mail, type "E-mail: ".
  • Choose Insert > Form > One-Line Text Box.
  • Double-click on the text-input field you just created. Its name will probably be "T2" by default. Change the name to "Email". Click OK.
  • Now to add the field for comments. Position the insertion point to the right of the e-mail text input field we just created, and hit Enter.
  • Type "Comments:". Because the input field we will use for the comments will be multi-line, let's put it just underneath the word "Comments:". To do that, hold down the Shift key and hit Enter. This inserts a line break (the HTML code <br>).
  • Choose Insert > Form > Scrolling Text Box.
  • Double-click on the scrolling text box you just created. Its default name should be "S1". Change it to "Comments". Don't click OK just yet though...
  • Let's make this input field a little bigger. You'll see a field for "Width in characters", which should be 20 by default. Change this to 30. Change the "Number of lines" field from 2 to 4. Now click OK.
  • If you've followed along correctly, you should now have a form that looks like this:

Note: If you're doing the guest book tutorial, you should switch back to that page at this point. Click here to go to the guest book tutorial, or remain on this page to complete the e-mail-form tutorial.

  • The form is now complete; however, we need to specify how we want the form's output to be formatted. First, click with the right mouse button anywhere inside the dotted-line boundary, then choose "Form Properties..." from the pop-up menu.
  • The upper area of the Form Properties dialog box lets you specify where the output of the form should be sent. By default, the form is saved to a text file in the web. Because we want the form results e-mailed to us, let's change this. First select the text inside the "File name:" input field (it probably reads "_private/form_results.txt" by default). Clear the text by hitting Backspace or Delete on your keyboard.
  • Next move the insertion point to the "E-mail address:" field. Enter your e-mail address. Click OK.
  • Choose File > Save. Congratulations, your form is complete!

If the Form Doesn't Work
If you created the tutorial form on your hard disk using the Personal Web Server and then open the page in your Web browser, you'll probably see the message [FrontPage Save Results Component] on top of your form. This is because the FrontPage server extensions don't exist on the Personal Web Server (this also indicates that the form won't work). To make the form work, you should publish your website to a Web server that has the FrontPage server extensions installed. If you publish the page to your Web server, then open the published page in your Web browser and still get the [FrontPage Save Results Component] line, then the server extensions don't exist on the Web server and the form won't work. You'll need to contact your Web hosting company, and ask them about installing the FrontPage server extensions.

If the form appears to be working, but you're not getting the results in your e-mail inbox, check to make sure that you entered your e-mail address correctly in the Form Properties dialog box. Load the page with the form in the FrontPage editor, right click on the form, then choose "Form Properties...".

<Back to table of contents>

   
Notice: Although every effort has been made to ensure that the information here is correct, be advised that what works on one computer system may not work on another. Use the information you find here at your own risk! WebWorkshop.org and its affiliates are not responsible for any damage or loss due to use (or misuse) of information found here.
   
Copyright ©2001-2004 WebWorkshop.org, all rights reserved
No part of this document may be reproduced without permission from WebWorkshop.org
   
Web Hosting provided by
Intelligent Hosting