Using FrontPage to design an Order Form: Step-by-step

by the BigBiz Internet Services Webmasters

If you like to test the form, use this one instead: https://secure.bigbiz.com/motelworld.com/acme/order_test.html, this version lets you enter your own email address so you can see the email it sends.

1. Create a new form, click on "New Page" in the explorer.
   
   
2. We will rename the page to "Order Form", click on the new icon in the navigation area of explorer to select it, the wait a second and click it again in the text area where the title is, then type over the title with "Order Form".
   
3. We will also rename the file name. Click on the filename in the "Contents of" frame in explorer, and type over the name as "orderform.html" to rename it.
   
   
   
4. Then open the page in the Editor by double clicking on its icon in the navigation area of explorer. The FrontPage editor will open and display the newly created blank page.
5. In the editor create the form on the page, use the form toolbar and click on the one line text box. Frontpage will create a new form complete with submit and reset buttons.
   
6. We will delete the text input - we dont need it (we only created it to get a new form). Click on the text box and use Edit/Cut.
   
7. We will type in the heading "ACME Hardware Shop Order Form", make it bold and center it. Click on the Bold icon, type "ACME Hardware Shop Order Form[Enter]",
   
   go back and place cursor on that line, and click on the centering icon.
   
8. Now we will create the line item table of the order form, it is a table of 4 columns and 5 rows. Place cursor to the left of the Submit Button, thats the point we will insert the table. Then use the Insert Table icon.
   
   Holding down the left mouse button on Insert Table, drag across the cells until 4 cols and 5 rows are highlighted, then release to create new table.
   
9. The first row is a heading row, so select the row.
   
   Then use menu Tables/Cell Properties.. to bringup Cell Properties dialog box. In the dialog box select "Header Cell", then OK.
   
10. Type in the headings, click in each heading cell and type in "Quantity", "Catalog Number", "Description", "Price Each".
    
11. For the Quantity column, we want input fields. Click in each cell and click on the text input icon for each.
    
12. The rest of the table is just plain text, fill in the cells with the appropriate catalog numbers, descriptions and prices.
    
13. Adjust the column widths as appropriate by dragging on the column borders.
14. Now we will put in the properties for the Quantity input fields. They need to be named QTY1 thru QTY4, initial value is 0, and we will also use the FrontPage input validation rules
    • Input Field is numeric integer
    • Input must be >= 0.
    We describe changing the properties for one cell, just repeat the same thing for all 4 cells.
    1. Rename the input variable QTY1, with initial value 0.
       Double click the input field for the first line item; the Text Box Properties dialog box appears, type in QTY1 for Name, and 0 for Initial value.
       
       Then click on Validate...
    2. Vaidation dialog box opens, select Integer, no grouping, Field must be greater than or equal to, 0. Then OK.
       
    3. OK again on the text box properties dialog box.
    Repeat for the other 3 input fields, naming QTY2, QTY3, QTY4.
15. Now we input the rest of the line item hidden fields, PRICE*, ITEM*, CATN*. Double click on Submit button to bring up "Push Button Properties" dialog box. Then click on "Form...",
    
    then click on "Advanced..."
    
    to display the hidden fields dialog box.
    
    
16. Use Add button to add all of the line items values as follows

    name	value
    CATN1	06-1130
    CATN2	09-8756
    CATN3	13-8722
    CATN4	06-2220
    ITEM1	3 lb Ball Peen Hammer
    ITEM2	12 inch Hacksaw, w. Starter Blade
    ITEM3	4 Piece Philips Scredriver Kit
    ITEM4	3/8 inch crescent wrench
    PRICE1	12.50
    PRICE2	24.95
    PRICE3	4.33
    PRICE4	9.99

    
    Click OK, OK, OK when done.
17. Continuing on, we will add the 3 radio buttons for Sales Tax
    Place cursor before the Submit button (insertion point) and click the radio button icon 3 times. Then hit [Enter] to give it its own line.
    
    Then hit [Enter] to give it its own line.
    
18. Place text cursor before 1st radio button and enter "Sales Tax:"; repeat placement for labels "CA Resident (8.25%)", "AZ resident (6%)", and "Other (no sales tax)". Enter additional spaces as needed to space the line out.
    
19. We want to name the radio group F_taxrate, and enter their values 8.25, 6, and 0. We also want the last one (Other) to be on by default.
    Double click 1st radio button, "Radio Button Properties" box appears. Change the Group Name to F_taxrate, and Value to 8.25. Click on Not Selected, then OK.
    
20. Double click 2nd radio button, enter F_taxrate, value 6, OK.
    
21. Double click last radio button, enter F_taxrate, value 0, Click on Selected, OK.
    
22. Repeat the previous procedure for the set of 3 shipping buttons. The group name is "Shipping", and their values are 10, 15, and 30. Make sure the first one is "Selected" and the others are "Not selected".
    
23. We will enter the Credit Card Number textfield next.
    Type [Enter] at end of Shipping line to open a new line, and type "Credit Card Number" and click on the oneline textbox icon.
    
    Double click the text box and change name to credit_card_number
    
24. We will enter the expiration date selection inputs.
    Type "Expires", click on Drop Down Menu. Then type "/", and click on Drop Down Menu again.
    
25. We will fill in the info for the month drop down menu,
    Double click the first drop down menu, dialog box appears, name it exp1. Then click Add and add each month 01 thru 12. On the Add Choice dialog box only set Selected on the first one (01). Click OK when done.
    
26. Repeat for the year drop down menu, enter values 98 thru 04, name is exp2.
    
27. Next we create the "Ship To" address table. On a new line type "Ship To[Enter]", then use the table icon and drag out a new 4x2 table.
    
28. Enter the labels on the first column: "Name","Address","City, State Zip", and "Phone". Place cursor inside cell and type.
    
29. Put the 4 input textboxes in the second column. Place cursor inside each cell and click on the "one line text box" button.
    
30. Change the names of the textboxes to "name", "address1", "address2", and "phone" respectively. Double click each textbox and change the Name in the text field properties dialog box.
    
31. Drag the table column borders to change the size as necessary.
32. Right align the text in column1. Click on the top of the column to select the entire column, then click on the Right Justify text icon.
    
33. Now change the form action to post to our secure URL. In our example we are going to publish the order form to motelworld.com (just a site we happen to have available to test with), which is on web02, then the secure script is at "https://secure.bigbiz.com/cgi-bin/forms.cgi". Double click on the Submit button, click on "Form...", select "send to other", make sure "...CGI..." is selected. Then click on "Options..."
    
    Options for Custom Form Handler window appears, enter the secure URL for Action, leave method as POST, and hit OK.
    
34. Now we add all those hidden fields. For our example we will make the email come from "acme_orderform@motelworld.com" and send the order to "acme_sales@motelworld.com". We will be encrypting the credit card number, and we will use the key "nNxgFpguL0A" which corresponds to the decryption phrase "Mary had a little lamb.". Here are all rest of the hidden fields and their values:

    name	value
    F_to	acme_sales@motelworld.com (ACME Sales Dept.)
    F_from	acme_orderform@motelworld.com (ACME Web Order Form)
    F_subject	ACME Hardware Store Order
    F_totalsum	F_subtotal,F_tax,Shipping
    F_orderline	QTY*,CATN*,PRICE*,F_linetotal,ITEM*
    F_fields	F_date,F_ip_address,F_host,'Phone:'+phone,,'Ship to:',name,address1,address2,,F_orderline*,'Subtotal'+F_subtotal,'Tax'+F_tax,'Shipping'+Shipping,'Order Total'+F_total,,credit_card_number_encrypted+'Expires'+exp1+'/'+exp2
    F_key	nNxgFpguL0A
    F_cc_validate	credit_card_number
    thanks	Thank you for your order, you will receive phone confirmation from our shipping department shortly.
    F_display	Order Received
    F_display_fields	'We received the following order on'+F_date,,'Ship to:',name,address1,address2,,'<listing>'+F_orderline*+'</listing>',,'Subtotal'+F_subtotal,'Tax'+F_tax,'Shipping'+Shipping,'Order Total'+F_total,'Phone Number'+phone,,thanks
    F_required	name,address1,address2,phone,credit_card_number

    Double click on Submit button to bring up "Push Button Properties" dialog box. Then click on "Form...",
    
    then click on "Advanced..."
    
    to display the hidden fields dialog box.
    
    You may notice that the other hidden fields you entered earlier are still there, we will just add these new ones. Use Add button to add all of new hidden fields.
35. Congratulations, your order form is designed and is ready for publishing.
    

Publishing and Linking your Secure Order Form

1. Open the Home Page in your FrontPage editor. Type "Go to our secure order form."
   
2. Add the link. Select the text to be linked.
   
3. Click on the "add or edit hyperlink" icon.
   
4. Enter the secure URL for the orderform into the URL field, "https://secure.bigbiz.com/motelworld.com/acme/orderform.html".
   
5. Thats it - you can publish the web now.

You are welcome to check out our site, point your browsers to http://www.motelworld.com/acme. Notice when you go to the secure form that your browser goes into secure mode.