A feedback form, also called a contact form, allows your visitors to send you a message from a web-based form. The message will be delivered to you via ordinary email. In this final chapter of the Dreamweaver CS5 Tutorial, you will add a feedback form to your website, thereby completing it.
As with the other chapters of this Dreamweaver tutorial series, this article assumes that you have completed the earlier chapters, and thus makes references to concepts and techniques taught there. If you are not an experienced user of Dreamweaver CS5, you may want to begin with chapter 1. In fact, if you are new to web design, it's best to start at the real beginning, with the guide How to Make / Create Your Own Website.
By the end of this chapter, you will have added a feedback form to your website. In fact, you will also have completed your website, and have a fully functional multi-page website. In addition, you will have learnt most of the commonly-used skills needed to create and maintain a website using Dreamweaver CS5, and be able to create other websites any time you want.
You will find it much easier to understand this chapter if you have some experience using a feedback form as an ordinary user. As such, please go to Feedback Form Demo Site and use the form. Don't worry: the form on that site is just a demo, so you can test it to your heart's content without spamming anyone. The messages sent go into a black hole.
Even if you're a seasoned user of web forms, please go to that site and use the form there at least once. That way, I can refer to elements of that form in this tutorial without wondering whether you know what I'm talking about. The form you create in this chapter will be based on the exact same technology that the demo form uses. So please do it now before you proceed.
You will need the following. This list is not optional. You must have the following or your form will not work.
Your website needs to be hosted on a web host that lets you run scripts (computer programs) on their computer. Not only that, they must allow your scripts to send email.
Most (if not all) commercial web hosts, including the one I currently use, allow this.
If you're not paying for your web hosting, for example, if you're using a free web host, or you're using the free hosting that comes with your broadband connection, or you're using one of those "free starter websites" that some domain registrars give you when you buy a domain name, chances are that the things described in this chapter will NOT work for you. If you're not sure, ask your web host.
The feedback form script (computer program) requires a technology called PHP to be installed on your website's web server. See the article What is PHP? for a plain English explanation of what "PHP" means. You don't really need to read it if you're feeling lazy, but it'll help you understand things a bit better if you do.
For those using a paid web host that lets you run scripts, it's likely that you will already have PHP available for your site's use. The PHP needs to be at least version 4.2. (Before you ask, PHP 5 or any bigger number is fine too.)
As you will have noticed when you tried the demo feedback form, you will be creating the following components:
This is the form itself. You will create it using thesitewizard.com's Free Feedback Form Script Wizard, and, optionally, customise ("customize" in US English) its appearance in Dreamweaver.
The form, by itself, doesn't do anything. Your visitors can click the "Send Feedback" button till they are blue in the face, and nothing will be sent. The real job of sending the email is done by the next component.
The feedback form script is the computer program that takes whatever your visitors submit through the form and transforms it into an email message. It then passes the message on to the email system installed on your web host's computer. Your web host's email system then does the work of actually transmitting the message to your email account. (It's a bit more complicated than that, but that's the gist.)
Like the form, you will be using the Free Feedback Form Script Wizard to create a customised version of this script. Don't worry. It's all free.
After the script passes the message to your web host's email system, it will tell your visitor's browser to retrieve the "Thank You" page from your site. This is just a straightforward web page that tells your visitors that their message has been sent. You will be designing this page yourself in Dreamweaver.
The "Error" page will be shown to your visitors if they fail to enter some crucial information into your feedback form. Like the "Thank You" page, it is just an ordinary web page that you will design using Dreamweaver.
The first thing you will need to do is to go to the Feedback Form Wizard and generate your customised feedback form and script. The wizard can be found at http://www.thesitewizard.com/wizards/feedbackform.shtml
Read the introductory page of the wizard, choose the option to create a PHP feedback form script, and click the "Go to Step 2" button.
In Step 2, enter the information required by the form:
Email: Enter the email address at which you wish to receive the mail from your site's visitors.URL of Feedback Form: http://www.example.com/feedback.htmlURL of "Thank You" Page: http://www.example.com/thanks.htmlURL of "Error" Page: http://www.example.com/error.htmlYou should of course replace the www.example.com part with the real address of your website. However, do NOT change the filenames, especially that of feedback.html since you have used that name in your navigation menu in the previous chapters. If you change the name now, the button in your navigation menu (and any other links pointing to your contact form) will break. In addition, if you dislike the names I gave above so much that you plan on changing them, be sure to read the article How to Create Good Filenames for Your Web Pages so that you don't create problematic filenames that will cause trouble.
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, containing customised versions of the contact form and script, will appear. Do NOT close this page. Leave it open while you carry out the next few steps in Dreamweaver. We will need the code generated by the wizard for your site.
Start up Dreamweaver and click "File | New..." from the menu. If you will remember from the previous chapters, this means to click the "File" item from the menu bar, and then the "New..." item in the drop down menu that appears.
Click "Blank Page" in the leftmost column. Notice carefully that I said click "Blank Page" and not your template.
In the "Page Type" column, click the line that says "PHP".
Click the "Create" button.
A page that looks blank will appear. Unfortunately, this page is not actually blank, and we need to delete the invisible rubbish that Dreamweaver inserted when it created the page.
(Note: if you don't see a blank page, that is, a page that is completely white, but see your 2 column website design, it means you did not follow my instructions above. Close the page without saving it and go back to the beginning of this section. This time, make sure you click "Blank Page" as I mentioned.)
VERY IMPORTANT: click "View | Code" from the menu. You should now see the HTML code that Dreamweaver inserted into your PHP page. Select everything on that page. If you use Windows, an easy way to select everything is to use Ctrl+A, that is, hold down the Ctrl key and type "a". (I believe that Mac OS X uses Command+A instead of Ctrl+A.) Alternatively, you can also drag your mouse across everything to highlight it. If you use the mouse method, make sure that you've really selected everything. Then hit the DEL key.
Your window should now be blank.
Switch back to your web browser without quitting Dreamweaver.
The first section on the web page should have a heading "Feedback Form Script". Notice that there is a box in that section. This box contains your feedback form script.
Select everything in that box. The best way to do this is to click your mouse somewhere in the box to put your text cursor there. Then hit Ctrl+A (probably Command+A on the Mac) as you did earlier. This should highlight everything in the box, but not on the rest of the web page. (Note: for most people, simply clicking somewhere in the box should automatically cause all its contents to be selected. If this is the case for you, there's no need to use Ctrl+A to select everything, although doing so will do no harm.)
Copy the selected text to the clipboard. The easiest way to do this in Windows is to type Ctrl+C (hold down the Ctrl key, and type 'c'). Alternatively, you can click your right mouse button (while the mouse pointer is in the box) and select "Copy" from the menu that appears.
Switch back to Dreamweaver. Do NOT close your web browser. We're still not done with it yet.
Click "Edit | Paste" from the menu. The entire script generated by the Feedback Form Wizard should appear in your blank document. The last line in the window should be a red "?>". Above that line, you should see lines in various colours, namely red, blue, green, purple and, if your screen is big enough, some orange.
If you don't see the things I mentioned above, close this Dreamweaver window (using "File | Close") without saving anything. Then go back to the start of this section (click the link to find the exact place to go to) and redo everything.
WARNING: do NOT change anything in this window. Leave everything as it is. There is nothing that you should be customising here: in spite of the English words in some parts of the file, this is not a web page that you are looking at. It is a computer program. It is not displayed to your visitors. Modifying anything here may cause your feedback form to fail to work correctly. Let me say it again: do not add, subtract or modify anything. Do not even add blank lines.
Click "File | Save As...". When the "Save As" dialog box appears, type "feedback.php" (without the quotes) into the "File name" field. 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.
Click "View | Design" from the menu. You should see a blank page. Do NOT type anything here. You're still looking at the feedback form script, albeit in Design view. Click "File | Close" from the menu immediately to close the window before you accidentally add or change something here.
You will now create the web page containing your feedback form. This web page is just an ordinary web page, like the ones you've created in the earlier chapters of this Dreamweaver tutorial series.
Click "File | New..." from Dreamweaver's menu.
Click "Page from Template" in the left column and select the template that you designed in chapter 7. Since your feedback form is part of your website, it should probably have the same layout and design that you've given the rest of your site. Click the "Create" button.
You should now be back in familiar territory. As usual, remember to change the "Title" field above your web page to an appropriate title, for example, "Feedback Form", "Contact Us", "Contact Form" or "Support" (or whatever else you like). Add a visible heading of "Feedback Form" (or whatever) into the editable portion of your web page, and delete the placeholder content from your template's editable regions (if any).
Switch back to your web browser, and look for the section entitled "HTML Code" (scroll down the page to find it). As before, there should be a box in that section. Select everything in that box and copy it to the clipboard. If you've forgotten how to do it, go back to the above section to refresh your memory.
Switch back to Dreamweaver. Click to put your text cursor in the spot on your web page where you want the form fields to appear. Note that the cursor should be on a blank line. If you don't have a blank line, make one by hitting the ENTER key (or the RETURN key on the Mac).
Click "View | Code" from the menu.
Dreamweaver will display the underlying code for your web page. Your text cursor should be positioned somewhere in a line that says "
". In fact, to be specific, the cursor should be after the first "
" and before "
".
Use the arrow keys on your keyboard to move the text cursor to the end of the line, that is, to immediately after "
" on the same line.
Click "Edit | Paste" from the menu to paste the HTML code you copied to the clipboard from your browser earlier.
Click "View | Design" to return to Dreamweaver's Design mode. You should now be able to see the form.
This section deals with how you can customise the visual appearance of the feedback form. You do not have to customise anything if the form already looks fine to you. If you don't want to change anything, just skip to the next step. Otherwise, read on.
The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught in chapter 3 to change the fonts, text size and colours if you wish. I will not go through those steps again below. Instead, I will deal with the things you have not yet learnt in previous chapters, namely, with how to change the widths of the various fields in your form.
Before you begin, though, I should probably mention that the width and height of the various fields do not affect how much information your visitors can enter into your form. It's just a visual gimmick. Even if you create a very narrow field, your visitors can still enter very long names, email addresses or comments. The web browser will simply scroll to allow them to continue typing whatever they want to type.
Having said that, it's still useful to be able to change the sizes of the various fields so that the form fits better into the visual design of your web page.
To increase the width of the "Name" or "Email address" fields, click the field you wish to change to select it.
In the PROPERTIES panel at the bottom of the Dreamweaver window, change the number in the "Char width" field to any number of your choosing. The default width is "25". If this is too narrow, change it to a bigger number (eg, "30", without the quotes) and hit the ENTER key. If the results are still not to your liking, modify it again till you get the width you want.
To change either the width or height, or both, of the Comments field, click the box under "Comments" to select it.
Look at the PROPERTIES panel at the bottom of the Dreamweaver window. The "Char width" field, with its default of 45, controls the width of the box, while the "Num lines" field, with its default of 15, controls the height. Feel free to change those numbers to create a width and height that suits your site's design. Again, remember that you don't have to create a really big box just to allow your visitors to send you long messages. The web browser will scroll when necessary.
To change the text appearing on the "Send Feedback" button, click the button once to select it.
Change the words "Send Feedback" in the "Value" field in the PROPERTIES panel of Dreamweaver.
The feedback form and the feedback form script were created to work with each other. The script depends on certain things in the form being left at its original value, and if you change those things, the form may not work correctly. As such, let me mention the things that you can change in the form, and the things that you should not change.
The general rule of thumb is that only things that appear (that is, are visible) on your web page can be modified. That is, you can change the words "Name:" and "Email address:" that appear next to the Name and Email Address fields. You can change the word "Comments" that appear above your comments box. You can change the widths and heights of the various fields. You can change the text "Send Feedback" that appears on the button. You can also freely change the colours of the text and the background (as taught in the earlier chapters).
Apart from the above, do not change anything else. For example, do not change anything other than "Char width" and "Num lines" in the PROPERTIES panel for your 3 fields. Do not change anything other than the "Value" field for the "Send Feedback" button. I know the PROPERTIES panel provides other tantalising fields that may tempt the compulsive customisers among you to modify. Specifically, do not change the words "fullname", "email", "comments" in the "TextField" boxes in the PROPERTIES panel. The words in those "TextField" boxes are not displayed on your web page, so you don't have to worry about them. They are for internal use by the script.
When you've finished customising your form, click "File | Save As..." and type "feedback.html" (without the quotes) into the "File name" field of the "Save As" dialog box. As usual, do not use any other name, do not change the capitalisation (case) of the name and do not add spaces into the name. Use the name exactly as I gave it. This is important because you entered this filename to the Feedback Form Wizard earlier, and it embedded the name into the script. If you change it now, you may lose some of the functionality of the script.
Close the feedback form with "File | Close".
You will need to create 2 additional web pages for the feedback system to function properly. These are just ordinary web pages, so you should be able to create them yourself without help. After all, you've already created so many web pages in the last couple of chapters.
The first page to create is the "Thank You" page. This page is displayed to your visitors after the feedback form script successfully passes their message to your web host's email system. The main purpose of this page is to let your visitors know that their message has been sent. Most websites take this opportunity to also thank their visitors for their comments.
Create the page the way you did the other pages of your site (like your home page, site map, etc), based on your custom website template. Remember to replace the "Title" field with something meaningful like "Feedback Sent", "Message Sent Successfully", "Thank You" or some other phrase of your choosing.
In the main content section of your web page, say whatever you want to your visitors. For those who are not sure what to say, here's one possibility:
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, like:
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 complete the page, save it with a filename of "thanks.html" (without the quotes). This is the name you provided to the Feedback Form Wizard earlier, and the name is embedded in the feedback form script. If you use a different name, change the case or add spaces, your visitors will be greeted with an unfriendly 404 File Not Found error when they submit their message.
The other page that you will need to create is the "Error" page. This page is shown to your visitors when they fail to provide their email address, name or message. Since such information is needed for the script to create a properly-formed email message from the form submission, the script (by default) displays the "Error" page if any of those fields are empty.
Like the "Thank You" page, feel free to write whatever you want. One possibility is to say:
Please complete all the fields in the form before clicking the "Send Feedback" button. Click the "Back" button in your browser to return to the form to fix the error.
As before, remember to enter something meaningful in the "Title" field of the page. For example, you can use "Error" or "Missing Information" (without the quotes) as the title.
When you've finished with the page, save it with a filename of "error.html" (without the quotes). Again, don't change the name in any way, not even the capitalisation (case). The filename must be identical with what you furnished the Feedback Form Wizard earlier, or your visitors will get a File Not Found error instead.
Publish your site with "Site | Synchronize Sitewide..." as you did in chapter 7. Your form page, feedback form script, thank you and error pages should appear in Dreamweaver's list of files to be published.
To test your feedback form, connect to your site in a web browser. Make sure you test the following:
To check if you've named your error file correctly, and that the name matches what you gave the wizard, do not enter your email address in your first test of your form. In fact, don't bother to enter anything at all. Just click the "Send Feedback" button. You should get your error page. If not, and you get a File Not Found error when you submit the form, it probably means that there is a name mismatch: the name (or web address) you gave the wizard is not the same as the name (or web address) of the error file you actually created. Another possibility is that you failed to publish your error page or saved it to the wrong folder.
To check if you've named your "Thank You" page correctly and saved it in the right place, write a message to yourself using that form. Make sure you complete all the fields properly. If you get a 404 or File Not Found error when you submit the form, it again means there is a name or web address mismatch somewhere. Either you've saved your "Thank You" page with a different name from what you furnished the Feedback Form Wizard, or you saved your page to the wrong folder, or you failed to upload the page.
After you get your "Thank You" page, you should log into your email account and see if you have received your email. If not, go through the checklist of things to do when you don't receive your email.
If you run into some other problems testing the script, please see the Frequently Asked Questions (FAQ) about the Feedback Form Wizard. You may also want to reread this chapter to make sure you didn't miss anything crucial.
Congratulations! You've done it! You've not only created a fully functional multi-page website, you've also mastered all the basic skills needed to design a website using Dreamweaver CS5.
For those who want to explore Dreamweaver further, you may find tutorials on accomplishing specific tasks with Dreamweaver in my List of Dreamweaver Tutorials. These include tasks that are not covered in this main tutorial series because not everyone needs to do them. In addition, as you may already know, Dreamweaver itself also includes a help system from which you can find other pieces of information. I know some of you did not use the help system because you didn't understand what it said. However, now that you have successfully created a site from start to finish using Dreamweaver, you may find that the things that you couldn't grasp before are now actually quite comprehensible.
There are also other aspects to running a website besides the visual design part. You may want to return to the How to Make / Create Your Own Website: The Beginner's A-Z Guide to read an overview of the rest of the things you should probably do.
Finally, I would like to ask that you remember thesitewizard.com even when you've finished your site. Link to it and recommend it to others. (Thanks!)
All the best for your site!
Copyright © 2010 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
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 http://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 this article in whole or part, in any form, without obtaining my written permission.
To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)
It will appear on your page as:
How to Add a Feedback Form to Your Website with Dreamweaver CS5
Copyright © 2010 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
Last updated: 10 November 2010.
Niciun comentariu:
Trimiteți un comentariu