Most websites on the Internet provide a way for their visitors to contact the webmaster. Some do it by displaying an email address on the site, while others put up a feedback form so that their users can reach them without having to log into their email account. This tutorial shows you how you can add such a form to your site using NetObjects Fusion 11.
By the end of this chapter, you will have added a feedback form (or contact form) to your website. If you have been following this NetObjects Fusion 11 Tutorial series faithfully, you will also have completed your website.
If you're reading this chapter because you're curious about how to create a website, and have not actually started on one yet, please read How to Make / Create Your Own Website: The Beginner's A-Z Guide. The article you are currently looking at is the final part of a tutorial series; starting from this chapter may make website creation seem harder than it actually is, since I will use terms that I have already introduced in earlier chapters.
Before you create your own feedback form (or "contact form", or whatever you wish to call it), please go to the Feedback Form Demo Site and try out the form. Yes, use it to send some message or other (even if it's just some nonsensical sequence of letters). Don't worry: the form on that site is just a demo, and you can test it as much as you like without spamming anyone. (The messages sent disappear into a black hole, that is, they are automatically deleted.)
The reason I'm asking you to do this is because it'll help you understand what I'm talking about when I refer to different aspects of the feedback form. The form you see on that demo site uses the exact same technology that you will be using for your own website, so the things you experience there is directly relevant to our discussion here. So please do it now before reading on.
Before your feedback form can work, you will need the following. These things are not optional. If one or more of them are not available, your form will not work. Yes, you read that right. It will not work; that is, the form may look okay, but your visitor's message will not be sent to you when he/she clicks the Send Feedback button.
Your website needs to be hosted with a web host that allows you to run something known as "PHP scripts". See What is PHP? if you want to know what a PHP script is.
As far as I know, most commercial web hosts, including the one hosting thesitewizard.com, provide such facilities.
In general, if you're not paying for your web hosting, chances are strong that your web hosting account does not fulfill this requirement. For example, if your website is currently using the free hosting facilities that comes with your broadband connection or it is using one of those "free starter websites" packages provided by some domain name registrars, it is unlikely that your hosting account provides PHP access.
Not only must your web host have PHP installed, they must also allow your PHP scripts to send email. Again, most paid web hosts allow this. Conversely, free web hosts don't normally permit PHP scripts to send email, even if they allow such scripts to run.
Finally, the PHP installed by your web host needs to be at least version 5.2. Most web hosts with PHP installed will probably fulfill this requirement. In fact, they probably have a much later version, like PHP 5.3 or above. Those are okay too. (It's only a problem if it's a version earlier than 5.2, like 4.1, or 4.0.)
You may already have realised, from your testing of the contact form demo earlier, that the form comprises the following components, all of which we will create in this chapter.
The feedback form is just the visual front-end. All it does is to display the different form fields to your visitors. It doesn't do anything else. You will create this using thesitewizard.com's Free Feedback Form Script Wizard, and insert it into your web page using NetObjects Fusion 11.
The feedback form script is the real engine behind the feedback form. It is a computer program that takes the things your visitors enter into your feedback form, and changes it into an email message. It then calls your web host's email system to send the message to your email account (wherever that might be).
Like your feedback form, a customised ("customized" in US English) version of the script will be generated by the Feedback Form Script Wizard. Don't worry. It's free.
The Thank You Page is shown to your visitors after they submit their feedback. You will create this page yourself using NetObjects Fusion 11. It's just a normal web page, just like the ones that you created in the previous chapter.
The Error Page is shown to your visitors if they fail to enter crucial information into the form before submitting it. This page is also a normal web page, like the Thank You Page. You will thus be creating it yourself with NetObjects Fusion 11.
Go to the Feedback Form Wizard and generate a customised version of the feedback form script and form for your website.
Read the introductory page in the wizard, and choose the option to create a PHP feedback form script. Click the "Go to Step 2" button.
You'll then be asked to furnish some basic information. Enter the information required by the form:
Email: Enter the email address at which you want to receive the feedback from your visitors.
URL of Feedback Form: Enter http://www.example.com/html/feedback.html (but replace
www.example.com with your
own domain name). Don't change the file name and folder from /html/feedback.html, that is,
add the following to the end of your domain name: "/html/feedback.html" (without
the quotes). Notice the "/html/" before the filename "feedback.html". I know the
Feedback Form Wizard suggests that you use a name like http://www.example.com/feedback.html
but that won't work for NetObjects Fusion 11, so use the version I suggest in this paragraph instead.
URL of Thank You Page: Enter http://www.example.com/html/thank_you.html (but
replace the www.example.com part as before). Notice the underscore between "thank" and
"you", followed by the extension ".html". Do not change the name and folder from "/html/thank_you.html"
because this will be the name generated by NetObjects Fusion 11 (yes, your web editor) later. Again, I know the
Feedback Form Wizard itself suggests a name like "thankyou.html", but that's for the general user. For
NetObjects Fusion 11 users, please use /html/thank_you.html.
URL of Error Page: Enter http://www.example.com/html/error.html, as usual, after
replacing the www.example.com portion. Make sure you use /html/error.html as your
filename and folder. As before, I know the Wizard suggests http://www.example.com/error.html
without the "html" folder name, but your situation is different, so please follow my instructions here.
Scroll down to the part that says "HTML family to use" and select "HTML" from the drop down box.
Read the licence agreement. If you agree to the terms, indicate it in the form and click the "Generate script" button.
A new page containing the script and form code, customised with the values you just entered, will appear. Do NOT close this page. Leave it open while you carry out the following steps in NetObjects Fusion 11.
If you use Windows XP, click the Start menu, followed by "All Programs" in the menu that appears. In the submenu that is shown, click "Accessories". Finally, click the "Notepad" item from the new submenu that is displayed. Remember: I said click "Notepad". Do not use Wordpad or any other program.
If you use Windows Vista or Windows 7, click the Start menu to open it. The Start menu is the round button at the bottom left of your screen, containing the Windows logo. Type "notepad" (without the quotes) into the blank field. When the word "Notepad" appears at the top of the menu, click it to start the program.
The Notepad program will appear, showing you a blank screen.
Switch back to your web browser, which should still be showing the results generated by the Feedback Form Script Wizard. (Do not close Notepad to do this. Leave it open.)
Look for the section with the heading "Feedback Form Script". The box under this heading contains your feedback form script. Click somewhere in the box. The contents of the box should automatically be highlighted. (If it's not highlighted when you click in it, hold down the "Ctrl" key on your keyboard, and type "a". This should highlight everything in the box.)
Now copy everything in that box into the Windows clipboard. One way to do this is to hold down the "Ctrl" key on your keyboard, then type the "c" character. (That is, don't let go of the Ctrl key while you're typing "c".) Another way is to right click your mouse button (while the mouse pointer is still in the box) and select "Copy" from the menu that appears.
Switch back to your blank Notepad window. (Do not close your web browser. We are still not done with it yet.) Click the "Edit" item on the menu bar, followed by the "Paste" item on the drop down menu that appears. The text which you previously copied into the clipboard will now appear.
Important: do not modify this text in any way. Although you can recognise some English words here and there in the text, this is not a web page. It is a computer program. Modifying, adding or deleting anything on that page can cause the program to fail to work correctly in ways that are hard to diagnose. Don't even add blank lines. Don't worry. If your website has PHP facilities, none of what you see will be displayed in your visitor's browser.
Now you will need to save this file somewhere on your computer. Click "File" on the menu bar, followed by "Save As..." in the drop-down menu that appears. A dialog box with a title of "Save As" will appear.
You will need to navigate to a folder on your computer where you can safely store your own copy of the
feedback form script. If you want to put it in the same folder where NetObjects Fusion 11 keeps the
configuration files for your website, you will need to locate that folder. On Windows Vista and Windows 7,
if your Windows user name is (say) "christopher" and your website was named "example.com" in NetObjects Fusion,
that location is "c:\Users\christopher\Documents\NetObjects Fusion 11\User Sites\example.com\".
On Windows XP, the folder is probably
"c:\Documents and Settings\christopher\My Documents\NetObjects Fusion 11\User Sites\example.com\".
Either navigate to the location mentioned above, or save the feedback form script somewhere else. This is not a temporary location, so if you don't want to put the file together with your other NetObjects files, create a folder somewhere to keep it. (But you'll need to remember that folder location so that you can use it later in this chapter.) Do not use the default location (whatever that may be) shown in the "Save As" dialog box.
Once you've navigated to the folder you want to use, type "feedback.php", including the
opening and closing quotation marks into the "File name" field of the "Save As" dialog box. Let
me say that again: use this name and only this name: "feedback.php" including the quotes.
The quotes are needed, otherwise Notepad will save the file as "feedback.php.txt" behind your
back.
Close the Notepad window. You can do this by clicking the "X" button on the top right of the window, or by clicking the "File" menu, followed by the "Exit" item on the drop down menu that appears. Make sure you close the window so that you don't accidentally modify the feedback form script later, and corrupt it.
Now start up NetObjects Fusion 11 and load your website.
Click the "Assets" button on the toolbar. This is one of the big buttons at the top. It is next to the "Style" button that you used in chapter 1 of this tutorial.
A list of resources (or "assets" in NetObjects' terminology) used by your website (mainly pictures at this point) will be displayed. You will now need to add the feedback form script to this list, otherwise NetObjects Fusion 11 will not upload (ie, transfer) the script to your site when you publish it later.
Right click a blank space underneath the existing list of items. ("Right click" means to click the right mouse button.) A menu will appear. Click the "New file" item on that menu.
A dialog box with a title of "File" will appear. In the "Name" field, type "Feedback form script". Click the "Browse" button for the "Location" field. In the "Open" dialog box that appears, click the down arrow for the "Files of type" field and select "All files (*.*)" from the drop down list that appears. Now locate the "feedback.php" file that you saved earlier. If you did not configure Windows to show you the full filename of your files, your file will probably appear as "feedback" instead of "feedback.php".
Incidentally, if you have many files beginning with the name "feedback" but with a different extension,
as you will later, like "feedback.php" and "feedback.html", this will quickly become
confusing, so I suggest that
you adjust
your Windows settings to display file extensions otherwise you might end up doing the wrong thing to
the wrong file because you were blind to the true filename. It's a
very simple
procedure. As a webmaster, you should always have the full filename displayed, otherwise you may have difficulties
solving problems in the future simply because you didn't know you were working with the wrong file.
Anyway, once you've located your "feedback.php" file, click it once to select it, then click the "Open" button. You will be returned to the "File" dialog box. Next, put a tick in the "Always publish this" checkbox by clicking it once. Finally, click the "OK" button.
Your script will now appear in the Assets list.
Click the "Site" button on the toolbar to return to NetObjects Fusion 11's Site view.
Right click your "Home" icon and select "New Page" from the menu that appears. You should already be familiar with this procedure from the previous chapters, where you've already created other new pages for your website.
Click the new "Untitled" icon to select it. (Actually, the icon probably shows "Untitled" with some number affixed, depending on how many pages you've already created for your site.)
Once again, look at the "Page Properties" panel on the right side of NetObjects Fusion, and click the "Page name" field.
Replace the existing text in the Page name field with "Feedback" (without the quotes). Please do not type any other name
into this field. NetObjects Fusion 11 uses this name to create the filename, and you need the file to be called
"feedback.html, otherwise it will not match with the name you gave to the Feedback Form Wizard earlier.
Click the "Page title" field. By default, it will show "Feedback" when you do so. Change this to any title you like, such as "Contact Us" or "Feedback Form" or "Support".
Click the "Custom Names" button. You can change the name appearing on the navigation button to any name you like by altering the "Navigation button" field. Likewise, if you wish, the name appearing in the banner (logo) on your page can also be changed by altering the "Banner" field. If you have changed the "Page title" field earlier to something other than the default, it's probably a good idea to change the "Navigation button" and "Banner" fields to the same name, to avoid confusion later (both on your part and also on the part of your visitors).
Click the down arrow for the "File extension" drop down box and select ".html". Make sure you do this,
so that NetObjects Fusion 11 names the file "feedback.html" and not some other name like "feedback.htm".
Remember that you've already given the name feedback.html to the Wizard earlier, so the customised
feedback form script created will have all these names embedded in it. If you don't switch the file extension to
the same one you gave the wizard, you'll end up with
"404 File Not Found" errors
under certain circumstances.
Click the "OK" button to dismiss the "Custom Names" dialog box.
Doubleclick the "Feedback" icon to open your new page. Insert a text box into the area where you want the form fields to appear. That is, click the "Text" icon on the toolbar, and drag the cursor to create a box on the page. (Note: if the previous sentence confuses you, and you don't know how to create a text box, please read chapter 1 again.)
Switch back to your web browser. Do not close NetObjects Fusion.
Locate the section that has a heading of "HTML Code". Click once in the box in that section. Again, the contents of the box should be automatically highlighted. (If it's not, select its contents manually, by using the same method you used earlier to highlight the script. See the section above if you've forgotten how to do it.)
Copy the contents of that box into the clipboard. Again, do this either by typing Ctrl+C (holding down the Ctrl key while typing "c") or by right-clicking the box and selecting "Copy" from the menu that appears.
Switch back to NetObjects Fusion 11. Right click the blank text area that you've set aside for the form code. Click the "Text HTML..." item on the menu that appears. A dialog box with a title "Object HTML" will appear.
You should see a line with a grey background that says "<p style="margin-bottom: 0px;"> </p>"
followed by another line with a single grey blank space. Click the blank (white) line under those grey lines.
Your text cursor should now appear.
Right click anywhere below that to bring up a menu. Click the "Paste" item on that menu. The form code you copied earlier into the clipboard should now appear. Click the "OK" button.
You will not be able to see the form in NetObjects Fusion 11, since the editor doesn't appear to be able to display or manipulate code that it didn't generate itself. Don't worry. The form will appear correctly on your website when you publish it, and you will be able to view it in a real web browser.
Now create the Thank You page for your website. To do this, return to Site view by clicking the "Site" button on the toolbar.
Right-click the "Feedback" icon. (Yes, I said the Feedback icon, not the Home button.) Select "New Page" from the pop up menu. Click the "Untitled" icon that appears to select it.
Change the "Page name" field in the Page Properties panel to "Thank You" (without the quotes). Do not use any other name here. If you do, the filename created by NetObjects Fusion 11 will not match the name you gave to the Feedback Form Wizard. This will cause your visitors to receive a "404 File Not Found" error when they submit the form. Anyway, this "Page name" field merely sets the filename, and you can change the displayed names (page title, banner text, etc) in the other fields, so please do not use any other name here.
If you like, you can change the "Page title" to something other than "Thank You". (It doesn't really matter.)
Click the "Custom Names" button. Click the down arrow for the File extension field and select ".html".
This is important, since it will cause NetObjects Fusion 11 to create a filename like "thank_you.html"
which is the name you gave to the Feedback Form Wizard earlier. Everything needs to match with what you furnished
to the wizard, or you will end up with File Not Found errors when you use the form on your site.
If you like, you can also change the text for the "Navigation button" and "Banner" fields. This is optional. When you're done, click the "OK" button to dismiss the Custom Names dialog box.
Now click the "Exclude from navigation" checkbox on the Page Properties panel to put a tick in it. If you don't do this, your navigation menu will have a new button on it labelled "Thank You". While this is harmless in itself, it's somewhat silly to have a link to your Thank You page in your navigation menu.
Doubleclick the "Thank You" icon in the main part of the window to open up the page in Page view.
Add a text box to the page with a message acknowledging that your visitor's message has been sent. For those who don't know what to say on that page, use the following text:
Your message has been sent to the webmaster. Thank you for your comments.
Alternatively, if you are running a business, you may want to give a more customer-friendly message like the following:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
Don't be too obsessed with the wording though. The main aim of this page is to let your visitors know that the message has been sent.
Click the "Site" button to return to Site view to create your error page. To do this, right-click the "Feedback" icon, and select the "New Page" item from the pop-up menu. Then click the new "Untitled" icon that appears.
Change the "Page name" field in the "Page Properties" panel to "Error" (without the quotes). Again, do not change this to any other name. If you don't like the word "Error", change the "Page title", "Navigation button" and "Banner" fields, not the "Page name" field. The name in the "Page name" field must be "Error" to match the filename you gave to the Feedback Form Wizard. I know I am repeating myself here, but the use of mismatched filenames is one of the most common causes of problems for newcomers setting up their own feedback form.
As before, click the "Custom Names" button and set the "File extension" field to ".html".
You can change the "Navigation button" and "Banner" fields if you like. Then click the "OK" button.
Click the "Exclude from navigation" checkbox to enable it.
Doubleclick the Error page to open it in Page view.
Create a text box and type your error message there. If you don't know what to say, try the following:
Please complete all the fields in the form before clicking the "Send Feedback" button. Click the "Back" button in your browser to return to the form to fix the error.
Save all the files by clicking "File" from the menu bar, followed by "Save Site" in the drop-down menu that appears. Then publish the files the usual way from "Publish Site".
Important: even if you have previously used "Local Publish" to test your site on your own computer, you will need to publish it to a real website this time to test the feedback form. The feedback form script will not run on your own computer. It will only work on a computer running a web server and PHP, meaning that for most people, it will only work on your web host's computer.
Open your website in your web browser and click the link that leads to your feedback form.
Don't enter anything in any of the form fields. Just click the "Send Feedback" button. This will allow you to see if the name of your error file, as created by NetObjects Fusion 11, matches the name and folder you gave to the Feedback Form Wizard.
If you get a "File Not Found" (or "Page Not Found") error, it means that the name you put in the "Page name" and the extension you set in the "File extension" fields did not match the name you furnished to the Feedback Form Wizard. Please go back and check both the name you gave to the Wizard, as well as your settings for the Error page in NetObjects Fusion 11. In such a case, it's best that you re-read this chapter again, this time not skipping any details. (Yes, I know we all like to skim through these boring tutorials, but since you encountered an error, you've probably missed something important along the way. The only way to know what you've missed is to go through the tutorial again, slowly.)
Now complete all the form fields as though you are a real user, and submit the form. This will allow you to check if your Thank You page has a name matching the address you gave to the Feedback Form Wizard earlier.
Once again, if you get a "File Not Found" or "Page Not Found" error, you'll need to check both the names you created in NetObjects Fusion 11 as well as the web address you furnished the Feedback Form Wizard.
If you get your Thank You page after submitting the form, the next step is to check your email to see if you've received the message. If not, run through the checklist of things to do when you don't receive your email.
If you run into some other kind of problem, please read the Frequently Asked Questions (FAQ) about the Feedback Form Wizard for the solution. You should also re-read this chapter (in detail), to make sure that you've fulfilled all the requirements and done everything needed.
Congratulations! You've created a fully functional website, complete with a home page, a site map, a feedback form and other pages. You are now a full fledged webmaster, with the knowledge to update your website and create new websites any time you want.
There are of course other aspects to creating websites besides visually designing the web pages. If you want to learn more, please return to the How to Make / Create Your Own Website: The Beginner's A-Z Guide to read an overview of the other things that webmasters usually find necessary to do.
Finally, I would like to ask that you don't forget thesitewizard.com even after you've completed your site. Tell others about it, and link to it. (Thanks!)
All the best for your site!
Copyright © 2011-2024 by 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:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All NetObjects Fusion Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Feedback Form to Your Website with NetObjects Fusion 11
