How to Upload to Godaddy Using Dreamweaver

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

Chapter 8: How to Create a Feedback Form

How to Add together a Contact Form (Web Grade) to Your Website Using Dreamweaver CS5.five

past Christopher Heng, thesitewizard.com

As you lot surf the Internet, I'm sure you'll have noticed that many websites provide some ways for their visitors to contact the webmaster. Some put an email address that you tin can utilise, while the majority nowadays provide a web form, chosen either a "Feedback Form" or a "Contact Form", which visitors tin fill in to attain the person running the website. You will be calculation such a form to your website in this chapter.

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

Goal of This Chapter

By the cease of this chapter, y'all will accept added a working contact form to your website which your visitors tin use to send yous feedback. If y'all've been following this Dreamweaver tutorial from chapter 1, y'all'll also have completed your website, with a fully-functional multiple-page website "live" on the Internet. In improver, yous'll have learnt almost of the usually-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 Yous Tin't But Blueprint a Web Grade and Expect Information technology to Work

Web forms are tricky beasts for the newcomer. Many new webmasters think that they can simply design a spider web form using a spider web editor like Dreamweaver, and have information technology work automatically. Then, when they publish the form to the Cyberspace, and test it out in a web browser, they find that clicking the "Send" push button (or whatsoever their button is chosen) on the form has no issue. Nix appears to happen. In fact, not simply has cypher appeared to happen when they click the push button, zilch has indeed happened.

Web forms work as 1 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 demand to install the lights as well. And you'll have to connect the switch to the lights and the electric power. In the same mode, the web form itself is non enough. You'll need to install another component on your website, and your web host needs to have some other software on their arrangement and accept properly configured it to collaborate with their email system.

It'due south much easier to work with a concrete example than to talk hypothetically. As such, delight go to the Feedback Class Demo and attempt out the contact form constitute in that location. Render to this page when you lot have done that. Delight practice it even if you've had lots of experience sending feedback and know exactly how forms work. The feedback form arrangement used on that demo site uses the verbal aforementioned technology that y'all'll be using on your website, so y'all'll take an easier time understanding what I say in this article when I refer to dissimilar parts of the form if you've at least tried it out one time. 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 run into that, superficially, the feedback form comprises at least 3 parts: the form itself, a "Thanks" page which is displayed when a message is successfully sent, and an "Error" folio which is displayed when something goes wrong. Under the hood all the same are several equally important elements. When yous click the "Ship Feedback" button on the form, your bulletin is actually sent to a computer program, the feedback form script, running on the Feedback Form Demo site. The feedback course script takes the bulletin and formats it into an email message and (loosely speaking) delivers information technology to yet another program on your site, called the PHP interpreter. The PHP interpreter, on its part, passes the e-mail to a postal service processing program on your web host. From at that place, the mail processing program sends the bulletin on its merry fashion effectually the Internet till information technology finally reaches your electronic mail provider.

For this reason, in order for your web form to piece of work, you'll need the post-obit:

• A Web Host that lets your run PHP scripts that send e-mail

  The feedback grade script (one of the parts of the web form organisation described earlier) that y'all'll be using is written in a figurer language called "PHP" (run across What is PHP? if you want a more detailed caption of what PHP is). As such, for information technology to piece of work, your website must be placed on a spider web server that has PHP installed.

  That's non all. Your web host must accept configured their organization then that your website is allowed to run PHP scripts that transport email. Just because your web host says that you lot can utilize PHP doesn't necessarily mean that your PHP scripts can send email. Most free web hosts prevent PHP scripts installed on their arrangement from sending postal service, 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 utilize a web form on your site. Note that when I say "gratis spider web hosting", I include any situation where you lot're not actually paying money to have your website hosted. That includes the gratis hosting that comes with your Internet broadband connection or the "starter websites" that you get for complimentary when y'all register a domain name with some registrars. If you lot're using any such solution for your website, your web form will probably Non piece of work.

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

  Note as well that the PHP installed by your web host must be version iv.2 or later. This should generally not be a problem, since earlier versions accept been obsolete for many years now. And before y'all enquire, PHP 5 is fine. That is, whatsoever number that is greater than four.2 is okay.

• The Feedback Form Script

  In many ways, the feedback form script is the middle of your feedback class system. It is the computer program that changes what is typed past your company into an electronic mail message. You'll exist generating a customised ("customized" in United states of america 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 class is the part of the organization that your visitors will see. It will exist generated for you by the Feedback Form Sorcerer, and you can customise its advent in Dreamweaver.

• The "Thank you" and "Error" Pages

  The "Give thanks You" and "Fault" pages are the supporting spider web pages that y'all 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 https://www.thesitewizard.com/wizards/feedbackform.shtml to generate the feedback form script and related files. One fashion is to open that page in another window (or tab) in your browser, then that you can read the instructions on this folio 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 choice should already be selected by default, but click information technology anyway if you lot're non sure.

3. Stride 2 of the Feedback Form Wizard should announced. Enter the following information into the wizard:

   • Email address

     Enter the electronic mail address at which you lot want your visitors' comments to arrive. For example, enter "webmaster@case.com" (without the quotes) if that is your electronic mail address.

   • URL of Feedback Form

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

     Fifty-fifty if you have not been following my tutorial from chapter 1, it'south best to simply utilize "feedback.html" for the filename portion, since I assume everywhere in this chapter that you're using that proper name. If you apply a dissimilar name, you'll accept to make certain all the various addresses mentioned in this chapter match up, else your form will not piece of work.

     Alert: do not use majuscule (uppercase) letters or add spaces to the name "feedback.html". Utilize that name exactly as it is shown for the filename portion of your URL.

   • URL of "Thank You" Page

     This is the web accost of the folio that volition be displayed later on your visitor's e-mail has been sent. Enter "http://www.case.com/thankyou.html", once more replacing the domain name with your site's actual accost. Information technology'south best non to alter the filename portion from "thankyou.html", since I will assume later in this affiliate that you've used that exact proper noun. In improver, do Non put spaces or use capital (majuscule) letters in that proper noun. Utilise "thankyou.html" exactly every bit-is in the filename portion.

   • URL of Mistake Page

     Enter "http://www.example.com/error.html" into this field, equally usual replacing the domain name with the right one for your site. Over again, I recommend that you practise NOT change the filename from "error.html", since I will assume later that y'all've used this name here. In addition, make sure that the entire name is in pocket-size (lowercase) letters and that at that place are no spaces in the name.

4. Scroll downwards the page and read the department entitled "Terms of Employ: Licence Agreement (Required)". If you concord to the conditions, indicate it in the form and click the "Generate script" push button.

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

How to Save the Feedback Course Script Without Introducing Problems

The first matter we'll need to practice is to salve the feedback class script. As mentioned above, a "script" (in this context) means a reckoner programme. The feedback grade script is the existent engine of your contact form. Without information technology, your form will be like a low-cal switch that is not continued to the lights.

1. Start up Dreamweaver, if you have not already started information technology upwards.

2. Click "File | New..." from the menu. For those who have forgotten, this ways to click "File" from the menu bar, followed past "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 "Bare Page" and not "Page from Template" the way you did in chapter seven.

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 announced. I say "seems bare" because the page is not actually empty, since it contains invisible HTML lawmaking which Dreamweaver inserts by default into practically everything information technology creates. We need to delete that code or it volition interfere with the feedback form script.

   If, instead of a blank white page, you run into your 2 cavalcade 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 render to the commencement of this section and try once more.

   Click "View | Code" from the bill of fare to switch Dreamweaver from its Design view to its Lawmaking view.

7. You should now exist able to see the invisible HTML code that I referred to earlier. Select everything on the page. The easiest and surest way to practice this is to use "Ctrl+A" from your keyboard. That is, hold down the "Ctrl" key on your keyboard and (while standing to concur downwardly that key) hit the "a" fundamental. Everything on the page should be highlighted, indicating that it was selected. (If I'm non wrong, Mac OS X users take to use "Command+A" instead of "Ctrl+A" to get this to piece of work.)

   (If, in spite of my proffer above, you lot have used your mouse to select everything, make sure that you've actually selected everything on the page and left nothing out. Non fifty-fifty a bare line.)

8. Hit the DEL key to go rid of everything. Your document window, nevertheless in Code view, should at present be completely blank.

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

10. Look at the results folio from the Feedback Form Wizard in your web browser. You should exist able to find a box virtually the top of the page in the section labelled "Feedback Grade Script". This box contains the feedback form script that we're going to copy to Dreamweaver.

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

11. You'll at present re-create what you selected to the clipboard. To do this, use Ctrl+C (or Control+C on the Mac) from your keyboard. That is, while belongings down the Ctrl key, striking "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 endmost your spider web browser. There are still things on that page that we need, so leave information technology open for the time being.

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

14. Practise a cursory bank check to make sure that everything is in gild (so far): first, make sure that the final 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, regal and maybe some orange.

    If you practise not see the colours I describe above, but instead find that all the lines are in black, it ways that you missed some crucial step in this department. Shut the window using "File | Close" without saving anything, and return to the top of this section and try over again. Since it's very easy to go things incorrect hither, leading to a form that doesn't do its job correctly, I recommend that you don't work from retentiveness in this chapter, only follow the steps I listed meticulously.

15. WARNING: Practise Non change anything in this window. I know that some of the things in the window look suspiciously like English words, thus tempting yous to modify them. However, this is Non a web page yous're looking at. Information technology is a figurer program. Zippo in this window will be displayed on your website even when the script is placed on your site. If yous modify annihilation in this window, your grade will not piece of work correctly. Even if all you desire is to change your email address or web addresses, go back to the Magician and generate a new form. Do not manually alter them. To reiterate: do NOT add, decrease or change anything. Exercise not even add bare lines or actress 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 tin come across it, don't worry. As long as your site is running on a organisation with PHP, nothing on this page will be visible at all. In fact, at no time will the script be fifty-fifty sent to your visitors' browsers. This is the case even if your visitors endeavour to directly access the script in their browsers. They'll just end up being supplied your feedback form instead of the script. If you lot don't believe me, you can test it yourself afterward when you've successfully installed everything. Instructions for this are provided in the department on testing below.

16. Click "File | Save As..." from the bill of fare. The "Save Every bit" dialog box will appear. Enter "feedback.php" (without the quotes) into the "File proper noun" field. Do NOT use any other name. Do non utilise capital (capital letter) letters for whatever role of the name or add spaces. This verbal proper noun is expected past the feedback grade, and so information technology's not the fourth dimension to become creative.

17. Click the "Salve" button.

18. Click "View | Design" from the carte du jour to revert to the Design view. You should now see a blank page over again. Do NOT blazon anything here. Although information technology looks blank, it'south still the feedback form script you've but saved. Anything you type here volition intermission the script.

19. Immediately click "File | Shut" from the carte to close the file earlier yous accidentally change something.

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

The feedback form proper is but the user interface that your visitors volition collaborate with. The course should be placed in a normal web page, much like the pages that y'all take created in the earlier chapters of this tutorial.

1. Click "File | New..." from the carte.

2. In the leftmost column of the "New Document" dialog box that appears, click the line "Page from Template". And then select the template that you lot designed in chapter 7 in the usual manner and making sure that "Update page when template changes" is checked earlier clicking "Create". This is the same process you carried out in affiliate 7 to create new pages using your bespoke site design.

   For those who take arrived at this chapter without reading the previous capacity, and have non created a Dreamweaver template for your site, just create a new web page the fashion you normally do. If yous are not even sure how to exercise that, chances are that you don't know enough to continue. In such a instance, please showtime from chapter 1 of this tutorial. (It's not as bad as information technology sounds; if you work diligently through the capacity, y'all'll get in back here in no fourth dimension.)

3. As usual with a new folio, supervene upon the "Title" field with something suitable such as "Feedback Grade", "Contact Class", "Contact United states of america", "Support" or some such thing. At the meridian of the visible portion of your spider web folio, put a (visible) heading of "Feedback Grade" (or whatever yous used for the Title field).

4. Delete whatever placeholder text you take in the editable region of your page. Go out a blank line or ii where y'all can insert the feedback grade subsequently.

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

6. Ringlet down to the department headed "HTML Code".

7. Click your mouse somewhere in the box in the "HTML Code" section. Every bit before, the contents of the box should be automatically selected when yous do that. If it isn't, use Ctrl+A (or Command+A on the Mac) to select information technology.

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 upwardly.

9. Switch back to Dreamweaver. Y'all should once again be looking at the new page that you take merely created.

10. Click the spot on the page where you desire the form to go. This volition crusade a blinking text cursor to appear in that place. If the text cursor is not on a bare line of its own, hit the ENTER fundamental to brand a blank line, and utilize the pointer primal (on your keyboard) to position the text cursor on that bare line if necessary. That is, past the end of this footstep, your text cursor should be on the blank line where the class is supposed to showtime.

11. Without moving your text cursor, immediately click "View | Lawmaking" from the menu.

12. You should now run across the underlying HTML code of your web folio. Locate your (blinking) text cursor. It should be on a line that says "<p>&nbsp;</p>". To be precise, the cursor should be immediately later "<p>" and earlier "&nbsp;</p>" on that line.

    Use the arrow keys on your keyboard to movement the text cursor to the end of that same line. That is, position the cursor so that it is only subsequently "<p>&nbsp;</p>" on the same line.

13. Click "Edit | Paste" from the Dreamweaver bill of fare.

14. The HTML code created by the magician will exist inserted at that spot.

    Click "View | Design" from the bill of fare.

At this point, y'all should be able to see the feedback form fields on your web folio.

How to Customize the Advent of the Feedback Form

You will at present customise the appearance of the form so that information technology suits the pattern of your web folio. Note that yous do NOT demand to do this if the form already looks fine on the page. The code created by the Feedback Form Magician is designed to work out-of-the-box without needing any further tinkering. If yous don't want to change anything, just move on to the side by side section.

The form obeys the same CSS rules as the rest of your web page. Every bit such, you tin use the techniques taught in the earlier chapters of this tutorial to alter the font, text size, and colours. I will not repeat those steps hither, since you can easily return to the relevant chapters if yous've forgotten how to do them. Instead I volition focus on things y'all haven't learnt all the same, similar how to adjust the widths of the diverse fields in your grade and how to change the words appearing on the button at the bottom of the form.

Please annotation that the widths and heights of the course fields are merely visual gimmicks. They do non affect how much information your visitors tin can enter into your form. Fifty-fifty if you create very narrow fields, your visitors can still enter long names, email addresses and comments. The web browser volition automatically curl to allow them to type whatever they want to type. All the same, information technology'south all the same useful to know how to adjust the field widths so that yous can make the form blend aesthetically with the residue of your page.

• How to Widen the Proper noun and Email Address Fields

  Click the field that y'all want to make wider (or narrower). For example, if you want to widen the Name field, click the box for "Name" one time to select information technology. (Notice that I said to click the box, not the discussion "Name" on the page.)

  The PROPERTIES panel at the lesser of the Dreamweaver window will now exist filled with things specific to that field. Locate the value for "Char width" in that panel. It should currently say "39", which means that the "Name" or "Email accost" field that you selected has a current width of 39 characters. If you want the field to be broader, so that information technology is (say) 50 characters broad, click the 39 to put your text cursor in that box, then replace that number with 50 (or whatever number you actually want to apply). Hit the ENTER key afterwards typing your new number. The change should be reflected on your page as before long as y'all do that.

  If the field is however not broad plenty, or if it is now too broad, practise the same thing and change the number till y'all're satisfied with the results. Remember that this modify is purely aesthetic, then don't stress yourself out trying to notice the perfect width (not that in that location's such a thing). Your visitors volition be able to enter any they want into your form even if what they have to say is much longer than the width yous allocate. Simply make a decision on how broad y'all want the field to exist, and stick to it.

  Y'all'll probably want to repeat the higher up procedure with the other field also, so that both the Name and E-mail Address fields have the same width. (There'southward no requirement for this, but almost people like their fields to accept 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 alter the width and summit of the Comments box. To do this, click the box once to select it. Once more, detect that I said to click the box, non the give-and-take "Comments".

  The default values for the Comments box should fill the PROPERTIES console at the bottom of the Dreamweaver window. This time, however, there are ii values that yous tin change in that console: 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, striking the ENTER key after each change, till you are satisfied with the results.

  Note that the version of Dreamweaver I used has a problems that surfaces when you alter the "Num lines" field to a number bigger than the original. Later on hit the ENTER key, the Comments box volition indeed get bigger, but the layout will not arrange to accommodate it. As such portions of the Comments box, along with the "Send Feedback" push button, may flow off the page, overlapping your footer (and beyond). This visual glitch will disappear when you save your page afterward. But don't salvage the page just yet. Either ignore the glitch for the time existence or don't change the superlative of the box. (Information technology'southward non like the height of the box matters; your visitors can probably still write an unabridged novel in that small-scale box.) One time once more (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 lot inclined to ignore my suggestions, and are nearly to save the page simply to get rid of the visual glitch, make certain you read my instructions below on the right filename to apply for this folio. Otherwise you'll run into more serious problems than this temporary visual glitch.)

  If y'all 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 Modify the Words Displayed on the Transport Feedback Push button

  The words "Send Feedback" on the button at the bottom of your feedback form can be changed if y'all prefer it to say something else. To use a different gear up of words, click the button in one case to select it. (Annotation: even if yous experience the visual glitch I mentioned above as a effect of your resizing the meridian of the Comments box, you should even so exist able to find the "Send Feedback" push button somewhere on the screen and click it. Information technology will probably not appear in the correct position as a result of the Dreamweaver bug, but information technology should nevertheless exist selectable.)

  When you exercise 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 any else yous want.

• Things You lot Should NOT Change

  For those of you who are compulsive customisers, who feel an irresistable urge to modify everything, please annotation that there are sure things in the grade that yous should Not change. Changing those things will cause the course to fail to work correctly.

  The full general principle is that you should only change things that are visible on your web folio. That is, you can change things similar colour, size, widths, height, and even the words that appear on the page itself. Yes, you tin even modify the words "Proper name:", "E-mail accost:" 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 diverse fields, there are other internal values for those form fields autonomously from those displayed on your site. For example, when yous clicked the Proper noun, Electronic mail accost and Comments fields on your page to select them, you may take noticed that other values like "fullname", "email" and "comments" were likewise shown in the Backdrop panel. These words must Non be inverse, non even to translate them to some other linguistic communication. 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 grade script). If you change them, things volition get awry. Having said that, y'all shouldn't demand to change those values anyway, since they are not actually visible on your web page.

How to Save the Feedback Form Correctly

In one case you've finished customising the form, click "File | Save As...".

Blazon "feedback.html" (without the quotes) into the "File name" field and click the "Relieve" button. Do NOT use whatever other name. Practise NOT utilize capital letter (or uppercase) letters, or innovate spaces into the name. But use the name every bit-is. This was the proper name that you supplied to the Feedback Form Magician earlier, and the proper name was embedded into the script (computer program) it generated. This is also the same name y'all used in the navigation bill of fare yous created in chapter six. Changing the proper name at this bespeak will break a lot of things.

Click the "Save" push button.

Now click "File | Shut" from the carte to close the feedback form folio.

(Optional) If you lot wish, yous can switch back to your web browser and shut the tab containing the results from the Feedback Form Wizard. At this point, yous've completed integrating the Feedback Form Magician'south output into the pages of your site, so you don't need it any more than. Your job is still not done, though. You still need to create the "Give thanks You" and "Error" pages needed past your feedback form system. This will be washed next.

How to Create the Auxiliary Pages for the Feedback Form

Every bit yous have probably already realised, from experimenting with the feedback form demo earlier, the "Thank You" and "Mistake" pages are just straightforward web pages, much like your home page, site map and "About" page that you created in the earlier capacity.

The "Thank you" page is the web folio that is displayed later your visitors click the "Transport 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 as well accept this opportunity to thank their visitors for their comments.

Create the folio the usual way you create a new folio based on your site'south template. Replace the Title field with something like "Feedback Sent" or "Cheers" or the like. Then in the main visible portion of your spider web page, put a message like the post-obit:

Message Sent

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

Actually, you can say whatever you lot want. The higher up is just to give you an thought of what to put on the page. There are no rules as to what you must say. Salvage the folio with a filename of "thankyou.html" (without the quotes). Once again, don't change the proper name in any fashion: utilize the exact diction without whatsoever capital (majuscule) messages or spaces. Changing the name at present will issue in your visitors receiving an unfriendly "404 File Not Institute" error when they click the "Send Feedback" button.

Once y'all've finished with the "Cheers" page, create the "Error" folio from your site's template. This page is displayed when your visitors click the "Send Feedback" button without entering annihilation into one or more of the form fields. For example, if they leave the "Email accost" field of the form blank, they volition get this folio instead of the "Thank you" page.

As such, your Error folio should have a message telling your visitors to return to the grade to complete all the fields before clicking the "Ship Feedback" push. For example, you lot tin say something similar the following:

Mistake Sending Message

Delight complete all the fields in the form before clicking the "Send Feedback" push. Click the "Dorsum" button in your browser to return to the form to fix the mistake.

As before, remember to change the Title field of the page to something like "Error" or "Fault Sending Message". Relieve the file as "error.html", without the quotes and without modifying the name in any way. That is, utilize the proper noun as-is, without using uppercase (uppercase) messages or introducing spaces. Call back that this is the name yous supplied the Feedback Form Sorcerer before, and if you modify it now, your visitors will get an unhelpful File Not Found error instead of the Mistake 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 grade, the Thank You page and the Error page in its list of files that demand to be uploaded when y'all do so. Allow the editor to transfer those files to your website.

   Note: if the "Synchronize Sitewide..." menu detail 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 detail, you'll need to set Dreamweaver's Site Manager properly before that menu item volition work properly. Delight read the relevant section in affiliate 1 to detect out how to exercise this. And if you cannot even invoke the Site Managing director, it probably means that you designed your website without creating a site definition in Dreamweaver before you started. In such a case, you may desire to outset from scratch, from the very top of chapter 1. Although this sounds wearisome, information technology may save you a lot more than piece of work in the long run, since at that place is no telling how many other intermediate steps you missed out.

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

   Once Dreamweaver has completed copying the files to your site, burn up your web browser and go your site's abode folio. From there, click the navigation menu push that says "Feedback Form" (or whatever label y'all put on that button). The page containing the feedback form should appear.

   If you become an mistake saying something like "404 File Not Found" (or some other words to that effect), it means the spider web accost (ie, URL) you assigned to that navigation bill of fare button in chapter vii does not lucifer the accost of the form yous just uploaded. This means either the URL you set for the navigation carte push button is incorrect, or that you saved the feedback form under a wrong name (or to the incorrect folder).

   (Annotation: although you tin can get straight to your feedback class in your browser instead of starting from your home page, I'm suggesting this roundabout method so that you tin can test that your link to your feedback form works correctly. Think that you couldn't test this when yous checked the other menu buttons in chapter 7 because your form was not ready at that point, so if y'all don't test it now, you may completely forget to bank check it.)

3. Test if you take named your Mistake folio 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 "Transport Feedback" button. Aye, I know all the fields are empty. That'due south the whole indicate.

   Your Fault folio should appear in your web browser. If then, motility on to the next exam.

   If the Error page doesn't appear, only yous get a "404 File Not Plant" bulletin instead, it means that there is a mismatch between the address y'all gave the Feedback Form Wizard and the actual accost of your error page. This may be the result of your saving the Fault file under a unlike name, or saving it to the incorrect location. Alternatively, y'all could take made a typing error when entering the address of the Error page in the Sorcerer. Yet another possibility is that you failed to upload the Fault file.

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

   Hit the BACK button in your browser to return to the feedback grade from your Error page. Now consummate all the fields in the form before hitting the "Send Feedback" button. This time, you should become your "Cheers" page.

   If y'all go a File Not Found error when y'all submit the grade, it means that there is a name or web address (URL) mismatch somewhere. Equally earlier, there are 4 possible causes for the error: y'all made a mistake naming your "Thank you" file, you saved the file to the wrong folder, you lot supplied the wrong spider web address to the Feedback Form wizard, or you failed to upload the "Thank You" page.

5. Exam if your web host'south email organization delivers letters 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 go far at your email accost. All it means is that the script has successfully passed the e-mail on to the other programs running on your web host's system. The Cheers page merely signals the stop of the script'southward job. Now information technology's up to the balance of the programs running on your web host's computer to transmit the message to your email provider. It likewise depends on the internet connection between your web host and your electronic mail provider, as well equally the speed at which your email provider makes new mail service bachelor for your reading. Since in that location are so many places where things tin can still go wrong, don't assume success until y'all've logged into your email account to check if your test message has arrived.

   If you practice not get your email within a reasonable time, see the checklist of things to practise when your email fails to arrive. How long does information technology typically take for e-mail to exist delivered? Good question. It varies from web host to spider web host, and email provider to e-mail provider. On my current web host, it usually takes a 2nd or so (probably less, but I'1000 not so fast that I tin check my electronic mail in less than one 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 simply 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 meet your e-mail accost from the script code

   Remember that I said earlier that the email address that you lot saw in the feedback form script volition 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'due south your chance to verify that claim. (Actually, even if yous believe my statement, please try the following experiment anyhow, for your ain peace of listen. Don't worry, you won't interruption anything.)

   If your feedback form is at "http://www.example.com/feedback.html", the PHP script that you uploaded should be at "http://world wide web.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 accost into a new tab (or window) in your web browser'south location bar and hit the ENTER cardinal.

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

   Explanation: a spider web server that has PHP installed distinguishes between normal web pages and PHP scripts. If information technology sees a normal web page, like your domicile 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, non documents. It's then up to the PHP script to transport something to the browser if it wants to. When run in this fashion, the script created by the Feedback Form Sorcerer notices that information technology was accessed directly (instead of through the "Send Feedback" button). Since it has nothing to exercise (having no e-mail bulletin to send), it merely tells your visitor'southward spider web browser to go to the class instead. That's why you lot were transported to your feedback class.

   (If you encountered a "404 File Not Found" error instead of your feedback form, yous'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 yous outset created your script.)

If yous run into any problems installing and running the feedback form script, please see the Frequently Asked Questions (FAQ) about the Feedback Form Magician. It may also exist a good idea to go through this affiliate again in example yous missed something.

Congratulations! And Where to Go From Here

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

If you desire to explore Dreamweaver further, you can find tutorials on how to practice specific tasks from my list of Dreamweaver tutorials. Some of those tasks are not covered in this master 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 information technology tin do in this series, you'll exist quickly overwhelmed and get discouraged. As such, the main tutorial focuses on the cadre set of skills and cognition needed by anybody to create a website using Dreamweaver, leaving things that simply a few people want to do to split 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 inside the plan. If you have previously ignored it, because you couldn't understand what it said, you may want to give it another chance. Afterwards all, you take come a long way from the early days (or hours if you lot've completed these 8 chapters in a single session) when yous didn't know anything. Every bit such, things that you couldn't understand before may be a niggling easier to comprehend now.

Website creation does non consist simply of designing web pages. In that location are other things that you demand to look into likewise, even after your website is completed. If yous have non already washed so, I recommend that you lot return to the How to Make / Create Your Own Website: The Beginner's A-Z Guide to take a await at the other things yous may want to do.

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

All the best for your site!

Copyright © 2012-2017 Christopher Heng. All rights reserved.
Go more free tips and articles like this, on spider web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)

Do yous notice this article useful? Yous tin learn of new articles and scripts that are published on thesitewizard.com past 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. Y'all tin can read more than about how to subscribe to RSS site feeds from my RSS FAQ.

Please Exercise Not Reprint This Commodity

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Manufactures

• How to Add a CAPTCHA Test to Your Feedback Grade Script: Reducing Spam in Your Contact Course
• How to Annals Your Own Domain Name
• How to Link Directly to a Line or Section on a Web Page with Dreamweaver
• How to Movement Your Dreamweaver Files to a New Figurer
• How to Make Your Website to Fill an Entire Browser Window with Dreamweaver
• 3 Means of Putting a Search Engine on Your Website
• How to Reserve a Domain Name. Exercise Y'all Need a Web Host if You Want to Reserve a Domain for Future Use?
• The Real Significant of "Unlimited" in Web Hosting

New Articles

• How to Gear up the Acme of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Document on Your Ain (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some other Audio Prune) from a Listing on a Website
• How to Draw a Horizontal Line on a Spider web Folio with Expression Web
• How to Create a Website Free of Accuse
• Why Can't I Make Up Whatever Domain I Want? Is There a Style to Practise Away with a Registrar Birthday?
• What's the Difference Between a Domain Proper name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Blueprint in CSS
• What's the Difference Betwixt a Content Management Organisation (CMS), a Blog, a Web Editor and an Online Site Builder?

Popular Manufactures

• How to Create a Web log
• How to Make / Create a Website: The Beginner's A-Z Guide
• Tips on Choosing a Proficient Domain Proper noun
• Expression Web Tutorial: How to Design a Website with Microsoft Expression Web
• Dreamweaver Tutorial: How to Pattern a Website with Dreamweaver CS6
• BlueGriffon Tutorial: How to Design a Website with BlueGriffon 3
• How to Blueprint and Publish Your Website with KompoZer (free WYSIWYG web editor)
• Free Feedback/Contact Form Sorcerer

How to Link to This Page

To link to this page from your website, but 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 together a Contact Class (Web Form) to Your Website Using Dreamweaver CS5.5

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

morganhinglew38.blogspot.com

Source: https://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-8.shtml