Dreamweaver MX ASP Tutorials Macromedia Dreamweaver MX

Create a Feedback Form - Step I

In this tutorial I will show you how to create a feedback form that will insert a record in the database. The information that is inserted will come from the form fields. I will be using a very simple technique for creating the form and the Insert Record behavior.

See the completed form here.

1. Open the index.asp page.

2. Click on the page, outside of any layers on the page, and then Insert > Layer and use the following settings in the Property Inspector.

Property Inspector

3. Click inside the conactLayer and then Insert > Image and select the contact_us.gif.

4. Click on the contact_us.gif and give it the name theContact in the Property Inspector.

5. Click on the contact_us.gif and then the (+) sign in the Behaviors Panel and Select Swap Image and use the following settings in the Swap Image window.

Swap Image

6. Make sure that the event for the Swap Image is (onMouseOver) and the event for the Swap Image Restore is (onMouseOut).

7. Click on the page, outside of any layers on the page, and then Insert > Layer and use the following settings in the Property Inspector.

Property Inspector

NOTE: Make sure that the contentLayer has a lower z-index that the catSubLayer so that the catSubLayer is "above" the contentLayer.

8. Save the index.asp page by clicking File > Save.

9. Then click File > Save As and rename it feedback.asp.

10. Then click File > Save As and rename it response.asp.

11. Then close all open pages and reopen the index.asp page.

12. Click on the contact_us.gif in the conactLayer and then click on the folder icon next to Link in the Property Inspector. Select the feedback.asp page.

13. Click on the New CSS Style New CSS Style icon in the CSS Styles Panel and use the following settings in the New CSS Style window. Click OK.

New CSS Style

14. Use the following settings in the CSS Style Definition window. Click OK.

CSS Style Definition

15. Click on the New CSS Style New CSS Style icon in the CSS Styles Panel and use the following settings in the New CSS Style window. Click OK.

New CSS Style

16. Use the following settings in the CSS Style Definition window. Click OK.

CSS Style Definition

17. Click on the New CSS Style New CSS Style icon in the CSS Styles Panel and use the following settings in the New CSS Style window. Click OK.

New CSS Style

18. Use the following settings in the CSS Style Definition window. Click OK.

CSS Style Definition

19. Click on the New CSS Style New CSS Style icon in the CSS Styles Panel and use the following settings in the New CSS Style window. Click OK.

New CSS Style

20. Use the following settings in the CSS Style Definition window. Click OK.

CSS Style Definition

21. Save the index.asp page by clicking File > Save.

22. Then click File > Save As and rename it feedback.asp.

23. Then click File > Save As and rename it response.asp.

24. Then close all open pages and reopen the feedback.asp page.

Click here to continue the tutorial.