Bonus Tutorial: How to Collect Addresses From Your Web Site Visitors- Step 2 (cont) Below is my address collection page. Notice that I have included the elements from my newsletter to help my Web site visitors remember later that they did in fact sign up to receive the newsletter. The screen shot of my page shows the normal FrontPage view. I like to put everything I build into tables. I begin each page with a base or background table set to 620 pixels wide so that my page will not move around when it gets loaded into browsers with different screen resolutions. Then I use tables within the base table to control spacing and alignment of other page elements. If you have not yet adopted the table as your basic design element, I suggest you do. FrontPage makes using tables simple and easy and you will experience a degree of control you never thought possible. To build my address collection page quickly, I have concentrated on the visual elements and have not yet set the attributes of the form fields which I will do in the next step. When I got to the form section of the page, I inserted a 4x2 table using the table creation icon from the toolbar. In the left column I entered each field description. When I ran out of rows, I added more and continued until I had all the data field descriptions in the table. A simple way to add a row to a table is to click in the last cell and hit the tab key; presto! a new row is added. Before I added the form fields, I selected the entire form table and created an html form by choosing "Insert:Form:Form". Nothing seems to happen when you do this, but what FrontPage is doing is inserting the <form> and </form> html tags above and below the selected block, which in this case is the form table. Next, in the top right cell of the table, I inserted a form field by choosing "Insert:Form:Textbox". Once I had one text box, I just copied it over and over until I had a text box next to each data description. To copy a form field, "CTRL-Click" the form field you want to copy and drag it to the new location. A copy is then deposited where you drop it. For the country, I inserted a drop-down box and set its options by right-mouse-clicking and choosing "properties", then working in the dialog box that opened. I will name all the other fields and set each field's parameters in the next step. When I had all the fields in place, I inserted two buttons in the bottom row of the form table (I merged the cells of the last row so that it became one cell- spanning the whole table) then configured the first button to be a "submit" button with the label, "Send Information" and the second button to be a "reset" button with the label, "Erase Information." To make these changes, just right click and choose properties, then work in the dialog box that opens. When you build forms, there are a number of things to keep in mind. First, simple vertical forms tend to work best. You can try to conserve vertical space by putting more than one field on the same line, but the marginal benefits are just not worth the added effort. As you go about your own surfing, notice how the vertical form format has become increasingly standardized. It is simple and easy to follow, and has a clean elegant look. Notice also that certain data items have a natural order to them. Ask for name first, then pieces of the address in the normal order in which the address is usually written. Let me also point out that when you build the form, you are determining which elements of each customer file will be available to use as a basis for sorting. In the form above, for example, I will later be able to readily sort my customer records by last name, company name, city, state, zip or even phone number. If I had just used a single address line that included city, state and zip code all in the same field, later on it would be nearly impossible to sort my records by zip code.

Tutorial Home

Bonus Step Home  Next