In the previous chapter of this Dreamweaver CS3 tutorial, you used Dreamweaver CS3's template tool to create the rest of your website. The template tool, as we discovered, allows you to simplify not only the creation of the pages of your site, but also its maintenance.
In this final chapter, you will be adding a feedback form, or contact form, to the website that you have created. By the end of this chapter, you will have not only completed the entire tutorial, but you will also have a fully functional website with a working feedback form.
For those of you who have arrived at this page without reading any of the previous chapters, you can find the first chapter of this tutorial series in How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
On the other hand, if you arrived here looking for a feedback form script and not a Dreamweaver tutorial at all, you should go directly to the Feedback Form Wizard to create your feedback script.
Before you continue, please go to the Feedback Form Demo Site and try out the form there. The demo site uses the exact same feedback form engine that you'll be using on your website, and you'll have a clearer understanding of what I'm talking about here if you have at least tried it out once. Don't worry; email sent by the demo form will be automatically deleted, so you won't be spamming anyone by using it.
Having a working feedback form on your website involves more than simply designing a web page that has a form. By way of overview, here are some of the major elements that you will need. You do not need to understand every single detail at this point since I will take you item by item through the whole process later. However, it is useful to have the big picture in mind so that you don't get lost in the forest of details later.
The first thing you will need is a web page containing the feedback form. You will be designing most of this page using Dreamweaver. By itself, the form doesn't do anything at all: your visitors can click the "submit" button till they are blue and you will still not receive their message. The task of sending the form contents as an email message lies with what is known as the feedback form script.
The feedback form script is essentially a computer program that processes the contents of the form sent by your visitor's web browser. It takes the raw message and formats it as a regular email message and then sends it via email to the webmaster. This script has to run on the web host's server (ie, computer) itself. You will be using a script custom designed for you by thesitewizard.com's Feedback Form Wizard. However, you will have to find a web host that supports the running of such scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
Next, we have the "thank you" page. After the browser sends the message to the script, you will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will still need some sort of page that will inform your visitors that their message has been successfully sent. This page can be easily designed using Dreamweaver.
Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send") button before he/she has finished typing essential elements such as their email address, the feedback form script will direct them to a page telling them that they have missed out components required in a message. Like the "thank you" page, this is a straightforward web page that can be designed with Dreamweaver.
In other words, for your feedback form to work at all, you need five major things: the feedback form, the feedback form script (program), the thank you page, the error page, and a web host that allows you to run programs (scripts) on their computer.
Your feedback form will not work at all if you use a web host that does not allow you to run your own programs (scripts) on their computers. Basically, if you use the free web space provided by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be able to get your feedback form working. Note that there are even some commercial (paid) web hosting that do not allow you to run your own scripts.
If you are looking for a suitable web host, you need to find one that supports the running of PHP scripts with an installed PHP that is version 4.2 or above. Do not use free web hosts, even if they have PHP support, since many of them do not allow PHP scripts to send email.
You can find a list of commercial web hosts at https://www.thefreecountry.com/webhosting/budget1.shtml. If you are curious as to which web host I use, you can find the information in my review at https://www.thesitewizard.com/archive/webhosting.shtml
The next thing you will need to do is to visit thesitewizard.com's Free Feedback Form Wizard to generate a customised feedback form script. The wizard can be found at https://www.thesitewizard.com/wizards/feedbackform.shtml
Read through the Wizard's introductory page. Choose the option to create a PHP feedback form script. Although you can generate any of the other types of feedback form scripts, for the sake of simplicity, this tutorial will only focus on the installation and creation of a feedback form that uses the PHP feedback form script.
In the next page, enter the information requested by the form. Modify the URLs supplied below to contain your real domain. For example, if your domain is "suchandsuchaname.com", use that instead of the "example.com" given below.
Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click "Generate script" to continue.
Do not close the web page that appears. Leave it open while you work on the next few steps.
Start up Dreamweaver. Select "File | New" from the menu. That is, click the File menu, followed by the "New..." item on the menu that appears. Click "Blank Page" from the leftmost column. In the "Page Type" column, select the "PHP" item. Click "Create".
Click "View | Code" from the menu to switch to Code view. Note: this step is very important. If you omit it, your feedback form will not work. Select everything you see in the window with your mouse and hit the DEL key. You should now be left with a blank window.
Switch to your web browser, and locate the section that has the header "Feedback Form Script". Select everything in the box below. If you are using Windows, one easy way to select everything is to simply click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the text you have selected to the clipboard. To do this, use Ctrl+C in Windows, or use "Edit | Copy" from the browser's menu. If your browser does not have an "Edit" menu, try clicking the right mouse button in the box and selecting "Copy" from the menu.
Switch back to Dreamweaver, and select "Edit | Paste". The entire content of the script generated by the Feedback Form Wizard appears (in various colours). Do not attempt to beautify it, add or change anything. Do not even add a blank line. This is not the user-visible portion of your web page. We will come to that later.
Note: if you do not see the output displayed in a variety of colours, you have omitted the very important step mentioned above. Close the document without saving it and restart this section again.
Select "File | Save As" and type "feedback.php" into the "File name" box. Do not use any other name. Do not use capital letters. Select "View | Design". You should see a blank page. Do NOT type anything here. Click "File | Close" to close the file.
Select "File | New", choose "Page from Template" and click "Create". Modify the title field to "Contact Us". Modify the "Page Title" editable region to read "Contact Us" as well. Delete all the text in the "Page Description" editable region.
Now switch to the browser window that contains the generated code from thesitewizard.com's wizard. This time locate the section in the output generated by the wizard that reads "HTML Code". Click in the box below those words, select everything in the box and copy it to the clipboard.
Switch back to Dreamweaver. Make sure your cursor is in the "Page Description" editable region. Select "View | Code" from the menu. Dreamweaver will switch to the HTML code view. Your text cursor should be just after "<p>" and before " <p>". Using the arrow keys on your keyboard, move the cursor to the end of that line (that is, after the "<p> <p>". Then select "Edit | Paste". The text from thesitewizard's feedback form wizard should be inserted at that point.
Now use "View | Design" to switch back to the Design mode. You should now be able to see the feedback form in your web page.
To widen the input field of "Name", click somewhere in the box next to "Name". In the "Properties" pane at the bottom of the screen, change the default "Char width" of "39" to a value that better suits your page. For example, increase the number if you want the box to be wider and decrease it if you want it to be narrower. Repeat the process with the "Email address" field so that both the "Name" field and the "Email address" fields have the same width on the screen.
Similarly, you can change the width and height of the "Comments" box. Click the box under the word "Comments". In the "Properties" pane, change the "Char width" to a more appropriate number than "45" if you wish. To change the default height of the "Comments" box, look for the "Num lines" box in the "Properties" pane and change it to the height you want to have. You can experiment with the values until you are satisfied with the appearance of the boxes on your page.
Note that modifying the size of the various boxes in the form merely changes the appearance of the box on the screen. These sizes do not affect how much text your visitor can type into the field. Most browsers will simply scroll the text if the box is not wide or tall enough for what the visitor wants to type.
If you like, you can also change the text appearing on the button. By default, this text is "Send Feedback". To change it click on the button. In the "Properties" pane at the bottom of the Dreamweaver window, change the text in the "Value" box to some other text if you wish.
Click "File | Save As" and type "feedback.html" into the "File name" box. Note that you should not type any other name here, since the navigation menus you created for your site in chapter 4 link to this filename.
By now, you should have no trouble creating new pages from your template, having done so a few times already when creating the other pages of your site. Use the same method that you have been using in the past and create two new pages: the "Thank You" page and the "Error" page.
The "Thank You" page is displayed by the feedback form script after your visitor clicks the "Send Feedback" button. It typically thanks your visitor for sending his comments. The main purpose of such a page is to provide feedback to the visitor that his comments had been successfully submitted. You may write anything you wish for this page. If you don't know what to say, you may use the following text:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
The "Error" page is shown whenever the visitor submits the form without filling one of the fields. For example, if he fails to enter an email address when the form is submitted, the "Error" page will be displayed instead of the "Thank You" page. Your error page should inform the visitor that he needs to complete all the fields in the form, and that he is to click the browser's "Back" button to go back to the form to repair the error. If you don't know what to say, you may use the following text:
There were errors in the form that you submitted. Please complete all the requested information before submitting the form. Click the 'Back' button on your browser to return to the form to fix the error.
Save your "Thank You" page with a filename of "thankyou.html" (without the quotes) and your "Error" page with a name of "error.html" (without the quotes). These are the names you supplied earlier to the Feedback Form Wizard. The customized script that the wizard created has the names hardcoded into it. You should therefore not change the names at this point, or the script will not work properly.
Once you are satisfied with the changes you have made, upload all the new pages by using "Site | Synchronize Sitewide" from the menu. As before, click "Preview" and remember to choose "Ignore selection" for the template file.
When all your files have been published, you should test your feedback form to make sure that it works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked Questions) for the answer. You should also reread this chapter of the tutorial to see if you missed anything.
Congratulations! With this chapter, you have completed the basics of using Dreamweaver to design a website. You have also created a fully functional site, complete with main page, an "About Us" page, a "Site Map" and a working "Contact Us" form. More importantly, you now have the knowledge to use Dreamweaver to create, design and publish new websites as and when you wish.
If you're wondering where to go from here, check out the article How to Start / Create Your Own Website: The Beginner's A-Z Guide for an overview of the rest of the web design process. Although you have already designed your site, you should still read the section "Designing Your Web Pages" in that article since it also has links to tips on good web design not covered in this Dreamweaver tutorial.
Copyright © 2007-2024 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Feedback Form to Your Website in Dreamweaver CS3
