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

by the BigBiz Internet Services Webmasters

We will show you how to design the secure order form used in ad descibed in forms.html We will show you step-by-step what to do in FrontPage98, and how to make it secure.

If you like to test the form, use this one instead:, 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 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
    ITEM13 lb Ball Peen Hammer
    ITEM212 inch Hacksaw, w. Starter Blade
    ITEM34 Piece Philips Scredriver Kit
    ITEM43/8 inch crescent wrench

    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 (just a site we happen to have available to test with), which is on web02, then the secure script is at "". 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 "" and send the order to "". 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:
    namevalue (ACME Sales Dept.) (ACME Web Order Form)
    F_subjectACME Hardware Store Order
    F_fieldsF_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
    thanksThank you for your order, you will receive phone confirmation from our shipping department shortly.
    F_displayOrder 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
    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

The secret to making your order form secure is by linking the secure URL on your other pages. For our example we have a home page for Acme Hardware Store. We are going to publish this web as The name of the order form is orderform.html. So we link the secure orderform URL We will give you a step-by-step example of adding the link.
  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, "".
  5. Thats it - you can publish the web now.
When publishing the web, publish as you normally do. Do not select the "Secure connection required (SSL)" option - That is reserved for special users that have their own secure server certificate (you probably dont).

You are welcome to check out our site, point your browsers to Notice when you go to the secure form that your browser goes into secure mode.