How to Add a Feedback Form to Your Website Using KompoZer

Transcription

1/15/2011
How to Add a Feedback Form to Your …
How to Add a Feedback Form to Your
Website Using KompoZer
by Christopher Heng, thesitewizard.com (http://www.thesitewizard.com/)
As you surf the web, you will probably have noticed that most of them have some sort of facility for
visitors to send a message to the webmaster. Some sites have a feedback or contact form, which
is basically a form that you can complete and send using your web browser. Other sites have their
contact information, like email addresses, displayed on a page on their site.
In this final chapter of the KompoZer Tutorial (http://www.thesitewizard.com/gettingstarted/kompozertutorial-1.shtml) , you will be adding a feedback form to the site that you have created in the
previous chapters. If you have arrived here from outside the site and wish to read the earlier
chapters, you can find the first chapter at http://www.thesitewizard.com/gettingstarted/kompozertutorial-1.shtml (http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml) On the other
hand, if you arrived here looking for a feedback form script and not an KompoZer tutorial at all, you
should go directly to the Feedback Form Wizard
(http://www.thesitewizard.com/wizards/feedbackform.shtml) at
http://www.thesitewizard.com/wizards/feedbackform.shtml to create your script.
Note that of all the chapters in this series of KompoZer tutorials
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml) , this chapter is probably the
most difficult to understand, since it involves many unavoidable technical aspects. However, even if
you don't understand portions of it, you should still be able to create a feedback form for your site
by blindly following my step-by-step guide.
Overview: How a Feedback Form Works
There are many aspects to getting a working feedback form on your website: it is definitely more
than simply designing a web form with KompoZer. By way of overview, here are some of the major
elements that we will need. You do not need to understand every single detail at this point since I
will take you item by item through the whole process later. However, it is useful to have the big
picture in mind so that you don't get lost in the forest of details later.
1. The first thing we need is the web page containing the feedback form. You will be designing
most of this page using KompoZer. By itself, the form doesn't do anything at all: your visitors
can click the "submit" button till they are blue and you will still not receive their message. The
task of sending the form contents as an email message lies with what is known as the feedback
form script.
2. The feedback form script is essentially a computer program that processes the contents of
thesitewizard.com/…/kompozer-tutorial…
1/10
1/15/2011
the form sent by your visitor's web browser. It takes the raw message and formats it as a
regular email message and then sends it via email to the webmaster. This script has to run on
the web host's server (ie, computer) itself. You will be using a script custom designed for you by
thesitewizard.com's Free Feedback Form Wizard
(http://www.thesitewizard.com/wizards/feedbackform.shtml) . However, you will have to find a web
host (http://www.thefreecountry.com/webhosting/budget1.shtml) that supports the running of such
scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
3. Next, we have the "thank you" page. After the browser sends the message to the script, you
will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will
still need some sort of page that will inform your visitors that their message has been
successfully sent. This page can be easily designed using KompoZer.
4. Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send")
button before he/she has finished typing essential elements such as their email address, the
feedback form script will direct them to a page telling them that they have missed out
components required in a message. Like the "thank you" page, this is a straightforward web
page that can be designed with KompoZer.
In other words, for your feedback form to work at all, you need five major things: the feedback form,
the feedback form script (program), the thank you page, the error page, and a web host that allows
you to run programs (scripts) on their computer.
Step by Step Guide
1. Get a web host with PHP 4.1 or above
Your feedback form will not work at all if you use a web host that does not allow you to run your
own programs (scripts) on their computers. Basically, if you use the free web space provided
by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be
able to get your feedback form working. Note that there are even some commercial (paid) web
hosting that do not allow you to run your own scripts.
If you are looking for a suitable web host, you need to find one that supports the running of PHP
scripts with an installed PHP that is version 4.1 or above. Generally, if a commercial web host
supports PHP, their PHP version will satisfy this requirement. Do not use free web hosts, even
if they have PHP support, since many of them do not allow PHP scripts to send email.
You can find a list of commercial web hosts
(http://www.thefreecountry.com/webhosting/budget1.shtml) at
http://www.thefreecountry.com/webhosting/budget1.shtml
(http://www.thefreecountry.com/webhosting/budget1.shtml) . If you are curious as to which web
host I use, you can find the information in my review
(http://www.thesitewizard.com/archive/webhosting.shtml) at
http://www.thesitewizard.com/archive/webhosting.shtml
(http://www.thesitewizard.com/archive/webhosting.shtml)
2/10
1/15/2011
2. Generate a custom feedback form script
The next thing you will need to do is to visit thesitewizard.com's Free Feedback Form Wizard
(http://www.thesitewizard.com/wizards/feedbackform.shtml) to generate a customised feedback
form script. The wizard can be found at
http://www.thesitewizard.com/wizards/feedbackform.shtml
(http://www.thesitewizard.com/wizards/feedbackform.shtml)
Read through the Wizard's introductory page. Choose to create the PHP feedback form script.
Although you can generate any of the other types of feedback form scripts, for the sake of
simplicity, this tutorial will only focus on the installation and creation of a feedback form that
uses the PHP feedback form script.
In the next page, enter the information requested by the form. Modify the URLs supplied below
to contain your real domain. For example, if your domain is "such-and-such-a-name.com", use
that instead of the "example.com" given below.
Email: (enter your email address)
URL of Feedback Form: http://www.example.com/feedback.html
URL of "Thank You" Page: http://www.example.com/thankyou.html
URL of "Error" Page: http://www.example.com/error.html
Under the "Advanced Options (Optional)" section, click the drop down box for "HTML family to
use" and select "HTML". (This step is optional, so it's no big deal if you can't be bothered to set
it.)
Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click
"Generate script" to continue.
Do not close the web page that appears. Leave it open while you work on the next few steps.
3. Saving the script
Start up an ASCII text editor (http://www.thefreecountry.com/programming/editors.shtml) without
closing your browser. Windows users can simply start up Notepad, which is found in your Start
menu. Click the Start menu, followed by the "Programs" menu item (or "All Programs" menu
item if you use XP), the "Accessories" menu, then the "Notepad" menu item. If you are a Linux
user, you probably already know what an ASCII editor is; for example, you can use "Kate", "vi,
"emacs", or one of the million editors available on Linux. Mac users are on their own (sorry)
since I have no idea what text editors are available on a modern Macintosh. It is important that
you do NOT use a word processor like Office or Word
(http://www.thefreecountry.com/utilities/wordprocessors.shtml) or the like. If you are not sure where
you can get an ASCII text editor, there are many free ones available for different platforms at
http://www.thefreecountry.com/programming/editors.shtml
(http://www.thefreecountry.com/programming/editors.shtml)
Switch to your web browser, and locate the section that has the header "Feedback Form
Script". Select everything in the box below. If you are using Windows, one easy way is to simply
3/10
1/15/2011
click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a').
Then copy the text you have selected to the clipboard. You can use Ctrl+C in Windows, or use
"Edit | Copy" from the browser's menu.
Switch back to your text editor, ie, Notepad if you are using Windows. Paste the contents you
copied earlier. In Notepad, you can paste by using "Edit | Paste" from the menu. WARNING: Do
not modify anything in this page. Do not attempt to beautify it. Do not even attempt to add a
blank line. This is not the user-visible portion of your web page. We will come to that later.
Save the file as "feedback.php" and quit your editor. If you are using Notepad on Windows,
please take the following steps instead:
Click "File | Save As". A dialog box will appear. Navigate to the folder or directory where you
have kept all the web pages created in the earlier chapters. Name the file "feedback.php"
(without the quotes), and click "Save" to save in in that same directory. Quit Notepad.
Unfortunately, in spite of what you specified earlier, Notepad automatically added a ".txt"
extension to your filename. You will have to manually rename the file to "feedback.php". To
do this, start up Windows Explorer and navigate to the directory where you placed
"feedback.php".
If the file appears as "feedback.php.txt" in your Explorer window, skip to the next step. If it
appears as "feedback.php" or "feedback", click the "Tools | Folder Options" menu in
Explorer. Click the "View" tab. Look for a setting "Hide file extensions for known file types"
and uncheck the box beside it to disable it. Click "OK". You should now be able to see the full
filename "feedback.php.txt".
Now click once on the filename "feedback.php.txt". Explorer will allow you to change the
filename. If this is not true, select the filename and hit the F2 on your keyboard. Delete the
".txt" extension, leaving the filename as "feedback.php" (without the quotes). Make sure there
are no trailing dots - that is make sure the filename is really "feedback.php" and not
"feedback.php." with a trailing dot.
When you hit the ENTER key, Windows will issue a warning about the dangers of changing
filenames. Allow the name change to take place.
4. Publishing (uploading) the script
To upload or publish the script so that it can be used by the pages on your website, you will
need to use a program for transfering files, called an FTP client (FTP stands for File Transfer
Protocol). KompoZer, up to version 0.7.10, does not seem to be able to transfer a script file that
is associated with a form despite what its "Publish" dialog implies. Basically, you will need a
separate FTP client to transfer ("upload") the "feedback.php" file from your computer to your
web host's computer, so that it can be used by your website.
If you are using Windows, please refer to the following tutorial for instructions on how to publish
the feedback.php file to your website: How to Publish or Upload Your Files to Your Website with
FileZilla (http://www.thesitewizard.com/gettingstarted/howtoupload.shtml) at
http://www.thesitewizard.com/gettingstarted/howtoupload.shtml. Read the tutorial, follow its
4/10
1/15/2011
instructions, then return to this tutorial for the remainder of the steps.
Non-Windows users will have to look for an FTP client and find out how to use it to upload the
feedback.php file to your web server. There are numerous free FTP clients available for many
modern operating systems. You can find a list of them on the Free FTP and SFTP Clients and
Free Download Managers (http://www.thefreecountry.com/webmaster/freeftpclients.shtml) page
on thefreecountry.com.
5. Creating the feedback form web page
By now, you should have no problem creating an ordinary web page. In fact, if you have been
diligently doing the things mentioned in the previous chapter on multiple-column layouts
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-4.shtml) , you will already have a
four-page website (Home, About, Reciprocal Links, Site Map) with each page having a twocolumn layout.
Copy the layout from the other pages that you have created and create your navigation panel as
before. If you are using the two-column layout from Chapter 4
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-4.shtml) , put your cursor in the
second column and type the heading "Feedback Form" (without the quotes). You can beautify it
in any way you choose (for example, make it bigger, change the font, leave a blank line after it,
etc). We will insert the feedback form generated by the wizard below that heading. If you are
using some other layout, put the heading in the appropriate portion of the page.
Now switch to the browser window that contains the generated code from thesitewizard.com's
wizard. This time locate the section in the output generated by the wizard that reads "HTML
Code". Click in the box below and select and copy everything.
Switch back to KompoZer. Click in the space under the "Feedback Form" heading that you
created earlier. Once you see your cursor blinking in the appropriate spot in the second column,
click the "Source" tab at the bottom of the Window. The HTML code for your page will be
displayed. Don't move the blinking text cursor and do not click anywhere in the HTML code
portion. Select "Edit | Paste" from the menu to insert the HTML code given by the wizard in the
current location.
Click the "Normal" tab at the bottom of the screen again to view your form. The form should be
inserted in the correct portion of your page. You can now beautify your page any way you wish.
To widen the input field for "Name", click the field (the text-entry box) beside the words "Name:",
and select "Format | Form Field Properties" from the menu. A dialog box will appear for that
field (box). Click the button "More Properties" to expand the dialog box. The default field size as
generated by the wizard is "25". You can increase it if you want the field to appear wider, or
decrease it if you want it narrower. Note that this field size merely sets the appearance of the
box on the screen. It does not affect how much text your visitor can type into the field. Most
browsers will simply scroll the text if the box is not wide enough for what the visitor wants to
type.
Simlarly, you can change the size of the box underneath "Comments:". Click the box, select
"Format | Text Area Properties" and adjust the rows and columns to your satisfaction. As
5/10
1/15/2011
before, this change is merely cosmetic, and will not affect the amount of text your visitor can
enter.
The text appearing on the button can be changed as well. Right-click the "Send Feedback"
button. That is, click the right mouse button while your mouse cursor is over the "Send
Feedback" button. A pop-up menu will appear. You can either ignore it and select "Format |
Form Field Properties" from the main menu or simply click "Form Field Properties" from the
pop-up menu that appears. The "Field Value" line in the dialog box that appears should display
"Send Feedback", which is the text that is shown in the button on the form. Change it to some
other text if you wish.
Do not change any value other than those I mentioned above. Most importantly, you should not
modify the "Field Type" and "Field Name" values or the form will not work correctly.
When you have finished making changes, save your page as "feedback.html" with a title
"Feedback Form". You can change the title if you wish, but you should leave the filename as
"feedback.html" since this is the name you supplied to the Feedback Form Wizard earlier, and
the script generated relies on it.
6. Creating the "Thank You" and "Error" pages
To create your "Thank You" and "Error" pages, start with the layout that you created for the other
pages of your site and insert the navigation panel as usual. Then insert the appropriate text as
outlined below.
The "Thank You" page typically thanks your visitor for sending his comments. Its main purpose
is to provide feedback to the visitor that his comments had been successfully submitted. You
can write anything you wish for this page. For example, you might want to say something like
"Thank you for your comments. If your message requires a reply, I typically reply within 24 hours
of the receipt of the message."
The "Error" page is shown whenever the visitor submits the form without filling one of the fields.
For example, if he/she fails to enter an email address when the form is submitted, the "Error"
page will be displayed instead of the "Thank You" page. Your error page should inform the
visitor that he/she needs to complete all the fields in the form, and that he/she is to click the
browser's "Back" button to go back to the form to repair the error. For example, a possible
message that you can use for your "Error" page is "There were errors in the form that you
submitted. Please complete all the requested information before submitting the form. Click the
'Back' button on your browser to return to the form to fix the error."
7. Publishing the Feedback Form, Thank You and Error pages
When you have finished designing your pages, publish them with KompoZer. If you have
forgotten how to do so, you may want to read chapter 1 of the KompoZer tutorial
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml) again.
8. Testing the Feedback Form
6/10
1/15/2011
When all your files have been published, you should test your feedback form to make sure that it
works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked
Questions) (http://www.thesitewizard.com/faqs/feedbackform.shtml) for the answer. You should
also reread this chapter of the tutorial to see if you missed anything.
Conclusion
Congratulations! With this chapter, you have completed the basics of using KompoZer to design a
website. You have also created a fully functional site, complete with main page, an "About Us"
page, a "Reciprocal Links" page, a "Site Map" and a working "Feedback Form". More importantly,
you now have the knowledge to use KompoZer to create, design and publish new websites as and
when you wish.
Copyright © 2005-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this (http://www.thesitewizard.com/gettingstarted/kompozertutorial-5.shtml) , on web design, promotion, revenue and scripting, from
http://www.thesitewizard.com/ (http://www.thesitewizard.com/) .
thesitewizard.com's KompoZer Series
KompoZer Tutorial 1: How to Design and Publish Your Website with KompoZer
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml)
KompoZer Tutorial 2: How to Add Images, Change Fonts and Colours, Create Links, and
Write Your Content in KompoZer (Tutorial)
KompoZer Tutorial 3: How to Create Data Tables in KompoZer
KompoZer Tutorial 4: How to Create a Multiple Column Layout for your Website in KompoZer
KompoZer Tutorial 5: How to Add a Feedback Form to Your Website Using KompoZer
How to Insert Raw HTML Code in KompoZer (http://www.thesitewizard.com/faqs/insert-htmlcode-in-kompozer.shtml)
More Kompozer Tutorials (http://www.thesitewizard.com/kompozer/index.shtml)
You are here: Top (http://www.thesitewizard.com/) > Getting Started with Your Website
(http://www.thesitewizard.com/gettingstarted/index.shtml) > How to Add a Feedback Form to Your
Website Using KompoZer (http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-5.shtml)
Other articles on: Feedback Form (http://www.thesitewizard.com/topics/feedback-form.shtml) ,
Getting Started (http://www.thesitewizard.com/gettingstarted/index.shtml)
thesitewizard™ News Feed (RSS Site Feed)
7/10
1/15/2011
(http://www.thesitewizard.com/thesitewizard.xml)
Do you find this article useful? You can learn of new articles and scripts that are published on
thesitewizard.com (http://www.thesitewizard.com/) by subscribing to the RSS feed. Simply point
your RSS feed reader or a browser that supports RSS feeds at
http://www.thesitewizard.com/thesitewizard.xml (http://www.thesitewizard.com/thesitewizard.xml) .
You can read more about how to subscribe to RSS site feeds
(http://www.thesitewizard.com/faqs/howtoreadsitefeeds.shtml) from my RSS FAQ
(http://www.thesitewizard.com/faqs/howtoreadsitefeeds.shtml) .
Please Do Not Reprint This Article
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without
obtaining my written permission (http://www.thesitewizard.com/feedback.php) .
Related Pages
The A-Z Guide to Starting Your Own Website
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml)
How to Create a Search Engine Friendly Website
(http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml)
How to Register Your Own Domain Name
(http://www.thesitewizard.com/archive/registerdomain.shtml)
Which Web Host Do You Recommend? (FAQ)
(http://www.thesitewizard.com/archive/webhosting.shtml)
Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for
Commercial Websites (http://www.thesitewizard.com/webdesign/usabilitycommerce.shtml)
Seven Easy Ways to Annoy Visitors to Your Website - Some Usability Mistakes Made by New
Webmasters (http://www.thesitewizard.com/webdesign/usabilitymistakes.shtml)
How to Make Money From Your Website (http://www.thesitewizard.com/archive/makemoney.shtml)
What is Favicon.ico? Personalise Your Site's Bookmark
(http://www.thesitewizard.com/archive/favicon.shtml)
New Pages
How to Link to Other Websites and Add New Web Pages to Your Site with NetObjects Fusion
11 (http://www.thesitewizard.com/netobjects/netobjects-fusion-11-tutorial-4.shtml)
How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver
(http://www.thesitewizard.com/dreamweaver/change-liquid-fixed-layout-templates.shtml)
Should You Get a Domain Name with Spaces or Dots In Between to Improve Readability?
(http://www.thesitewizard.com/domain/domain-name-with-spaces-or-dots.shtml)
How to Centre a Background Image or Photo on Your Web Page Using KompoZer
8/10
1/15/2011
(http://www.thesitewizard.com/kompozer/centre-background-image-kompozer.shtml)
How to Rescue Your Website from the Clutches of a Bad Web Designer or Bad Web Host
(http://www.thesitewizard.com/domain/reclaim-website-from-bad-web-designer-host.shtml)
How to Created Rounded Corners for Your Box Borders in CSS
(http://www.thesitewizard.com/css/create-rounded-corners-box-borders-css.shtml)
NetObjects Fusion 11 Tutorial: How to Create a Website with NetObjects Fusion 11
(http://www.thesitewizard.com/netobjects/netobjects-fusion-11-tutorial-1.shtml)
How to Add a Feedback Form to Your Website with Dreamweaver CS5
(http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-8.shtml)
What is MySQL? What is a Database? What is SQL? (http://www.thesitewizard.com/faqs/what-ismysql-database.shtml)
How to Point a Domain Name to Your Website (Or What to Do After Buying Your Domain Name)
(http://www.thesitewizard.com/domain/point-domain-name-website.shtml)
Popular Pages
How to Make / Create Your Own Website: The Beginner's A-Z Guide
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml)
Tips on Choosing a Good Domain Name
(http://www.thesitewizard.com/archive/domainname.shtml)
How to Create a Search Engine Friendly Website
(http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml)
Dreamweaver CS5 Tutorial: How to Design a Website with Dreamweaver CS5
(http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial-1.shtml)
How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor)
Free Customized Feedback Form Wizard (PHP / Perl Script)
(http://www.thesitewizard.com/wizards/feedbackform.shtml)
How to Link to This Page
To link to this page from your website, simply cut and paste the following code to your web page.
<a
href="http://www.thesitewizard.com/gettings
tarted/kompozer-tutorial-5.shtml"
target="_top">How to Add a Feedback Form to
Your Website Using KompoZer</a>
It will appear on your page as:
How to Add a Feedback Form to Your Website Using KompoZer
9/10
1/15/2011
Copyright © 2005-2009 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
Last updated: 11 June 2009.
10/10

How to Add a Feedback Form to Your Website Using KompoZer

Transcription

Similar documents

How to Insert Raw HTML Code in KompoZer

How to Create Data Tables in KompoZer

KompoZer Tutorial 2: How to Add Images,

The StereoTimes

Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4

Sports/Activity Physical Form

Stereotimes 05/2012

November 2010

October 2007

studio unit Avida Tower Makati west - Phil