Chapter 9: Create an Email Web Form for Visitors' Feedback
by Christopher Heng, thesitewizard.com
Expression Web 4 is a product for professional Web developers and designers that combine the best of both FrontPage and Visual Studio technologies in a new. Microsoft Expression Web 4 has stopped working.
- Since September 2015, Microsoft Expression Web is no longer developed and supported. Last version, 4.0.1460.0, released in December 2012, can be still downloaded from the Microsoft Download Center.
- Upon its demise, Expression Web 4 (EW4) was posted on Microsoft's Web site as a free download and is still there. (As of July 2020, the download was removed from Microsoft's site but can be found at the WayBack Machine.) I'm still using it to build Web sites. (So are a lot of others.).
Many websites provide a way for their visitors to contact their webmasters. For example, some peopleput their emailaddresses on their sites. Others put up a web form, which visitors can use leave feedback. In this final chapterof the ExpressionWeb tutorial, you will be creating such a form.
This chapter assumes that you know the things covered in the earlier chapters. If this is not true, please start atthe beginning with How toCreate Your Own Website.
Goal of This Chapter
By the end of this chapter, you will have a working contact form. In addition, if you have been following thistutorial from chapter 1, you will also have completed everything, and have a fully-functional multiple-pagewebsite 'live' on the Internet. With this chapter, you will have acquired most of the commonly-used knowledgeneeded to design and maintain a site using Expression Web, and will be able to create more as and when you wish.
You Can't Just Design a Web Form and Expect It to Work
Web forms are tricky beasts for newcomers. Very often, a new webmaster will create a form using his/her favourite('favorite' in US English)web editor, complete with bells and whistles, only to find that the form does absolutely nothing but look pretty.
A form is only one part of a complex machine. An analogy may serve to explain its place in the bigger scheme of things.Let's say that someone decides to create an intelligent computer that can chat with them on lofty matters.They get an empty cardboard box, paint it black, attach pretty buttons on the surface with different labels, such as'Discuss Philosophy', 'Poetry', and 'The Meaning of Life'. But when they press a button, any button, they are greetedwith silence. Creating the user interface (the sleek black exterior and buttons with weighty topics) is well and good,but without an actual engine working its magic beneath the surface, one can click the buttons till they are blueand not get the desired results.
In the same way, a web form is just the user-facing component of a bigger whole. The engine driving the formis a computer program that is custom-built to process the stuff coming out of the form. Designing a form withouthaving a program to handle its output is like putting buttons on a empty cardboard box and expecting those buttons toactually do something.
But don't panic. For the contact form that you'll be adding to your site, you don't actually have to write yourown computer program, nor is programming knowledge necessary. You will be using theFeedback Form Wizard todo the hard work for you.
Components of the Contact Form System
Before you continue with this article, please go to the FeedbackForm Demo and try it out. This will give you an idea of how your contact form system will work. Please do this even ifyou have a lot of experience using web forms. The demo form uses the exact same engine that yours will use, since it was createdusing the Feedback Form Wizard. And don't worry about spamming me with that form; email sent through it is automaticallydeleted, so feel free to test it to your heart's content. Doit now, before continuing with the next paragraph.
From that brief experiment with the form, you will probably notice that the contact form system comprises 3user-visible parts. In actual fact, there many more, but you will only directly deal with the following 4 components.
The Contact Form itself
The web form itself is of course the most obvious part of the system. The Feedback Form Wizard will create this for you,and all you need to do is to plug it into your website. Its appearance (eg, the size of the fields, fonts used, colour, etc)can be customized from within Expression Web.
The Thank You page
This is the page your visitors will see after they successfully submit a message. You will be creating thisyourself in Expression Web.
The Error page
If your visitors fail to enter important information into the form, such as their email address, this page willbe displayed when they try to send the message. (You can see this page in the demo by simply clicking the'Send Feedback' button without entering anything into the form.)
Like the 'Thank You' page, you will create this page in Expression Web.
The Feedback Form Script
The Feedback Form Script is the behind-the-scenes 'brains' of the form. It is actually a computer programthat processes the stuff entered by your visitors and transforms it into an email message.(A 'script' in this context means a computer program.) It then asks the other programs on your web host's computerto send the email.
Yes, you read that right. The script doesn't actually send the email. It doesn't need to. There are programson your web host's computer specially designed to handle email. Many programs on your web host's computer havespecific functions, and they all work together to do complex tasks. It's like the division of labour you find inhuman organisations.
After handing off the message to the other programs on the system, the script then tells your visitor's web browserto go to the 'Thank You' page.
System Requirements
For the contact form to work, the following are required.
Your web host must allow you to run PHP scripts
The script generated by the Wizard is written in a computer language called PHP. (SeeWhat is PHP? if you wantto know more.) For it to work, your website must be placed on a web server (ie, your web host's computer)that has PHP installed.
Your PHP scripts must be allowed to send email
Not only must your web server have PHP installed, it must be configured so that PHP scripts are allowed tosend email. This is generally the case for commercialweb hosts, but is not necessarily true for free ones. Many free web hosts that permit PHP disable itsemail-sending facility, presumably to prevent people from using their system to spam others. As such, if your site ison such a host, your form will probably not work correctly.
Note that when I say 'free web host', I include any situation where you didn't have to pay to have your website hosted.This include the free web hosting that sometimes comes with your Internet broadband connection and the 'starter websites' thatyou get for free when you buy a domain namefrom some registrars.
That said, the feedback form script has been successfully used by thousands of sites on many commercial web hosts.
How to Create a Contact Form
Please follow the instructions below meticulously. Do not skip any step. In addition, I recommend thatyou do not work from memory, even if this is the second or third time you're doing this. Keep thisarticle open in a window (or tab) of your web browser while you work, perhaps even highlighting thestep you're following (just drag your mouse over the relevant sentence to highlight it) so that youremember where you are. It's easy to lose your place in the article because you will beswitching back and forth between windows repeatedly.
Go to the Contact(or Feedback) Form Wizard.
Read the information on that page, and select the 'Create a PHP Feedback Form (Requires PHP 5.2 or above)'option by clicking the radio button. (Actually, that button should already be selected by default, butclick it again if you're not sure.)
Click the 'Go to Step 2' button.
You will arrive at Step 2 of the Wizard. Enter the following.
Email Address
Enter the email address at which you want to receive your visitors' comments. For example, enter 'webmaster@example.com' (without the quotation marks) if that is your email address.
URL of Feedback Form
Enter '
http://www.example.com/feedback.html' (without the quotation marks) into this field, replacing 'www.example.com' with the address of your website. Be sure to use the filename 'feedback.html' since you have already used it in chapters 6 (for your navigation menu) and 7 (site map) to link to this form. If you change the name now, all your links will be broken.Even if you have not followed my tutorial from chapter 1, it's easiest to just use '
feedback.html' as the filename, since I will assume that you have used that name in the rest of this chapter. If you use a different name, you will have to make sure that all the rest of the addresses mentioned here match up, or your form will not work.Note that the use of '
feedback.html' as the filename does not force you to call your form 'Feedback Form'. You can call it anything you like, eg, 'Contact Form', 'Contact Us', 'Support', 'Feedback', 'Help', 'Comments', 'Drop a Note' or whatever. It's just a filename; it has nothing to do with what you call your form, or how you describe it to your visitors. That is, nothing stops you from naming the file 'feedback.html' and calling it a 'Support Form' or 'Contact Form'. As such, I strongly recommend that you just use 'feedback.html' for the filename. The procedure in this chapter is already complicated enough without your having to mentally juggle a name that does not match the tutorial's instructions.If you choose to ignore my suggestions and change the filename anyway, please remember the recommendations given in How to Create Good Filenames for Your Web Pages and not to use capital letters or spaces.
URL of 'Thank You' Page
Enter '
http://www.example.com/thankyou.html' into this field, without the quotation marks and after replacing 'www.example.com' with your site's actual web address. Once again, the same stuff about changing filenames that I mentioned above applies.URL of Error Page
Enter '
http://www.example.com/error.html' into this field. As usual, don't include the quotation marks, and use your actual web address in place of my 'www.example.com' placeholder. And again, remember what I said above about changing filenames.
Scroll down and read the 'Terms of Use: Licence Agreement (Required)' section. If you agree to theconditions, indicate it in the form and click the 'Generate script' button.
The Wizard will then create a script and form for your site using the information you supplied. Do NOTclose the page that is displayed. Little big workshop - the evil dlc for mac. Leave it open as you work on the next few steps.
How to Save the Contact Form Script Without Introducing Problems
If you have any file open in Expression Web, close it with 'File | Close' from the menu. That is,for every file that is open, click the 'File' menu followed by the 'Close' item in the drop down menuthat appears.
Click 'File | New | PHP' from the menu.
A seemingly blank page will appear. Alas, the page isn't really blank, so we will have to fix it.
Click the 'Code' tab at the bottom of the blank page to switch to Expression Web's code view.
You will see the default HTML code that Expression Web inserted into the page. Click 'Edit | Select All'from the menu to highlight everything.
Hit the Delete key on your keyboard. This will remove the text.
Switch back to your browser. Click your mouse once in the box located in the 'Feedback Form Script'section. This will automatically highlight everything there.
Click your right mouse button while the pointer is hovering over the highlighted area. Click'Copy' in the menu that pops up.
Switch back to Expression Web and click 'Edit | Paste' from the menu.
A whole bunch of seemingly gibberish text will appear on the screen. Do NOT change anything, noteven to add blank lines. Although some of the words look like English words, the entire thingis a computer program. Modifying anything may lead to the script failing to work correctly later.
For those of you concerned that your email address is embedded in this script, and that your visitorsmight see it, don't worry. As long as your site is on a system with PHP, nothing on this page willbe 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 access it directly. They'll just end up being suppliedyour feedback form instead. If you don't believe me, you can test it yourself later when you'vesuccessfully installed everything. Instructions for this (as well as explanations why this is the case)are provided in the section on testing below.
Click the 'Design' tab at the bottom of the window. You should againsee a blank page. Do NOT type anything here. Although it looks blank, it's still the feedback form scriptyou just saw. Anything you type here will break the script.
Click 'File | Save As..' from the menu.
Type 'feedback.php' (without the quotation marks) into the 'Save As' dialog box that appears.
Click the 'Save' button.
Immediately click 'File | Close' from the menu to close the file before you accidentallyalter something.
How to Insert the Contact Form
The contact form proper is simply the user interface that your visitors will interact with.It should be placed on a normal web page, like those that you have created in the previouschapters. As such, the initial few steps will be very familiar to you, since you haverepeatedly used them to create the other pages of your site in the last few chapters.
Click 'File | New | Create from Dynamic Web Template..' in Expression Web.
Click 'index.dwt' or whatever your template file is called.
Click the 'Open' button.
Click the 'Close' button in the '(1 of 1) files updated' dialog box that appears.
Click 'File | Properties' to bring up the Page Properties dialog box.
Change the Title field to whatever you want to call the page. For example, if you want to callthe page 'Contact Form', type the latter (without the quotation marks, of course) into the Title field.
Click the 'OK' button.
Remove the content in the right column and put 'Contact Form' (or 'Feedback Form' or 'Support' orwhatever you like) at the top of the page as a heading.
Switch to your browser and scroll down the page to the section with the heading 'HTML Code'.
Click once in the box in that section. As before, the contents of the box should be immediatelyhighlighted.
Click your right mouse button and select 'Copy' from the menu that appears.
Switch back to Expression Web. Put the text cursor at the spot on the page where you wantthe form to appear, by clicking your mouse pointer there.
Click the 'Code' tab under your page to switch to Expression Web's code view.
Look for your text cursor. (Don't click on the page itself to scroll up or down, or youmay accidentally relocate the text cursor. Instead, click the scroll bars on the right side andat the bottom to move the page up and down.)
If your cursor was previously in an empty paragraph, the text cursor will probably besomewhere in the midst of '
' (probably after the'
', and the wholeline will be underneath your heading (eg, '' and before 'Contact Form
If your text cursor is within '
', move it tothe end of the line, so that it is just after the '' on that line.Otherwise, go to the next step.Click 'Edit | Paste' from the menu. The code you copied earlier from your browser should appear.
Click the 'Design' tab at the bottom of the page to return to the Design view.
You should see the form on your page.
If you find that the fields are too low on the page, with too much space between yourtitle and the form, it means that there is an empty paragraph in-between. Click theempty space above the form fields to put your cursor in the empty paragraph and hit theBackspace key on your keyboard to get rid of it.
How to Customize the Appearance of the Form
If you like, you can customize the appearance of the form so that it fits in with theexisting design of your web page. This is OPTIONAL. You don't have to do this if the formalready looks fine on the page. The code created by the Feedback Form Wizard is designedto work out-of-the-box without needing any further tinkering. If you don't want to changeanything, just skip to the next section.
The form obeys the same CSS rules as the rest of your web page. As such, you can use thetechniques taught earlier to change the font, text size, and colours. I will not repeatthose steps here, since you can easily return to the earlier chapters if you've forgottenhow to do them. Instead I will focus on things you haven't learnt yet, like how to adjustthe widths of the various fields in your form and how to change the words appearing onthe button at the bottom of the form.
Another thing that you should know is that the widths and heights of the form fields aremerely visual gimmicks. They do not affect how much information your visitors can enter.Even if you are parsimonious with space, and create extremely narrow fields,your visitors can still type entire novels into the name, email and comments fields. Theweb browser will automatically scroll to allow them to insert more text.Nevertheless, it's still useful to know how to adjust the field widths so that you canmake the form blend aesthetically with the rest of your page.
How to Change the Width of the Fields
Click the field in question once to select it. For example, if you are changing the Name field,click the box for Name once.
Look at the Tag Properties panel on the left of the Expression Web window (see picture).
Click the 'Style' line in that panel once to select it. This will bring up the clickable '
..'on the rightmost portion of that line. Click it to invoke the 'Modify Style' dialog box.Click the 'Position' line in the left column.
If you want the field to occupy (say) 70% of your right column, enter '70' (without the quotation marks)into the 'width' field, then click the drop down box beside it and select '%'. Click the 'OK' when youare done. Note that if you want your form fields to resize automatically to different browser window sizes,you should use the '%' unit of measure and not 'px' (pixels) or any of the other units.
If you find that the field is still too short, or perhaps it's now too long, just redo the above stepsand change '70' (or whatever you used before) to another number. You probably shouldn't use too largea number though, since there needs to be space for the words 'Name' or 'Email' on its left.
How to Adjust the Height of the Comments Field
The procedure for changing the height of the Comments field is similar to that for modifying its width.Bring up the Modify Style dialog box as before (see the above section) and click the 'Position' linein the left column.
You should not use '%' as a unit for the height. Instead, use a unit like 'em'. For example, if you wantyour comments box to occupy approximately 15 lines of text, enter '15' (without the quotation marks) intothe 'height' field, and select 'em' from the drop-down box beside it. Then click the 'OK' button.
How to Change the Text on the 'Send Feedback' Button
To change the words displayed on the button below your form, click it once to select it.
Notice that the 'Tag Properties' panel now has a field called 'value' with the words 'Send Feedback'in the space beside it. Click to put your text cursor into that field, and change it to say whateveryou want, then hit the ENTER key. For example, if your form is called 'Contact Form' or 'Support',you may want the button to read 'Send Message' or something like that.
How to Change the Displayed Labels for the Name, Email and Comments Field
There's nothing special about the words 'Name', 'Email' and 'Comments' that come before thevarious fields on the page. They are just normal text and can be modified the usual way towhatever you want. For example, if your form is called 'Technical Support', and you feel that'Comments' is not the appropriate term to use here, feel free to change it to 'Message' orsomething else.
Things You Should NOT Change
As you clicked the various fields to select them, you may have noticed the'id', 'name' and 'type' fields in the Tag Properties panel. Do not change any of the valuesin those fields. I know that the 'name' field, particularly, says things like 'email', 'fullname'and 'comments', which may awake in the hearts of obsessive compulsive customizers theoverwhelming urge to change them, so that they match the labels displayed on the page.However, these are internal values used by the form to interface with the script. If you alter them,things will go awry. In any case, you shouldn't need to change them, since they are not actuallyvisible on your web page.
How to Save the Feedback Form Correctly
When you are done tinkering with the form's appearance, click 'File | Save As..' from themenu. In the 'Save As' dialog box that appears, type 'feedback.html' (without the quotation marks)into the 'File name' field and click the 'Save' button.
Now click 'File | Close' from the menu.
(Optional) If you wish, you may switch back to your web browser and close the tab containingthe Feedback Form Wizard's results page. At this point, you have finished integrating theWizard's output into 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.This will be done next.
How to Create the Thank You and Error Pages
As you have probably already realised, from experimenting with thefeedback form demo earlier,the 'Thank You' and 'Error' pages are just straightforward web pages, much like your home page,site map and 'About' page.
The 'Thank You' page 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. Otherwisethey'll think that nothing has happened and click the button again, with the end result thatyou'll get multiple copies of the same message. Most webmasters also take this opportunityto thank their visitors for their comments.
Create the page the usual way based on your site's template. Remember toreplace the Title field in 'File | Properties' with something like 'Message 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 write.There are no rules as to what you must say.
Save the page with a filename of 'thankyou.html' (without the quotation marks). Do not acceptthe default name that Expression Web suggests for that file. Like all the filenamesmentioned in this chapter, it must match exactly what you supplied to the Feedback Form Wizard,without even any difference in capitalisation (case). Otherwise your visitors will receive 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 anythinginto one or more of the form fields. For example, if they leave the 'Email address' field blank, theywill arrive here 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 allthe 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' buttonin your browser to return to the form to fix the error.
As before, remember to change the Title field in 'File | Properties' to something like 'Error' or'Error Sending Message'. Save the file as 'error.html' (without the quotation marks).
Publishing the Feedback Form, Script, and Support Pages
Save and close all the files in Expression Web.
Although you can click 'Site | Publish All Files to [your web host name]' like you did inchapter 8,it may be faster to use 'Site | Publish Changed Files to [your web host name]'instead. The first option forces Expression Web to upload all the files, both old and new,to your web host. The second causes it to check if the file already exists on your site,and only upload them if it doesn't.
In most cases, since you have already done the initial upload of your files, you can probablyget away with using 'Site | Publish Changed Files [etc]'. If you have a lot of files, this maysave you time. However, if you suspect that Expression Web thinks that yourweb server's copy is the same as what you have on your disk, but you know it isn't, you canalways force it to re-upload everything with 'Site | Publish All Files'.
For now, just click 'Site | Publish Changed Files to [your web host name]' from the menu.
If both 'Publish All Files' and 'Publish Changed Files' are disabled (greyed out), it probablymeans that you did not set up Expression Web's site settings in chapter 8. Return tochapter 8and get that sorted out first.
Note that using this shortcut procedure, where you directly invoke 'Publish All Files' or'Publish Changed Files' without first using 'Site | Publishing' means that you won't getto see the list of files on your web server on the right hand side, the way you didin chapter 8.
For the purpose of this chapter, since publishing a feedback form script and its supportingfiles is often tricky for newcomers, we really do want to make surethat all the files have been transferred correctly.
As such, invoke 'Site | Publishing' now, and click 'Connect to the current publishing destination'link.
Look in the right column and make sure you see the following files:
error.htmlfeedback.htmlfeedback.phpthankyou.html
You should also see your other website files, like '
index.html', 'sitemap.html','style.css' and 'tswnavbar.css' in that same directory.If one or more of the above files are not present, you have made a mistake somewhere. Your contact formwill not work correctly in such a state. Check your left column to see if you have actually saved thefiles in the proper location on your computer. If so, publish using 'Site | Publish All Files [etc]'this time. On the other hand, if you do not see one or more of those files in either the left orright column of the Site View's Publishing tab, go back and follow my procedure above to create them.
Note that you can leave this 'Publishing' tab and return to your normal Site View panel by clicking the'Folders' tab at the bottom of the window (see picture).
How to Test the Contact Form
Since a feedback form is more than just a normal web page, there are many additional things you need to testbefore you can be sure it works as it should.
Check that your navigation menu button links correctly to your form
Go to the home page of your website. Click the 'Contact' button (or 'Feedback' or 'Support' or whatever you called it)in your navigation menu . You should arrive at the form page. If you get an error message saying404 File Not Found (or words to that effect),it means that you gave your contact form a different name from that used in your navigation menu button. Either fixthe link in your navigation menu so that it points to the actual file you created (see chapter 6 for this), or redothis chapter and give your feedback form page the same filename you used in the menu.
Check that your site map links correctly to your form
If you have put a link to your contact form in your Site Map, go to the latter and click that link.You should end up at the form again. If you don't, you have a mismatch between URL you used in the Site Mapand the one you actually used when you created the file. Fix it so that they both refer to the same address.And make sure that it matches the one you gave to the Wizard too.
Check that you named the Error page correctly
You are now ready to test the contact form. Click the 'Send Feedback' button. Yes, I know you haven'tentered anything into any of the fields. That's the whole point.
Since all the required fields on the page were empty, you should end up at the Error page you created earlier. If so,all is fine. That is the way the form is supposed to work. Go to the next test.
If you get a File Not Found error, it means that the URL you gave to the Feedback Form Wizard did not match theURL of your Error page. This may mean that you gave your Error page a different filename from that which you specified tothe Wizard. Or you may have made a typographical error when you typed the URL of your Error pageinto the Wizard. Unfortunately, this error probably means that you have to redo this chapter again.
Check that you named the Thank You page correctly
Return to the contact form. Now complete all the fields there and click the 'Send Feedback' button.
You should end up at the 'Thank You' page. If so, go to the next test.
If you get a File Not Found error, it means you have a URL mismatch. The address you furnished the Wizard did notmatch the actual address of your Thank You page. Redo this chapter to fix the error. This time, check carefullythat the URLs you type into the Wizard are correctly entered with no typos. (Really check, letter for letter.)In addition, use the filenames exactly as I suggested in this chapter; don't even vary the names by putting spaces orcapital letters in the names. Those are the causes of many problems with URLs not matching.
Check that you actually received the mail you sent
Just because the Thank You page is shown does not mean that your email will arrive safely.As mentioned earlier, the Thank You page merely indicates that the script has handed themessage to the specialised email programs running on your web host's computer. It doesn't mean that those programs havedelivered your message or anything like that. In fact, you will even get the Thank You page if you made a typing errorin your email address and your message goes nowhere because nobody can deliver mail to a non-existent address.
Different web hosts also deliver mail sent from web forms at different rates. And the speed at which itappears in your account depends on whether the message is sent to a mailbox on the same web hosting account asyour website, or to an external emailservice like Gmail. It's generally faster to deliver to a mailbox on your web host.
If you do not get your test message after waiting at least a few hours, see thechecklist of things to do when you don't getyour email. You may also want to try the obvious step of making sure that you entered your email address correctlyinto the Wizard.
For the suspicious: how to verify that visitors cannot see your email address from the script code
Remember that I said earlier that the email address that you saw in the script will not bedisplayed in your visitors' web browsers even if they specifically put its URL in theaddress bar? Well, if you didn't believe me then, now is 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 contact form is at '
http://www.example.com/feedback.html', the PHP script thatyou uploaded should be at 'http://www.example.com/feedback.php'. That is, take the URL ofyour contact form, and change the part at the end that says '.html' to '.php'.Type that new address into a tab (or window) in your browser's address bar and hit the ENTER key.You should be magically transported to your contact form. That is, you will not see the program code.In fact, the script code was never at any moment transmitted to your browser.
Explanation: a web server that has PHP installed distinguishes between normal web pagesand PHP scripts. If it sees a normal web page, like your home page, it sends that document to the browser.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 to be run on the web server itself, not documents tobe sent. 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 FeedbackForm Wizard notices that it was accessed directly (instead of through the 'Send Feedback' button). Since it'stwiddling its thumbs, with no email to send, it simply tells your visitor's browser to go to theform instead. That's why you ended up at your contact form.
(If you encountered a '404 File Not Found' error instead of the form, you've either typed the wrongURL into the browser, or you supplied the wrong address for the 'URL of Feedback Form' field in theWizard when you first created your script.)
Congratulations and Where to Go From Here
Congratulations! You have not only successfully installed a feedback form on your website (a task considered one ofthe most difficult among new webmasters), you have also completed the design and creation of your entire website.And it's not some trivial play site, but a multi-page, fully functional website with a professional looking navigationmenu, a working contact form and site map.
Before you go and celebrate your latest accomplishment, I would appreciate if you would take the time to tell others aboutthesitewizard.com by linking to it. Some linkingsuggestions can be found here, but feel free to link to any page you like. For example, if you likemy guide on creating a website,go ahead and link directly to that. Please don't forget thesitewizard.com as you move on from here with your newfoundskills as a webmaster (and your new site).
Incidentally, you can also find additionalarticles on Expression Web. Those guides are not included in this main tutorial series because they dealwith things that not everyone needs to do. Expression Web is a powerful editor with lots of features. If I includedeverything here, you will be overwhelmed and become discouraged. As such, this main tutorial concentrateson the core set of skills and knowledge needed to design a site, leaving the extra features that only a few peoplemay want to separate standalone articles.
Microsoft Web Expressions 4
In addition, there is more to website creation than simply designing its pages. A few of the other things to do arementioned in the guide on How toCreate a Website, but you can also take a look at my SiteMap to see the list of other articles that deal with frequently required webmaster tasks.
All the best for your site!
Copyright © 2016-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Microsoft Web Expressions 4 Download
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All Expression Web Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
The form obeys the same CSS rules as the rest of your web page. As such, you can use thetechniques taught earlier to change the font, text size, and colours. I will not repeatthose steps here, since you can easily return to the earlier chapters if you've forgottenhow to do them. Instead I will focus on things you haven't learnt yet, like how to adjustthe widths of the various fields in your form and how to change the words appearing onthe button at the bottom of the form.
Another thing that you should know is that the widths and heights of the form fields aremerely visual gimmicks. They do not affect how much information your visitors can enter.Even if you are parsimonious with space, and create extremely narrow fields,your visitors can still type entire novels into the name, email and comments fields. Theweb browser will automatically scroll to allow them to insert more text.Nevertheless, it's still useful to know how to adjust the field widths so that you canmake the form blend aesthetically with the rest of your page.
How to Change the Width of the Fields
Click the field in question once to select it. For example, if you are changing the Name field,click the box for Name once.
Look at the Tag Properties panel on the left of the Expression Web window (see picture).
Click the 'Style' line in that panel once to select it. This will bring up the clickable '
..'on the rightmost portion of that line. Click it to invoke the 'Modify Style' dialog box.Click the 'Position' line in the left column.
If you want the field to occupy (say) 70% of your right column, enter '70' (without the quotation marks)into the 'width' field, then click the drop down box beside it and select '%'. Click the 'OK' when youare done. Note that if you want your form fields to resize automatically to different browser window sizes,you should use the '%' unit of measure and not 'px' (pixels) or any of the other units.
If you find that the field is still too short, or perhaps it's now too long, just redo the above stepsand change '70' (or whatever you used before) to another number. You probably shouldn't use too largea number though, since there needs to be space for the words 'Name' or 'Email' on its left.
How to Adjust the Height of the Comments Field
The procedure for changing the height of the Comments field is similar to that for modifying its width.Bring up the Modify Style dialog box as before (see the above section) and click the 'Position' linein the left column.
You should not use '%' as a unit for the height. Instead, use a unit like 'em'. For example, if you wantyour comments box to occupy approximately 15 lines of text, enter '15' (without the quotation marks) intothe 'height' field, and select 'em' from the drop-down box beside it. Then click the 'OK' button.
How to Change the Text on the 'Send Feedback' Button
To change the words displayed on the button below your form, click it once to select it.
Notice that the 'Tag Properties' panel now has a field called 'value' with the words 'Send Feedback'in the space beside it. Click to put your text cursor into that field, and change it to say whateveryou want, then hit the ENTER key. For example, if your form is called 'Contact Form' or 'Support',you may want the button to read 'Send Message' or something like that.
How to Change the Displayed Labels for the Name, Email and Comments Field
There's nothing special about the words 'Name', 'Email' and 'Comments' that come before thevarious fields on the page. They are just normal text and can be modified the usual way towhatever you want. For example, if your form is called 'Technical Support', and you feel that'Comments' is not the appropriate term to use here, feel free to change it to 'Message' orsomething else.
Things You Should NOT Change
As you clicked the various fields to select them, you may have noticed the'id', 'name' and 'type' fields in the Tag Properties panel. Do not change any of the valuesin those fields. I know that the 'name' field, particularly, says things like 'email', 'fullname'and 'comments', which may awake in the hearts of obsessive compulsive customizers theoverwhelming urge to change them, so that they match the labels displayed on the page.However, these are internal values used by the form to interface with the script. If you alter them,things will go awry. In any case, you shouldn't need to change them, since they are not actuallyvisible on your web page.
How to Save the Feedback Form Correctly
When you are done tinkering with the form's appearance, click 'File | Save As..' from themenu. In the 'Save As' dialog box that appears, type 'feedback.html' (without the quotation marks)into the 'File name' field and click the 'Save' button.
Now click 'File | Close' from the menu.
(Optional) If you wish, you may switch back to your web browser and close the tab containingthe Feedback Form Wizard's results page. At this point, you have finished integrating theWizard's output into 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.This will be done next.
How to Create the Thank You and Error Pages
As you have probably already realised, from experimenting with thefeedback form demo earlier,the 'Thank You' and 'Error' pages are just straightforward web pages, much like your home page,site map and 'About' page.
The 'Thank You' page 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. Otherwisethey'll think that nothing has happened and click the button again, with the end result thatyou'll get multiple copies of the same message. Most webmasters also take this opportunityto thank their visitors for their comments.
Create the page the usual way based on your site's template. Remember toreplace the Title field in 'File | Properties' with something like 'Message 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 write.There are no rules as to what you must say.
Save the page with a filename of 'thankyou.html' (without the quotation marks). Do not acceptthe default name that Expression Web suggests for that file. Like all the filenamesmentioned in this chapter, it must match exactly what you supplied to the Feedback Form Wizard,without even any difference in capitalisation (case). Otherwise your visitors will receive 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 anythinginto one or more of the form fields. For example, if they leave the 'Email address' field blank, theywill arrive here 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 allthe 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' buttonin your browser to return to the form to fix the error.
As before, remember to change the Title field in 'File | Properties' to something like 'Error' or'Error Sending Message'. Save the file as 'error.html' (without the quotation marks).
Publishing the Feedback Form, Script, and Support Pages
Save and close all the files in Expression Web.
Although you can click 'Site | Publish All Files to [your web host name]' like you did inchapter 8,it may be faster to use 'Site | Publish Changed Files to [your web host name]'instead. The first option forces Expression Web to upload all the files, both old and new,to your web host. The second causes it to check if the file already exists on your site,and only upload them if it doesn't.
In most cases, since you have already done the initial upload of your files, you can probablyget away with using 'Site | Publish Changed Files [etc]'. If you have a lot of files, this maysave you time. However, if you suspect that Expression Web thinks that yourweb server's copy is the same as what you have on your disk, but you know it isn't, you canalways force it to re-upload everything with 'Site | Publish All Files'.
For now, just click 'Site | Publish Changed Files to [your web host name]' from the menu.
If both 'Publish All Files' and 'Publish Changed Files' are disabled (greyed out), it probablymeans that you did not set up Expression Web's site settings in chapter 8. Return tochapter 8and get that sorted out first.
Note that using this shortcut procedure, where you directly invoke 'Publish All Files' or'Publish Changed Files' without first using 'Site | Publishing' means that you won't getto see the list of files on your web server on the right hand side, the way you didin chapter 8.
For the purpose of this chapter, since publishing a feedback form script and its supportingfiles is often tricky for newcomers, we really do want to make surethat all the files have been transferred correctly.
As such, invoke 'Site | Publishing' now, and click 'Connect to the current publishing destination'link.
Look in the right column and make sure you see the following files:
error.htmlfeedback.htmlfeedback.phpthankyou.html
You should also see your other website files, like '
index.html', 'sitemap.html','style.css' and 'tswnavbar.css' in that same directory.If one or more of the above files are not present, you have made a mistake somewhere. Your contact formwill not work correctly in such a state. Check your left column to see if you have actually saved thefiles in the proper location on your computer. If so, publish using 'Site | Publish All Files [etc]'this time. On the other hand, if you do not see one or more of those files in either the left orright column of the Site View's Publishing tab, go back and follow my procedure above to create them.
Note that you can leave this 'Publishing' tab and return to your normal Site View panel by clicking the'Folders' tab at the bottom of the window (see picture).
How to Test the Contact Form
Since a feedback form is more than just a normal web page, there are many additional things you need to testbefore you can be sure it works as it should.
Check that your navigation menu button links correctly to your form
Go to the home page of your website. Click the 'Contact' button (or 'Feedback' or 'Support' or whatever you called it)in your navigation menu . You should arrive at the form page. If you get an error message saying404 File Not Found (or words to that effect),it means that you gave your contact form a different name from that used in your navigation menu button. Either fixthe link in your navigation menu so that it points to the actual file you created (see chapter 6 for this), or redothis chapter and give your feedback form page the same filename you used in the menu.
Check that your site map links correctly to your form
If you have put a link to your contact form in your Site Map, go to the latter and click that link.You should end up at the form again. If you don't, you have a mismatch between URL you used in the Site Mapand the one you actually used when you created the file. Fix it so that they both refer to the same address.And make sure that it matches the one you gave to the Wizard too.
Check that you named the Error page correctly
You are now ready to test the contact form. Click the 'Send Feedback' button. Yes, I know you haven'tentered anything into any of the fields. That's the whole point.
Since all the required fields on the page were empty, you should end up at the Error page you created earlier. If so,all is fine. That is the way the form is supposed to work. Go to the next test.
If you get a File Not Found error, it means that the URL you gave to the Feedback Form Wizard did not match theURL of your Error page. This may mean that you gave your Error page a different filename from that which you specified tothe Wizard. Or you may have made a typographical error when you typed the URL of your Error pageinto the Wizard. Unfortunately, this error probably means that you have to redo this chapter again.
Check that you named the Thank You page correctly
Return to the contact form. Now complete all the fields there and click the 'Send Feedback' button.
You should end up at the 'Thank You' page. If so, go to the next test.
If you get a File Not Found error, it means you have a URL mismatch. The address you furnished the Wizard did notmatch the actual address of your Thank You page. Redo this chapter to fix the error. This time, check carefullythat the URLs you type into the Wizard are correctly entered with no typos. (Really check, letter for letter.)In addition, use the filenames exactly as I suggested in this chapter; don't even vary the names by putting spaces orcapital letters in the names. Those are the causes of many problems with URLs not matching.
Check that you actually received the mail you sent
Just because the Thank You page is shown does not mean that your email will arrive safely.As mentioned earlier, the Thank You page merely indicates that the script has handed themessage to the specialised email programs running on your web host's computer. It doesn't mean that those programs havedelivered your message or anything like that. In fact, you will even get the Thank You page if you made a typing errorin your email address and your message goes nowhere because nobody can deliver mail to a non-existent address.
Different web hosts also deliver mail sent from web forms at different rates. And the speed at which itappears in your account depends on whether the message is sent to a mailbox on the same web hosting account asyour website, or to an external emailservice like Gmail. It's generally faster to deliver to a mailbox on your web host.
If you do not get your test message after waiting at least a few hours, see thechecklist of things to do when you don't getyour email. You may also want to try the obvious step of making sure that you entered your email address correctlyinto the Wizard.
For the suspicious: how to verify that visitors cannot see your email address from the script code
Remember that I said earlier that the email address that you saw in the script will not bedisplayed in your visitors' web browsers even if they specifically put its URL in theaddress bar? Well, if you didn't believe me then, now is 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 contact form is at '
http://www.example.com/feedback.html', the PHP script thatyou uploaded should be at 'http://www.example.com/feedback.php'. That is, take the URL ofyour contact form, and change the part at the end that says '.html' to '.php'.Type that new address into a tab (or window) in your browser's address bar and hit the ENTER key.You should be magically transported to your contact form. That is, you will not see the program code.In fact, the script code was never at any moment transmitted to your browser.
Explanation: a web server that has PHP installed distinguishes between normal web pagesand PHP scripts. If it sees a normal web page, like your home page, it sends that document to the browser.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 to be run on the web server itself, not documents tobe sent. 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 FeedbackForm Wizard notices that it was accessed directly (instead of through the 'Send Feedback' button). Since it'stwiddling its thumbs, with no email to send, it simply tells your visitor's browser to go to theform instead. That's why you ended up at your contact form.
(If you encountered a '404 File Not Found' error instead of the form, you've either typed the wrongURL into the browser, or you supplied the wrong address for the 'URL of Feedback Form' field in theWizard when you first created your script.)
Congratulations and Where to Go From Here
Congratulations! You have not only successfully installed a feedback form on your website (a task considered one ofthe most difficult among new webmasters), you have also completed the design and creation of your entire website.And it's not some trivial play site, but a multi-page, fully functional website with a professional looking navigationmenu, a working contact form and site map.
Before you go and celebrate your latest accomplishment, I would appreciate if you would take the time to tell others aboutthesitewizard.com by linking to it. Some linkingsuggestions can be found here, but feel free to link to any page you like. For example, if you likemy guide on creating a website,go ahead and link directly to that. Please don't forget thesitewizard.com as you move on from here with your newfoundskills as a webmaster (and your new site).
Incidentally, you can also find additionalarticles on Expression Web. Those guides are not included in this main tutorial series because they dealwith things that not everyone needs to do. Expression Web is a powerful editor with lots of features. If I includedeverything here, you will be overwhelmed and become discouraged. As such, this main tutorial concentrateson the core set of skills and knowledge needed to design a site, leaving the extra features that only a few peoplemay want to separate standalone articles.
Microsoft Web Expressions 4
In addition, there is more to website creation than simply designing its pages. A few of the other things to do arementioned in the guide on How toCreate a Website, but you can also take a look at my SiteMap to see the list of other articles that deal with frequently required webmaster tasks.
All the best for your site!
Copyright © 2016-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Microsoft Web Expressions 4 Download
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All Expression Web Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 3 March 2020.
