Most websites provide a means for visitors to contact the webmaster or owner of the website. While a few webmasters do this by publishing their email address, more commonly, others provide a feedback form, or contact form, so that visitors can write to the webmaster without leaving the site. In this final chapter of the Dreamweaver CS4 tutorial series, you will be adding such a form to your website.
For those arriving at this chapter without reading any of the previous chapters, you can find the first chapter in How to Create a Website with Dreamweaver CS4. This chapter assumes that you have completed all the previous chapters, and makes references to things (like templates) that have been covered in those chapters.
On the other hand, if you arrived here looking for a feedback form script and not a Dreamweaver tutorial at all, please go to the Free Feedback Form Wizard to create your feedback form script instead.
By the end of this chapter, you will have accomplished the following:
You will have a working feedback form on your site.
You will have completed your website and have a fully functional multi-page website.
You will have learnt ("have learned" in American English) most of the commonly-needed skills needed to create a website using Dreamweaver CS4 and have the knowledge and ability to create other websites if you wish.
In the previous chapters, you created web pages that essentially displayed some combination of text and pictures, albeit designed in a nice way with fancy navigation menu bar buttons that reacted to you when you moved your mouse over them. Such pages were complete in themselves in that once you finished creating them in Dreamweaver and published them, they immediately worked.
Web pages that have forms are a different story. While you may be able to design a form in Dreamweaver, the form in itself will do nothing. Your visitor, encountering such a form, can click the "Submit" button till they are blue, and nothing will happen. This is because web pages are essentially just documents that live on the web. They can't send email, save data, or do anything except display information.
The job of doing things like sending email is left to a computer program which must run on the same computer that your website is on. That is, the program must run on your web host's computer, which is known as a web server, since it serves web pages to your visitors. Such programs running on web servers are commonly called "scripts" in webmaster jargon.
The process of sending email via a web form works this way:
Your visitors complete a form on your website. This form is known as your feedback form (or contact form). They then click the "Send" button on the form, in their browser.
The web browser sends the information to a script (program) residing on your website's server.
The script takes the information, formats it in a way that is appropriate for an email message, and sends it by email to your mail box.
The script then displays an acknowledgement page, or "thank you" page, so that your visitors know that their message has been successfully sent.
If there are errors in the message (for example, your visitors forgot to enter their email address), instead of displaying the "thank you" page, the script may display an "error" page so that the visitors will know that the message has not been sent. They can then fix the error and try again, if they wish.
In other words, adding a feedback form to your website is not simply a matter of designing a web page with a form. You will need the following things before the form will work:
You need a web page containing the feedback form itself. You will design most of this page using Dreamweaver.
Another thing you will need is a "thank you" web page. This is also a simple web page which can be designed using Dreamweaver.
And then you will need an "error" web page. Again, this can be easily created with Dreamweaver.
The engine behind your feedback form is the feedback form script, the computer program that knows what to do when a web browser sends it the information submitted by your visitor. You will be using thesitewizard.com's Feedback Form Wizard to create a customized program for your site. Don't worry, it's free.
Finally, you will need a web host that will allow you to run PHP scripts (which are a type of computer program) that send email. Not all web hosts allow this, especially free web hosts. When I say free web hosts, I include the free hosting that comes with your broadband or dial-up account as well as that which you may get when you register a domain name with some registrars (sometimes called a "starter web page" or the like). Even if the free web host says you can run PHP scripts, they often don't allow the scripts to send email.
In view of this, you will probably find that you need a commercial web host before you can successfully use a feedback form script. If you're looking for one, see the Budget Web Hosts page for a list of such hosts or visit my review of the host that I'm currently using for thesitewizard.com.
If you have skipped the above section, because you thought it was unnecessary, please go back and read it, especially the part about getting a web host that allows you to run scripts. Without such a web host, your feedback form will not work.
Go to the Free Feedback Form Wizard to generate a customized 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 and click "Go to Step 2".
In Step 2, enter the information required by the form:
You should, of course, replace the "www.example.com" with your actual domain name. However, do not change the file name portions, especially "feedback.html" since you have used this filename in your navigation menu bar and site map in the previous chapters. If you change the filename now, all your old links will break.
Read the licence agreement. If you agree to the terms, indicate it in the form and click the "Generate script" button to continue.
A new page will load. Do NOT close this page. Leave it open while you work through the next few steps. We'll be extracting the code generated on this page section by section in the paragraphs that follow.
Start up Dreamweaver. Select "File | New..." from the menu.
Click "Blank Page" (yes, "Blank Page" and not your template) in the leftmost column.
In the "Page Type" column, click "PHP". Click the "Create" button.
A blank page should appear. Unfortunately, this page is not really blank, and we have to delete the rubbish that Dreamweaver inserted when it created the page.
VERY IMPORTANT: click "View | Code" from the menu. You should now see the miscellaneous HTML code that Dreamweaver inserted into your php page. Select everything on the page. You can do this by using your mouse to drag over everything, or, more simply, hitting Ctrl+A, that is, holding down the Ctrl key and type "a". Then hit the DEL key. (Note: Mac users may need to use Command+A rather than Ctrl+A.)
Your window should now be blank.
Switch back to your web browser (without quitting Dreamweaver) and look for the section entitled "Feedback Form Script". It should be the first section in the results page. Notice that there is a box under that section. That box contains the feedback form script (program).
Select everything in that box. For Windows users, one way to do this is to click your mouse somewhere in that box to put your cursor inside it. Then hit Ctrl+A (hold down the Ctrl key and type "a").
Copy the selected text to the clipboard. The easy way is to type Ctrl+C (hold down the Ctrl key and type "c") in Windows. Alternatively, you can click the right mouse button and select "Copy" from the menu that appears.
Switch back to Dreamweaver. Again, do NOT close your web browser. We're not done with it.
Select "Edit | Paste" from the menu. The entire script generated by the Feedback Form Wizard should appear in your
Dreamweaver window. The last line should show "?>" in red. There should be lines above in blue, red and black.
If your screen is very large, you may also see lines in orange (or maybe it's yellow).
If you do not see this multicoloured text, close the Dreamweaver window without saving anything, and restart this entire step (the "Saving the Script" step).
Do NOT add, subtract or change anything in the window. Leave everything exactly as it is. There is nothing you should be customizing in this screen. This is a computer program that you're looking at, not a web page. It is not displayed to your visitors. If you modify anything at all, the program will fail to work correctly.
Click "File | Save As..." from the menu. Type "feedback.php" (without the quotes) into the "File name" box. Do not use any other name. Do not add spaces to the name. Do not use capital (uppercase) letters. The name must be exactly as I said. Click the "Save" button.
Select "View | Design" from the menu. You should see a blank page. Do NOT type anything here. You're still in the program. Click "File | Close" from the menu to close the window.
The feedback form page is just an ordinary web page with a form for your visitors to complete. As such, you should create it the normal way you create new pages on your website.
Select "File | New..." from the menu. Since you have already created a template for your site in the previous chapter, select "Page from Template" in the first column. Make sure that the preview window shows the template that you've been using and that the "Update page when template changes" checkbox has a tick in it. Click the "Create" button.
You should be back in familiar territory. Change the "Title" field above your web page to "Feedback Form" (or "Contact Form" or "Contact Us" or whatever you prefer). Use the same text for the "Page Title" editable region.
Select everything in the "Page Content" section and delete it. You will be replacing it with the form code.
Switch back to your web browser, and locate the section entitled "HTML Code". Notice that there is a box in that section as well. Select everything in that box and copy it to the clipboard as before. (See above section if you've forgotten how to do this.)
Switch to Dreamweaver. Make sure that your text cursor is in your "Page Content" editable region. Specifically, it should be at the position where you want to insert the form code.
Click "View | Code" from the menu. Dreamweaver will now display the underlying HTML code of your web page.
Look for your blinking text cursor on the page. It should be sandwiched between characters in a line that says
"<p> </p>". In particular, it should be just after the "<p>"
tag and before " </p>".
Use the arrow keys on your keyboard and move the cursor to the end of the line, that is, to immediately after
"<p> </p>" on the same line.
Click "Edit | Paste" from the menu to paste the code you copied from the browser earlier.
Click "View | Design" from the menu to switch back to the "Design" mode that you normally use. You should now be able to see the form.
The visual appearance of the feedback form can be customized. You already know how to do things like change the colour of the text from previous chapters, so I shall merely describe how you can change the size of the various fields in the form.
Before you start changing the sizes of the various fields, you should probably know that the visible sizes of the fields do not control how much information your visitor can enter into them. That is, even if you give a very narrow box for your (say) "Name" field, your visitors can still enter extremely long names into them. The web browser will simply scroll to allow the visitor to continue entering information.
Having said that, it's still useful to be able to change the sizes of the fields so that the form fits better into your website's decor.
To increase the width of the "Name" field, click somewhere in the box next to "Name". Dreamweaver will display the box with a dotted outline to show that it has been selected. In the PROPERTIES panel at the bottom of the Dreamweaver window, change the "Char width" field to some other number than the default "39". For example, if you want the field to be wider, try entering "50" (without the quotation marks) followed by the ENTER key, and see if the result is acceptable to you in the window above. If not, just change the number until the field has a width that is suitable.
The same method applies to the "Email" field.
You can also change the text appearing in the web page next to the fields. That is, if you prefer something other than "Name:", "Email address:" and "Comments" being displayed on your web page, feel free to change them. (For example, you may want to translate it to the same language as the rest of your site, if your site is not in English.)
You should not modify anything in the PROPERTIES panel other than the "Char width" field and the "Class" field, which is basically the same as the "Class" field you met in chapter 3's How to Change Font Typefaces, Weight, Style, Colour and Sizes in Dreamweaver CS4.
While you may freely modify things that affect the appearance of your web page (such as the "Char width" and "Class" fields), the other values appearing in the PROPERTIES panel may be used by the feedback form script to obtain the information it needs to send you the email. Modifying them may break the functionality of your form.
In particular, do not change the words "fullname", "email" and "comments" appearing in the PROPERTIES panel, not even to translate them. Those are internal information used by the script and will not be displayed to your visitors, so there's no need to touch them.
The form is actually designed to work out-of-the-box, so if you can't think of anything to change, don't feel obliged to do so. These sections are meant for the compulsive customizers.
The width and height of the "Comments" box can also be changed. To do this, click the box.
In the PROPERTIES panel, the "Char width" field affects the width of the comments field while the "Num lines" field controls the height. Feel free to change these two numbers so that the box has the dimensions you want.
Again, as mentioned earlier, the size of the field does not affect the length of the message that your visitor can send you. It's just a visual effect. The web browser will scroll the box if your visitor has a long story to tell and your box is too small, so you don't have to worry about creating a huge enough box for those people.
Caution: do not change anything else in the PROPERTIES panel, other than the "Char width", "Num lines" and "Class" fields.
The text appearing on the "Send Feedback" button can also be changed. This is especially important if your page is not in English and you want the button to display information in the correct language.
To modify the text, click the button. Change the text in the "Value" field in the PROPERTIES panel. Once again, you should not change anything else in that panel, other than the "Value" and "Class" fields.
When you're through with your customizations, click "File | Save As" from the menu, type "feedback.html" (without the quotes) into the "File name" field and click the "Save" button.
Close the file with "File | Close".
As mentioned earlier, you will need to create 2 additional pages. These are straightforward web pages that you should have no trouble creating, since you've already created so many in these last couple of chapters.
The first page that you need to design is the "Thank You" page. This page is displayed when the feedback form script successfully sends the message typed by your visitor. The main purpose of the page is to confirm that the message has been transmitted. Most websites take this opportunity to thank the visitor for sending his/her comments as well.
There are no rules about what you should say here. Say whatever you like. If you're at a loss for words, here's one possibility that you can use for your web page:
Your message has been sent to the webmaster. Thank you for your comments.
If you are running a business, you may want to give a more customer-friendly message:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
After you create your "Thank You" page, save it with the filename "thankyou.html". This is the name you gave the Feedback Form Wizard earlier, so you should not change the name now or your visitor will get a "404 File Not Found" error instead of the "Thank You" page when they submit your form.
The second page that you need to design is the "Error" page. This page is displayed when your visitors fail to provide their name or email address when submitting the form. Since this information is needed by the script to create a properly-formed email message, the script (by default) displays the Error page if the information is missing.
Again, there are no rules about what to say on this page. For those who are really stuck, here's one possibility:
Please enter your name and email address before submitting the form. Click the "Back" button in your browser to return to the form to fix the error.
When you've completed your Error page, save it with the filename "error.html". Again, do not use some other name, since this is the name that you gave the Feedback Form Wizard earlier. The exact name was embedded in the script created, so you should not change it if you want the script to work correctly.
Publish your pages with "Site | Synchronize Sitewide..." as you did in the previous chapter. This time, Dreamweaver should show you 4 pages to be uploaded (or five, if you count your template file, which you should of course set to "Ignore" as before), namely, "error.html", "feedback.html", "feedback.php" and "thankyou.html".
You should now test to see if your feedback form works. Connect to your site with a browser, click the link to your feedback form and check the following situations:
To test the Error page, don't enter the email address on your form. The error page should show. If the "Thank You" page appears instead, it's probably because you used one of the "Advanced Options" in the Wizard to disable the email address checking. If you did that (not a good idea, in my opinion), then of course the Error page will not show.
To test the proper sending of email, just use the form to send yourself a message. Make sure you fill in all the fields. After you click the "Send Feedback" button, you should see your "Thank You" page. Check your email to make sure that you've received the message you sent.
If you run into problems when you test the script or if you do not receive the message you sent, please see the Frequently Asked Questions (FAQ) about the Feedback Form Wizard page for the solution. The FAQ contains a huge list of answers from my many years of helping newcomers set up their own feedback form. You should also reread this chapter to make sure you didn't miss anything crucial.
Congratulations! You now have a fully functional website, complete with a home page, a site map, an "About Us" page and even a working contact form. More importantly, you now have the knowledge and ability to use Dreamweaver CS4 to 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 website creation process. Even though you have already finished your site, you should still read the section on "Designing Your Web Pages" for the links to other web design articles. Those articles deal with other principles of good web design not covered in this tutorial series.
Copyright © 2009-2017 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 »
The Beginner's A-Z Guide to Starting/Creating Your Own Website » List of All Dreamweaver Tutorials »
Other articles on: Feedback Form
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 with Dreamweaver CS4
