Customizing the Contact Form

Easy Web Design project, Chapter 11

At this point, your Notebooks site is almost complete, but you might have noticed that the walkthrough has been neglecting the Contact page for the most part. You don’t have much to do on this page because FrontPage has already done a nice job of creating a contact form for you. All you need to do is to customize the form elements here and there as described in the following steps:

1.    Display contact.htm in FrontPage.

2.    Click anywhere in the table in the main area of the page, and double-click <table> on the tag selector bar to open the Table Properties dialog box.

3.    To format the table, select Center in the Alignment box, change the Specify Width setting to 90 percent, click the Color box in the Background section, click the tan RGB(E4,E4,CA) color in the Document Colors section, and then click OK.

4.    To reformat the left side of the form area, click in the first table cell, click <td> on the tag selector bar, click Borders and Shading on the Format menu, click Default in the Setting area to remove the right-border line, and click OK, right-click in the same cell, click Cell Properties, type 25 pixels in the Specify Width box, and then click OK.

5.    To change the page heading, select the Tell me what you think… text, click Heading 1 in the Style list, hold down SHIFT and press ENTER, and then type Contact Us.

6.    To change the checkbox text, select the Please contact me... text, type Sign me up for the Notebooks newsletter!, select the word Notebooks, and then click Italic on the Formatting toolbar.

7.    To configure the form to send submitted information to you, right-click in the form area, select Form Properties, delete the information in the File Name box, type your e-mail address in the E-mail Address box, click OK, and then click No in the alert box.

8.    To add and format an image to the page, click after the What kind of comment… text, insert p_nb06.jpg, double-click the image, click Right, type 25 in the Horizontal Spacing box, and then click OK.

9.    To add and format a second image, click after the Tell me how to get… text, insert p_nb03.jpg, double-click the image, click Right, type 25 in the Horizontal Spacing box, and click OK

10.  Save your work. Your form should look similar to the form shown in the figure.

Customizing the default form