How to Add a Contact Form (Web Form) to Your Website Using Dreamweaver CS5.5

Chapter 8: How to Create a Feedback Form

by Christopher Heng, thesitewizard.com

As you surf the Internet, I’m sure you’ll have noticed that many websites provide some means for their visitors to
contact the webmaster. Some put an email address that you can use, while the majority nowadays provide a web form,
called either a “Feedback Form” or a “Contact Form”, which visitors can fill in to reach the person running the website.
You will be adding such a form to your website in this chapter.

Note that this is chapter 8 of the
Dreamweaver CS5.5
tutorial. As such, I will assume that you already know the things taught in the earlier chapters. If you’re new
to Dreamweaver, you may find it easier to start with
chapter 1.
Alternatively, if you’re totally new to creating a website, please read
How to Make / Create Your Own Website:
The Beginner’s A-Z Guide instead.

Goal of This Chapter

By the end of this chapter, you will have added a working contact form to your website which your visitors can
use to send you feedback. If you’ve been following this Dreamweaver tutorial from chapter 1, you’ll also have
completed your website, with a fully-functional multiple-page website “live” on the Internet. In addition,
you’ll have learnt most of the commonly-used skills needed to design and maintain a website using Dreamweaver,
and will be able to create other websites as and when you wish.

Why You Can’t Simply Design a Web Form and Expect It to Work

Web forms are tricky beasts for the newcomer. Many new webmasters think that they can simply design a web form
using a web editor like
Dreamweaver,
and have it work automatically. Then, when they publish the form to the Internet, and test it out in a web browser,
they find that clicking the “Send” button (or whatever their button is called) on the form has no effect. Nothing
appears to happen. In fact, not only has nothing appeared to happen when they click the button, nothing has
indeed happened.

Web forms work as one component of a system of seemingly disparate parts. They are like the electrical switches in
your house that turn on the lights in a room. Merely installing a switch and flipping it on isn’t going to turn
on the lights. You’ll need to install the lights as well. And you’ll have to connect the switch to the lights and
the electrical power. In the same way, the web form itself is not enough. You’ll need to install another component
on your website, and your web host needs to have some other software on their system and have properly configured it
to interact with their email system.

It’s much easier to work with a concrete example than to talk hypothetically. As such, please go to
the Feedback Form Demo
and try out the contact form found there. Return to this page when you have done that. Please do
it even if you’ve had lots of experience sending feedback and know exactly how forms work. The feedback
form system used on that demo site uses the exact same technology that you’ll be using on your website,
so you’ll have an easier time understanding what I say in this article when I refer to different parts
of the form if you’ve at least tried it out once. Don’t worry, the form on that site is just a demo
of what you’ll be using, so you can test it to your heart’s content without spamming anyone. The messages
sent using the demo are automatically deleted.

From your little experiment, you should be able to see that, superficially, the feedback form comprises
at least 3 parts: the form itself, a “Thank You” page which is displayed when a message is successfully
sent, and an “Error” page which is displayed when something goes wrong. Under the hood however are
several equally important elements. When you click the “Send Feedback” button on the form, your message
is actually sent to a computer program, the feedback form script, running on the Feedback
Form Demo site. The feedback form script takes the message and formats it into an email message and
(loosely speaking) delivers it to yet another program on your site, called the PHP interpreter. The PHP interpreter,
on its part, passes the email to a mail processing program on your web host. From there, the mail processing program
sends the message on its merry way around the Internet till it finally reaches your email provider.

For this reason, in order for your web form to work, you’ll need the following:

  • A Web Host that lets your run PHP scripts that send email

    The feedback form script (one of the parts of the web form system described earlier) that you’ll be using is written in a computer
    language called “PHP” (see What is PHP?
    if you want a more detailed explanation of what PHP is). As such, for it to work, your website must be placed on a web server
    that has PHP installed.

    That’s not all. Your web host must have configured their system so that your website is allowed to
    run PHP scripts that send email. Just because your web host says that you can use PHP doesn’t necessarily
    mean that your PHP scripts can send email. Most free web hosts prevent PHP scripts installed on their
    system from sending mail, probably to protect themselves from people using their facilities to spam others.
    As such, if your website is situated on a free web host, chances are that you will not be able to successfully
    use a web form on your site. Note that when I say “free web hosting”, I include any situation where you’re not actually
    paying money to have your website hosted. That includes the free hosting that comes with your Internet broadband
    connection or the “starter websites” that you get for free when you
    register a domain name with
    some registrars. If you’re using any such solution for your website, your web form will probably NOT work.

    In general, if you want your feedback form to work, you will need to be hosted on a
    commercial web host.
    The form has been used successfully by thousands of sites on such hosts, including the
    web host used by thesitewizard.com itself.

    Note also that the PHP installed by your web host must be version 4.2 or later. This should generally not be
    a problem, since earlier versions have been obsolete for many years now. And before you ask, PHP 5 is fine.
    That is, any number that is greater than 4.2 is okay.

  • The Feedback Form Script

    In many ways, the feedback form script is the heart of your feedback form system. It is the computer program that changes
    what is typed by your visitor into an email message. You’ll be generating a customised (“customized” in
    US English)
    version of this for your site using the
    Feedback Form Wizard.
    Don’t worry. It’s free.

  • The Feedback Form (Contact Form)

    The feedback form is the part of the system that your visitors will see. It will be generated for you by the
    Feedback Form Wizard,
    and you can customise its appearance in Dreamweaver.

  • The “Thank You” and “Error” Pages

    The “Thank You” and “Error” pages are the supporting web pages that you will design in Dreamweaver.

How to Create the Feedback Form Script and Web Form

  1. The very first thing you need to do is to go to
    Feedback Form Script Wizard
    at http://www.thesitewizard.com/wizards/feedbackform.shtml to generate the feedback form script
    and related files. One way is to open that page in another window (or tab) in your browser, so that you can
    read the instructions on this page while using the wizard.

  2. Read the information given by the wizard, and click the option “Create a PHP Feedback Form (Requires PHP 4.2 or above)”.
    Actually, that option should already be selected by default, but click it anyway if you’re not sure.

  3. Step 2 of the Feedback Form Wizard should appear. Enter the following information into the wizard:

    • Email address

      Enter the email address at which you want your visitors’ comments to arrive. For example, enter
      webmaster@example.com” (without the quotes) if that is your email address.

    • URL of Feedback Form

      This is the web address of the user-visible portion of your contact form. Enter
      http://www.example.com/feedback.html” (without the quotes), replacing “www.example.com
      with your actual website address. Important: do not change the filename portion from
      feedback.html“, since you have already used that name to link to the form in your navigation menu
      in chapter 6. If you change the name now, all the links on your site pointing to the form will be broken.

      Even if you have not been following my tutorial from chapter 1, it’s best to simply use “feedback.html
      for the filename portion, since I assume everywhere in this chapter that you’re using that name. If you use a different
      name, you’ll have to make sure all the various addresses mentioned in this chapter match up, else your form will not work.

      Warning: do not use capital (uppercase) letters or add spaces to the name “feedback.html“. Use that
      name exactly as it is shown for the filename portion of your URL.

    • URL of “Thank You” Page

      This is the web address of the page that will be displayed after your visitor’s email has been sent.
      Enter “http://www.example.com/thankyou.html“, once again replacing the domain name with your site’s
      actual address. It’s best not to change the filename portion from “thankyou.html“, since I will
      assume later in this chapter that you’ve used that exact name. In addition, do NOT put spaces or
      use capital (uppercase) letters in that name. Use “thankyou.html” exactly
      as-is in the filename portion.

    • URL of Error Page

      Enter “http://www.example.com/error.html” into this field, as usual replacing the domain name
      with the right one for your site. Once again, I recommend that you do NOT change the filename from
      error.html“, since I will assume later that you’ve used this name here. In addition, make sure that
      the entire name is in small (lowercase) letters and that there are no spaces in the name.

  4. Scroll down the page and read the section entitled “Conditions for Use: Licence Agreement (Required)”.
    If you agree to the terms, indicate it in the form and click the “Generate script” button.

  5. The wizard will then proceed to create a customised script and feedback form, using the values you have just
    supplied, and display them in your browser. Do NOT close this page. Leave it open while you
    work on the next few steps in Dreamweaver. We will be using the code generated below.

How to Save the Feedback Form Script Without Introducing Problems

The first thing we’ll need to do is to save the feedback form script. As mentioned above, a “script” (in this
context) means a computer program. The feedback form script is the real engine of your contact form. Without it,
your form will be like a light switch that is not connected to the lights.

  1. Start up Dreamweaver, if you have not already started it up.

  2. Click “File | New…” from the menu. For those who have forgotten, this means to click “File” from the menu bar, followed by
    “New…” from the drop down menu that appears.

  3. The “New Document” dialog box should appear. Click the “Blank Page” line in the first column. Notice
    that I said to click “Blank Page” and not “Page from Template” the way you did in chapter 7.

  4. In the “Page Type” column, click the line that says “PHP”.

  5. Click the “Create” button found near the bottom of the dialog box.

  6. A page that seems blank will appear. I say “seems blank” because the page is not actually empty, since it contains invisible
    HTML code
    which Dreamweaver inserts by default into practically everything it creates. We need to delete that code or it will
    interfere with the feedback form script.

    If, instead of a blank white page, you see your 2 column website design based on your template, it means that you did not
    follow my instructions above to click “Blank Page” and “PHP”. Close the existing page without saving it and return to the
    beginning
    of this section and try again.

    Click “View | Code” from the menu to switch Dreamweaver from its Design view to its Code view.

  7. You should now be able to see the invisible HTML code that I referred to earlier. Select everything on the page.
    The easiest and surest way to do this is to use “Ctrl+A” from your keyboard. That is, hold down the “Ctrl” key
    on your keyboard and (while continuing to hold down that key) hit the “a” key. Everything on the page should be
    highlighted, indicating that it was selected. (If I’m not wrong, Mac OS X users have to use “Command+A” instead
    of “Ctrl+A” to get this to work.)

    (If, in spite of my suggestion above, you have used your mouse to select everything, make sure that you’ve really selected
    everything on the page and left nothing out. Not even a blank line.)

  8. Hit the DEL key to get rid of everything. Your document window, still in Code view, should now be completely blank.

  9. Switch back to your web browser without closing Dreamweaver.

  10. Look at the results page from the Feedback Form Wizard in your web browser. You should be able to find a box near the top of the
    page in the section labelled “Feedback Form Script”. This box contains the feedback form script that we’re
    going to copy to Dreamweaver.

    Click somewhere in that box in the “Feedback Form Script” section. The contents of the box should automatically be
    selected (that is, everything in the box should be highlighted when you click it). If not, use Ctrl+A (or
    Command+A on the Mac) to select it.

  11. You’ll now copy what you selected to the clipboard. To do this, use Ctrl+C (or Command+C on the Mac) from your keyboard.
    That is, while holding down the Ctrl key, hit “c” on the keyboard. Alternatively, click the right mouse button while
    its pointer is somewhere in the box and click the “Copy” line in the menu that pops up.

  12. Return to Dreamweaver without closing your web browser. There are still things on that page that we need, so leave it
    open for the time being.

  13. Click “Edit | Paste” from the menu. The contents of the box should now appear in that empty window in Dreamweaver.

  14. Do a cursory check to make sure that everything is in order (so far): first, make sure that the last line on the
    page is a red “?>“. Second, glance at the lines above that line: the other lines should be displayed
    in various colours, including red, blue, green, purple and possibly some orange.

    If you do not see the colours I describe above, but instead find that all the lines are in black, it means that you
    missed some crucial step in this section. Close the window using “File | Close” without saving anything, and return to the
    top of this
    section and try again. Since it’s very easy to get things wrong here, leading to a form that doesn’t do its
    job correctly, I recommend that you don’t work from memory in this chapter, but follow the steps I listed meticulously.

  15. WARNING: Do NOT change anything in this window. I know that some of the things in the window
    look suspiciously like English words, thus tempting you to modify them. However, this is NOT a web
    page you’re looking at. It is a computer program. Nothing in this window will be displayed on your website even
    when the script is placed on your site. If you modify anything in this window, your form will not work correctly.
    Even if all you want is to change your email address or web addresses, go back to the Wizard and generate a new form.
    Do not manually alter them. To reiterate: do NOT add, subtract or modify anything. Do not even add blank lines or
    extra spaces to beautify the page.

    For those of you who are concerned that your email address is on this script page, and that your visitors can see it, don’t worry.
    As long as your site is running on a system with PHP, nothing on this page will be visible at all. In fact, at no time
    will the script be even sent to your visitors’ browsers. This is the case even if your visitors try to directly
    access the script in their browsers. They’ll just end up being supplied your feedback form instead of the script.
    If you don’t believe me, you can test it yourself later when you’ve successfully installed everything. Instructions
    for this are provided in the section on testing below.

  16. Click “File | Save As…” from the menu. The “Save As” dialog box will appear. Enter “feedback.php
    (without the quotes) into the “File name” field. Do NOT use any other name. Do not use capital (uppercase) letters
    for any part of the name or add spaces. This exact name is expected by the feedback form, so it’s not the time
    to get creative.

  17. Click the “Save” button.

  18. Click “View | Design” from the menu to revert to the Design view. You should now see a blank page again.
    Do NOT type anything here. Although it looks blank, it’s still the feedback form script you’ve just saved.
    Anything you type here will break the script.

  19. Immediately click “File | Close” from the menu to close the file before you accidentally change something.

How to Insert the Feedback Form into Your Web Page with Dreamweaver CS5.5

The feedback form proper is simply the user interface that your visitors will interact with. The form should
be placed in a normal web page, much like the pages that you have created in the earlier chapters of this
tutorial.

  1. Click “File | New…” from the menu.

  2. In the leftmost column of the “New Document” dialog box that appears, click the line “Page from Template”. Then
    select the template that you designed in chapter 7 in the usual way and making sure that “Update page when template changes”
    is checked before clicking “Create”. This is the same procedure you carried out in chapter 7 to create new pages using
    your bespoke site design.

    For those who have arrived at this chapter without reading the previous chapters, and have not created
    a Dreamweaver template for your site, just create a new web page the way you normally do. If you are not even sure
    how to do that, chances are that you don’t know enough to continue. In such a case, please start from chapter 1
    of this tutorial. (It’s not as bad as it sounds; if you work diligently through the chapters, you’ll arrive back
    here in no time.)

  3. As usual with a new page, replace the “Title” field with something suitable such as “Feedback Form”,
    “Contact Form”, “Contact Us”, “Support” or some such thing. At the top of the visible portion of your web page,
    put a (visible) heading of “Feedback Form” (or whatever you used for the Title field).

  4. Delete whatever placeholder text you have in the editable region of your page. Leave a blank line or two where
    you can insert the feedback form later.

  5. Without closing Dreamweaver, switch back to your web browser.

  6. Scroll down to the section headed “HTML Code”.

  7. Click your mouse somewhere in the box in the “HTML Code” section. As before, the contents of the box should
    be automatically selected when you do that. If it isn’t, use Ctrl+A (or Command+A on the Mac) to select it.

  8. Use Ctrl+C (or Command+C on the Mac) to copy everything in that box to the clipboard. Or, if you prefer to use
    the mouse, click the right mouse button while the cursor is hovering over the contents of the box, and select
    the “Copy” line in the menu that pops up.

  9. Switch back to Dreamweaver. You should again be looking at the new page that you have just created.

  10. Click the spot on the page where you want the form to go. This will cause a blinking text cursor to appear in
    that place. If the text cursor is not on a blank line of its own, hit the ENTER key to make a blank line, and
    use the arrow key (on your keyboard) to position the text cursor on that blank line if necessary. That is,
    by the end of this step, your text cursor should be on the blank line where the form is supposed to start.

  11. Without moving your text cursor, immediately click “View | Code” from the menu.

  12. You should now see the underlying HTML code of your web page. Locate your (blinking) text cursor. It should be on a line
    that says “<p> </p>“. To be precise, the cursor should be immediately
    after “<p>” and before “ </p>” on that line.

    Use the arrow keys on your keyboard to move the text cursor to the end of that same line. That is, position
    the cursor so that it is just after “<p> </p>” on the same line.

  13. Click “Edit | Paste” from the Dreamweaver menu.

  14. The HTML code created by the wizard will be inserted at that spot.

    Click “View | Design” from the menu.

At this point, you should be able to see the feedback form fields on your web page.

How to Customize the Appearance of the Feedback Form

You will now customise the appearance of the form so that it suits the design of your web page.
Note that you do NOT need to do this if the form already looks fine on the page. The code created by the
Feedback Form Wizard is designed to work out-of-the-box without needing any further tinkering. If you don’t
want to change anything, just move on to the next section.

The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught
in the earlier chapters of this tutorial to
change
the font, text size, and colours. I will not repeat those steps here, since you can easily return to the relevant
chapters if you’ve forgotten how to do them. Instead I will focus on things you haven’t learnt yet, like
how to adjust the widths of the various fields in your form and how to change the words appearing
on the button at the bottom of the form.

Please note that the widths and heights of the form fields are merely visual gimmicks. They do not affect how
much information your visitors can enter into your form. Even if you create very narrow fields, your visitors
can still enter long names, email addresses and comments. The web browser will automatically scroll to
allow them to type whatever they want to type. Nevertheless, it’s still useful to know how to adjust the field
widths so that you can make the form blend aesthetically with the rest of your page.

  • How to Widen the Name and Email Address Fields

    Click the field that you want to make wider (or narrower). For example, if you want to widen the Name field,
    click the box for “Name” once to select it. (Notice that I said to click the box, not the word “Name” on the page.)

    The PROPERTIES panel at the bottom of the Dreamweaver window will now be filled with things specific to that
    field. Locate the value for “Char width” in that panel. It should currently say “25”, which means that the “Name” or
    “Email address” field that you selected has a current width of 25 characters. If you want the field to be broader, so that
    it is (say) 50 characters wide, click the 25 to put your text cursor in that box, then replace that number with
    50 (or whatever number you actually want to use). Hit the ENTER key after typing your new number. The change should be
    reflected on your page as soon as you do that.

    If the field is still not wide enough, or if it is now too wide, do the same thing and change the number
    till you’re satisfied with the results. Remember that this change is purely aesthetic, so don’t stress
    yourself out trying to find the perfect width (not that there’s such a thing). Your visitors will be able to enter
    whatever they want into your form even if what they have to say is much longer than the width you allocate. Just
    make a decision on how wide you want the field to be, and stick to it.

    You’ll probably want to repeat the above procedure with the other field as well, so that both the Name and Email Address
    fields have the same width. (There’s no requirement for this, but most people like their fields to have the same width
    so that the form doesn’t look unbalanced on the page.)

  • How to Make the Comments Box Wider and Taller

    Once you adjust the Name and Email Address fields, you’ll probably also want to change the width and height of
    the Comments box. To do this, click the box once to select it. Again, notice that I said to click the box, not
    the word “Comments”.

    The default values for the Comments box should fill the PROPERTIES panel at the bottom of the Dreamweaver window.
    This time, however, there are 2 values that you can change in that panel: the value for “Char width”, with its default
    of 45, and the value for “Num lines”, with its default of 15. Adjust either or both of those values, hitting the
    ENTER key after each change, till you are satisfied with the results.

    Note that the version of Dreamweaver I used has a bug that surfaces when you change the “Num lines” field
    to a number bigger than the original. After hitting the ENTER key, the Comments box will indeed become bigger,
    but the layout will not adjust to accommodate it. As such portions of the Comments box, along with the “Send Feedback”
    button, may flow off the page, overlapping your footer (and beyond). This visual glitch will disappear when you
    save your page later. But don’t save the page just yet. Either ignore the glitch for the time being or don’t change
    the height of the box. (It’s not like the height of the box matters; your visitors can probably still write an entire novel
    in that small box.) Once again (for the panicky), the visual glitch is just a temporary Dreamweaver bug that will go away later.
    The underlying page code (the stuff that really matters) is fine.

    (For those of you inclined to ignore my suggestions, and are about to save the page just to get rid of the
    visual glitch, make sure you read my instructions below on the correct filename to use for this page. Otherwise you’ll
    run into more serious problems than this temporary visual glitch.)

    If you don’t experience the aforesaid bug, it probably means that the Dreamweaver programmers have already fixed
    the bug in the version you’re using.

  • How to Change the Words Displayed on the Send Feedback Button

    The words “Send Feedback” on the button at the bottom of your feedback form can be changed if you prefer it
    to say something else. To use a different set of words, click the button once to select it. (Note: even if
    you experience the visual glitch I mentioned above as a result of your resizing the height of the Comments box,
    you should still be able to find the “Send Feedback” button somewhere on the screen and click it. It will probably
    not appear in the correct position as a result of the Dreamweaver bug, but it should still be selectable.)

    When you do that, the PROPERTIES panel should display a “Value” field with the default words “Send Feedback”.
    Click your mouse cursor in that field and change the words to whatever else you want.

  • Things You Should NOT Change

    For those of you who are compulsive customisers, who feel an irresistable urge to change everything, please
    note that there are certain things in the form that you should NOT change. Changing those things will cause the
    form to fail to work correctly.

    The general principle is that you should only change things that are visible on your web page. That is, you
    can change things like colour, size, widths, height, and even the words that appear on the page itself.
    Yes, you can even change the words “Name:”, “Email address:” and “Comments” that appear before the form fields
    on your page to something else if you like.

    However, as you may have already noticed when you clicked the various fields, there are other internal values
    for those form fields apart from those displayed on your site. For example, when you clicked the Name, Email address
    and Comments fields on your page to select them, you may have noticed that other values like “fullname”, “email” and
    “comments” were also shown in the PROPERTIES panel. These words must NOT be changed, not even to translate them to some other
    language. They are internal values that are used by the web browser to interface with the feedback form script.
    To use the analogy of the light switch I mentioned earlier, these are like the electrical wires that connect
    the switch (your web form) to the actual lights (the feedback form script). If you change them, things will go awry.
    Having said that, you shouldn’t need to change those values anyway, since they are not actually visible on your web page.

How to Save the Feedback Form Correctly

Once you’ve finished customising the form, click “File | Save As…”.

Type “feedback.html” (without the quotes) into the “File name” field and click the “Save” button.
Do NOT use any other name. Do NOT use capital (or uppercase) letters, or introduce spaces into the name. Just
use the name as-is. This was the name that you supplied to the Feedback Form Wizard earlier, and the name
was embedded into the script (computer program) it generated. This is also the same name you used in the
navigation menu you created in chapter 6. Changing the name at this point will break a lot of things.

Click the “Save” button.

Now click “File | Close” from the menu to close the feedback form page.

(Optional) If you wish, you can switch back to your web browser and close the tab containing the results from the
Feedback Form Wizard. At this point, you’ve completed integrating the Feedback Form Wizard’s output into the pages
of your site, so you don’t need it any more. Your job is still not done, though. You still need to create the “Thank You”
and “Error” pages needed by your feedback form system. This will be done next.

How to Create the Auxiliary Pages for the Feedback Form

As you have probably already realised, from experimenting with the
feedback form demo earlier, the “Thank You”
and “Error” pages are just straightforward web pages, much like your home page, site map and “About” page that
you created in the earlier chapters.

The “Thank You” page is the web page that is displayed after your visitors click the “Send Feedback” button.
Its main purpose is to reassure your visitors that their message has indeed been sent. Otherwise they’ll think
that nothing has happened and click the button again, with the end result that you’ll get multiple copies of
the same message. Most websites also take this opportunity to thank their visitors for their comments.

Create the page the usual way you create a new page based on your site’s template. Replace the Title field
with something like “Feedback Sent” or “Thank You” or the like. Then in the main visible portion of your web
page, put a message like the following:

Message Sent

Your message has been sent to the webmaster. Thank you for your comments.

Actually, you can say whatever you want. The above is just to give you an idea of what to put on the page.
There are no rules as to what you must say. Save the page with a filename of “thankyou.html” (without
the quotes). Once again, don’t change the name in any way: use the exact wording without any capital (uppercase) letters
or spaces. Changing the name now will result in your visitors receiving an unfriendly
“404 File Not Found” error
when they click the “Send Feedback” button.

Once you’ve finished with the “Thank You” page, create the “Error” page from your site’s template. This page
is displayed when your visitors click the “Send Feedback” button without entering anything into one or more
of the form fields. For example, if they leave the “Email address” field of the form blank, they will get
this page instead of the “Thank You” page.

As such, your Error page should have a message telling your visitors to return to the form to complete all
the fields before clicking the “Send Feedback” button. For example, you can say something like the following:

Error Sending Message

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 change the Title field of the page to something like “Error” or “Error Sending Message”.
Save the file as “error.html“, without the quotes and without modifying the name in any way. That is,
use the name as-is, without using capital (uppercase) letters or introducing spaces. Remember that this is the
name you supplied the Feedback Form Wizard earlier, and if you change it now, your visitors will get an unhelpful
File Not Found error instead of the Error page.

Publishing and Testing Your Feedback Form

  1. Upload the Files

    Publish all the files to your website using “Site | Synchronize Sitewide…” just as you did in chapter 7.
    Dreamweaver should display the script, the form, the Thank You page and the Error page in its list of files
    that need to be uploaded when you do so. Allow the editor to transfer those files to your website.

    Note: if the “Synchronize Sitewide…” menu item is disabled or greyed out, it probably means that
    you arrived at this chapter of the tutorial from outside thesitewizard.com and have missed some steps which I
    have already taught in the earlier chapters. In particular, you’ll need to
    set up
    Dreamweaver’s Site Manager properly before that menu item will work properly. Please read the
    relevant
    section in chapter 1 to find out how to do this. And if you cannot even invoke the Site Manager, it probably
    means that you designed your website without creating a site definition in Dreamweaver before you started. In such
    a case, you may want to start from scratch, from the very top of chapter 1. Although this sounds tedious, it may
    save you a lot more work in the long run, since there is no telling how many other intermediate steps you missed out.

  2. Test the navigation menu button that points to the feedback form

    Once Dreamweaver has completed copying the files to your site, fire up your web browser and go your site’s
    home page. From there, click the navigation menu button that says “Feedback Form” (or whatever label you put
    on that button). The page containing the feedback form should appear.

    If you get an error saying something like “404 File Not Found” (or some other words to that effect), it means
    the web address (ie, URL) you assigned to that navigation menu button in chapter 7 does not match the address
    of the form you just uploaded. This means either the URL you set for the navigation menu button is incorrect,
    or that you saved the feedback form under a wrong name (or to the wrong folder).

    (Note: although you can go directly to your feedback form in your browser instead of starting from your home page,
    I’m suggesting this roundabout method so that you can test that your link to your feedback form works correctly. Remember
    that you couldn’t test this when you checked the other menu buttons in chapter 7 because your form was not ready at that
    point, so if you don’t test it now, you may completely forget to check it.)

  3. Test if you have named your Error page correctly

    To test if you have named your Error file correctly, and that the name matches what you supplied the Feedback
    Form Wizard, do not enter anything into your feedback form. Just click the “Send Feedback” button. Yes, I know
    all the fields are empty. That’s the whole point.

    Your Error page should appear in your web browser. If so, move on to the next test.

    If the Error page doesn’t appear, but you get a “404 File Not Found” message instead, it means that there is
    a mismatch between the address you gave the Feedback Form Wizard and the actual address of your error page.
    This may be the result of your saving the Error file under a different name, or saving it to the wrong location.
    Alternatively, you could have made a typing error when entering the address of the Error page in the Wizard. Yet
    another possibility is that you failed to upload the Error file.

  4. Test if you have named your Thank You page correctly

    Hit the BACK button in your browser to return to the feedback form from your Error page. Now complete all
    the fields in the form before hitting the “Send Feedback” button. This time, you should get your
    “Thank You” page.

    If you get a File Not Found
    error when you submit the form, it means that there is a name or web address (URL) mismatch somewhere. As before,
    there are four possible causes for the error: you made a mistake naming your “Thank You” file, you saved the file to
    the wrong folder, you supplied the wrong web address to the Feedback Form wizard, or you failed to upload the
    “Thank You” page.

  5. Test if your web host’s email system delivers messages sent by PHP scripts

    The fact that your browser displays your Thank You page doesn’t necessarily mean that the message sent by the script will
    arrive at your email address. All it means is that the script has successfully passed the email on to the other
    programs running on your web host’s system. The Thank You page merely signals the end of the script’s job. Now it’s up to
    the rest of the programs running on your web host’s computer to transmit the message to your email provider. It also
    depends on the internet connection between your web host and your email provider, as well as the speed at which your
    email provider makes new mail available for your reading. Since there are so many places where things can still go wrong,
    don’t assume success until you’ve logged into your email account to check if your test message has arrived.

    If you do not get your email within a reasonable time, see the
    checklist of things to do when your email fails
    to arrive. How long does it typically take for email to be delivered? Good question. It varies from web host to
    web host, and email provider to email provider. On my
    current web host, it usually
    takes a second or so (probably less, but I’m not so fast that I can check my email in less than 1 second after sending
    my test message), but I’ve tested the script on other web hosts
    where it takes many hours before the email even deigns to appear. I guess you’ll just have to test to see how long
    email delivery takes on your web host, and get used to it.

  6. For the suspicious: how to check if your visitors can see your email address from the script code

    Remember that I said earlier that the email address that you saw in the feedback form script will not be
    displayed in your visitors’ web browsers even if they specifically put the address of the script in their
    browser’s location bar? Well, if you didn’t believe me then, now’s your chance to verify that claim.
    (Actually, even if you believe my statement, please try the following experiment anyway, for your own peace of mind.
    Don’t worry, you won’t break anything.)

    If your feedback form is at “http://www.example.com/feedback.html“, the PHP script that
    you uploaded should be at “http://www.example.com/feedback.php“. That is, take the URL of
    your feedback form, and change the part at the end that says “.html” to “.php“.
    Type that new address into a new tab (or window) in your web browser’s location bar and hit the ENTER key.

    You should be magically transported to your feedback form. That is, you will not see the multicoloured
    program code that you saw in Dreamweaver. In fact, the script code was never at any moment transmitted
    to your web browser.

    Explanation: a web server that has PHP installed distinguishes between normal web pages
    and PHP scripts. If it sees a normal web page, like your home page, it sends that document to your visitor’s web
    browser unmodified. If it sees a PHP script, it doesn’t send anything. Instead, it runs the script,
    since it knows that PHP scripts are computer programs, not documents. It’s then up to the PHP script to
    send something to the browser if it wants to. When run in this way, the script created by the
    Feedback Form Wizard
    notices that it was accessed directly (instead of through the “Send Feedback” button). Since it has nothing to
    do (having no email message to send), it simply tells your visitor’s web browser to go to the
    form instead. That’s why you were transported to your feedback form.

    (If you encountered a “404 File Not Found” error instead of your feedback form, you’ve either typed the wrong
    address into your browser, or you supplied the wrong address for the “URL of Feedback Form” field in the
    Feedback Form Wizard when you first created your script.)

If you run into any problems installing and running the feedback form script, please see the
Frequently Asked Questions (FAQ)
about the Feedback Form Wizard. It may also be a good idea to go through this chapter again in case you missed
something.

Congratulations! And Where to Go From Here

Congratulations! You’ve completed your website. This is no mean feat;
you’ve actually created a fully functional, professional-looking website (from scratch!) with multiple pages, a site map and
a working feedback form. Even better, you’ve mastered the skills needed to create websites using Dreamweaver CS5.5, and
are well placed to create other sites should you want to.

If you want to explore Dreamweaver further, you can find tutorials on how to do specific tasks from my
list of Dreamweaver tutorials.
Some of those tasks are not covered in this main tutorial series because they are not things that everyone wants
to do. Dreamweaver is a powerful web editor suitable for both newcomers and seasoned professionals;
if I included everything it can do in this series, you’ll be quickly overwhelmed and become discouraged.
As such, the main tutorial focuses on the core set of skills and knowledge needed by everyone to create a website
using Dreamweaver, leaving things that only a few people want to do to separate standalone articles.

Another source of help is Dreamweaver itself. As you may already know, the editor itself has a help system which
you can invoke from within the program. If you have previously ignored it, because you couldn’t understand what
it said, you may want to give it another chance. After all, you have come a long way from the early days (or
hours if you’ve completed these 8 chapters in a single session) when you didn’t know anything. As such, things
that you couldn’t understand before may be a little easier to comprehend now.

Website creation does not consist only of designing web pages. There are other things that you need to look into
as well, even after your website is completed. If you have not already done so, I recommend that you return to the
How to Make / Create Your
Own Website: The Beginner’s A-Z Guide to take a look at the other things you may want to do.

Finally, even though your site is completed, I would like to ask that you not forget thesitewizard.com.
Please link to it and recommend it to others. (Thanks!)

All the best for your site!

Copyright © 2012-2013 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.

It will appear on your page as:

How to Add a Contact Form (Web Form) to Your Website Using Dreamweaver CS5.5

Copyright © 2012-2013 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 24 June 2013.

Originally from:  

How to Add a Contact Form (Web Form) to Your Website Using Dreamweaver CS5.5