As a webmaster, you will probably want to provide some way for your visitors to contact you. Some sites do this by displaying their email addresses. Others put up a web form, where their users can drop a message. This final chapter of the BlueGriffon Tutorial will show you how you can set up such a form.
By the end of this chapter, you will have created a working feedback (or contact) form for your website. In addition, if you have been following this tutorial from chapter 1, you will have completed everything, and have a fully functional multi-page website on the Internet.
I will assume that you already know the things covered in the earlier chapters. If this is not true, please start at the beginning with the guide on creating a website.
Whereas newcomers have relatively little trouble designing the rest of their site, they often face issues when creating a form. They painstakingly design the latter using their preferred web editor, only to find that nothing happens when they test it out on the Internet.
Web forms work as one component of a larger system. Think of it this way. If you were to take an empty cardboard box, paint it black to give it a stately appearance, and then place buttons on it labelled "Recite Wordsworth", "Read Shakespeare" and "Quote Yeats", what would happen if you were to press one of those buttons? Obviously, nothing, since you will need some sort of machine in the box before it can do anything.
In the same way, a web form is just the user-facing component of a bigger whole. The engine driving the form is a computer program that is custom built to process the information coming out of the form. Designing a form without writing a program to handle its output is like putting buttons on an empty cardboard box and expecting those buttons to actually do something.
But don't panic. For the feedback form that you'll be adding to your site, you don't actually have to write your own computer program, nor is programming knowledge necessary. You will be using the Feedback Form Wizard to do the hard work for you.
Before you continue with this article, please go to the Feedback Form Demo and try it out. It will give you an idea of how your own contact form will work. Please do this even if you have a lot of experience using web forms. The demo form uses the exact same engine that yours will use, since it was created using the Feedback Form Wizard. And don't worry about spamming me with that form; email sent through it is automatically deleted, so feel free to test it to your heart's content.
From that brief experiment with the form, you will probably notice that the feedback form system comprises 3 user-visible parts. In actual fact, there are many more. Of those, you will only directly deal with the following.
The 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 BlueGriffon.
This is the page your visitors will see after they successfully submit a message. You will be creating this yourself in BlueGriffon.
If your visitors fail to enter important information into the form, such as their email address, this page will be 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 in BlueGriffon.
The Feedback Form Script is the behind-the-scenes "brains" of the form. It is actually a computer program that 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 computer to send the email.
Yes, you read that right. The script doesn't actually send the email. It doesn't need to. There are programs on your web host's computer specially designed to handle email. Many programs on your web host's computer have specific functions, and they all interact with each other to do complex tasks. It's like the division of labour you find in human organisations.
After handing off the message to the other programs on the system, the script then tells your visitor's web browser to go to your "Thank You" page.
For the feedback/contact form to work, the following are required.
The script generated by the Wizard is written in a computer language called PHP. (See What is PHP? if you want to know more.) For it to work, your website must be placed on a web server that has PHP installed.
Not only must your web server have PHP installed, it must be configured so that your PHP scripts are allowed to send email. This is generally the case for commercial web hosts, but is not necessarily true for free ones. Many free web hosts that permit PHP disable its email-sending facility, presumably to prevent people from using their system to spam others. As such, if your site is on 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" that you get for free when you buy a domain name from some registrars.
That said, the feedback form script has been successfully used by thousands of sites on many commercial web hosts.
Please follow the instructions below meticulously. Do not skip any step. In addition, I recommend that you do not work from memory, even if this is the second or third time you're doing this. Keep this article open in a window (or tab) of your web browser while you work, perhaps even highlighting the step you're following (just drag your mouse over the relevant sentence to highlight it) so that you remember where you are. It's easy to lose your place in the article because you will be switching back and forth between windows repeatedly.
Go to the 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, but click it again if you are not sure.)
Click the "Go to Step 2" button.
You should be brought to "Step 2" of the Wizard. Enter the following information.
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.
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 that URL (ie, web address) in chapters 6
(or your
navigation menu) and 7 (for
the 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 addresses mentioned in this article 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", "Help",
"Bug Report", "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.
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.
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 the "www.example.com" placeholder. And again, remember what
I said above about changing filenames.
Scroll down slightly to find the line "HTML family to use" in the "Advanced Options (Optional)" section. It should show "Compatible" by default. Click the down arrow and select "HTML".
Scroll down and read the "Terms of Use: Licence Agreement (Required)" section. If you agree to the terms, 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 NOT close the page that is displayed. Leave it open as you work on the next few steps.
For the purposes of this section, you will need to start up a plain text editor. For Windows users, you already have such an editor on your system, called Notepad. You can start it up by typing "notepad" (without the quotation marks) into your Start menu, and click the "Notepad" line that appears. If you use a Mac, you probably should use TextEdit, which comes with your system. (As I mentioned in the earlier chapters, I don't use a Mac, so you will have to figure out how to start up that program yourself.) Linux users are undoubtedly spoilt for choice. Unfortunately, there are so many Linux distributions around (with more on the way, I'm sure), each with different things installed by default, so I don't know which plain text editor(s) you already have on your system. But if you are a Linux user, you probably don't need me to tell you how to start up a text editor.
Important: do NOT use any word processing program like Microsoft Word, Office, Wordpad, OpenOffice, LibreOffice or the like. If the program you want to use allows you to do things like underline text or put words in bold and italics, then it is the wrong program. You should not be able to do such things in a plain text editor.
Anyway, start up your text editor. It should show a blank page. Then switch back to your browser to the results page of the Feedback Form Wizard.
Click your mouse once in the box located in the "Feedback Form Script" section. The contents of the box should automatically be highlighted. (If it isn't, you will have to manually drag your mouse to select everything in the box. Make sure you get everything.)
Click your right mouse button while the mouse pointer is hovering over the highlighted area. The right click (or context) menu should open. Click "Copy".
Switch back to the text editor and paste the results. If you are using Notepad, you can paste by clicking "Edit | Paste" from the menu, that is, clicking "Edit" from the menu bar, followed by "Paste" in the drop down menu that appears.
A lot of seemingly gibberish text should appear. Do NOT change anything you see, not even to add blank lines. Even though some of the words look like English words, the entire thing is a computer program. Modifying anything may cause the script to fail to work correctly.
For those of you concerned that your email address is embedded in this script, and that your visitors will see it, don't worry. As long as your site is on a system with PHP, nothing on this page will be visible at all. In fact, at no time will the script be even sent to your visitors' browsers. This is the case even if your visitors try to access it directly. They'll just end up being supplied your feedback form instead. If you don't believe me, you can test it yourself later when you've successfully installed everything. Instructions for this (as well as explanations why this is the case) are provided in the section on testing below.
Immediately save the file. In Notepad, this means to click "File | Save As..." from the menu.
A dialog box should appear. Navigate to the same folder where you placed your home page (index.html). Make sure you remember to do this. Don't save in the default location provided by Notepad (or whatever text editor you are using).
Type "feedback.php" in the "File name" field. If you are using Notepad, make sure you include the
quotation marks, that is, literally type "feedback.php", inverted commas and all. If you
don't include those punctuation marks,
Notepad
will take it upon itself to add a ".txt" extension and save it as "feedback.php.txt" without telling you,
and you won't be able to detect that it has done this unless you have
configured
Windows to show you the full filename.
Click the "Save" button (or the equivalent in your software) to save the file.
Close (ie, quit) your text editor so that you don't accidentally modify the program by mistake. You won't need it any more.
Start up BlueGriffon if you have not already done so.
In chapter 7, you have already created multiple pages for your website using your home page as the template.
Repeat the process for a new page, this time saving the page as "feedback.html" (without the
quotation marks) in the same folder as your home page. This is important. Even if you have
created additional subdirectories for some of the other pages of your site and placed your files there, your
"feedback.html" should be in your site's main directory, since all the URLs you entered into the
Wizard earlier assumed that.
In addition, remember to change the "Title" field for that page in "Format | Page Properties" to "Feedback Form" (without the quotation marks), or if you prefer, to "Contact Form", "Support" or whatever. Change the heading you placed at the top of your page accordingly as well, and delete whatever content you don't want for that page.
For those who have not followed this tutorial series from the chapter 1: just create a new page for your
feedback form using whatever procedure you are accustomed to using, but save the page as "feedback.html"
(without the quotation marks) in the same directory as your home page. If you think the previous sentence sounds
too vague, and you don't know how to do this, you probably need to start from
chapter 1.
Click "File | Save" to save the file before you continue.
Switch back to the Wizard's results page.
Click somewhere in the box in the "HTML Code" section. The contents of the box should automatically be highlighted. Click your right mouse button and select "Copy" from the pop-up menu.
Return to BlueGriffon. Decide where you want the form to appear. For most people, it should be under your heading in the right column. Click that spot with your mouse to put your text cursor there.
Click the "Source" button near the bottom of the BlueGriffon window. If you recall from previous chapters, this will take you to the underlying HTML code for your web page. Since you have already positioned your cursor in the previous step, your text cursor should be at the approximate spot where you want the form code to be inserted.
Click "Edit | Paste" from the menu. The HTML code from the Wizard should appear.
Click the "Wysiwyg" button near the bottom of the BlueGriffon window. You should now see the form on the page. Don't worry if the fields are too narrow. We will adjust the appearance in the next section.
If you find the feedback form adequate for your needs, and don't want to fiddle with its appearance, feel free to skip this section. This part of the tutorial is for those who want to change how it looks.
Click the box next to "Name". (There will be no visible changes when you do this, except that
the status bar at the bottom of the BlueGriffon window will show "<input #tswname>"
after the other tags already there.)
Click "Panels | Style Properties" to open the "Style Properties" panel.
Click the line that says "GEOMETRY" in that panel. The options related to the size of the field should appear.
Click to put your cursor in the "Width" field.
If you want the field to always stretch up to fill, say, 70% of your right column, select "0%" from the drop down list and change "0%" to "70%" (without the quotation marks), making sure that there is no space between your number (ie, "70") and the unit of measure (ie, "%").
To change the width of the Email field, click the box next to "Email" on your web page. The contents of the Style Properties panel should change immediately to reflect the settings currently in place for that field. Modify "Width" so that it has the same value you set for Name.
(Technically, your Email field does not have to have the same width as Name. However, since that results in a form that looks somewhat lopsided, many people prefer to set it to the same width. You are of course not obliged to do this.)
Note: the widths of the various fields do NOT affect how much your visitors can type into them. Even if you make the widths horrendously narrow, your users can still enter a complete novel into them if they wish, since the web browser will automatically scroll as they type. In other words, changing the widths is merely something you do to make the form look pleasing to you. You don't have to worry about how wide they need to be to accomodate your visitor's name and email address. This applies to the Comments field as well.
Click the Comments field. If you have already closed the "Style Properties" panel, open it again by clicking "Panels | Style Properties" from the menu.
Expand the GEOMETRY section if necessary. (It should already be expanded, since you did it in the previous step. However, if you have collapsed it since then, you will need to click that heading again to expand it.)
As before, you can adjust the width of the Comments field by modifying the number in the "Width" field.
If you find the height of the field to be too short or too tall, enter a value into the "Height" field. This time, however, you should not use "%" as a unit. Try using "em" instead. For example, select "0em" from the drop down box and change it to "15em" (without the quotation marks) to make the Comments field take up approximately 15 lines of text.
If you don't want the button at the bottom of the form to say "Send Feedback", doubleclick the button. (That is, click the button twice in the same spot in quick succession.)
A dialog box with the title "Insert or edit a form input" will appear. Change the words "Send Feedback" in the "Value" field to whatever you like. Do not change anything else in that dialog box, or your form may not work correctly later.
Click the "OK" button when you are done.
If you decide that you don't want the fields to have the labels "Name", "Email" and "Comments", preferring instead some other words, simply click to put your text cursor on your web page and modify those words accordingly. Those labels are simply ordinary words inserted into your web page, and can be changed to whatever you want. For example, you can change "Name" to "Full Name", "Email" to "Email address", and "Comments" to "Feedback" or whatever. You can also change the fonts for those words in the usual manner.
If you have changed the background colour of your page in chapter 4, and need to modify the colour of the Name, Email and Comments fields to match, click the field in question once to select it.
Then open the Style Properties panel and expand the "COLORS" section. You can then change the background and foreground (ie text) colours in the usual way.
Remember to save your work with "File | Save". Then close the file with "File | Close current tab".
The Thank You and Error pages are just straightforward web pages. As such, you should have no trouble creating them in BlueGriffon. Just do the same thing you did in BlueGriffon when you created your other pages in chapter 7. Remember to change the TITLE fields of those pages to say something like "Feedback Sent" or "Message Sent" (for the Thank You page) and "Error" (for the Error page).
For those who are unsure what to write for your Thank You page, here is one possibility:
Note that you can say whatever you want. The above is just an example. The Thank You page is merely to let your visitors know that their comments have been sent. Otherwise they will wonder whether clicking the "Send Feedback" button had any effect.
If you're not sure what to say on your Error page, write something like this:
As before, if you don't like my choice of words, just say whatever you want.
Save the Thank You page as "thankyou.html" and the Error page as "error.html" in the same folder as
your home page and feedback form. Do not use any other names. Do not use capital (uppercase) letters. Do not add spaces
to the filenames. These are the exact same names you entered into the Feedback Form Wizard when you created the script;
using different names now will result in your feedback form not working correctly, since they will not match
what you told the script to use.
Upload (ie, publish) all the files to your website in the usual way. (For those who came to this chapter from outside thesitewizard.com, and don't know what "the usual way" means, read How to Use FileZilla to Upload Your Files.)
Make sure that you upload all four files: the feedback form script ("feedback.php"), the web form page ("feedback.html"), the Thank You page ("thankyou.html") and the Error page ("error.html"). And all of them must be placed in the same folder as your home page ("index.html").
Since a feedback form is more than just a normal web page, there are many additional things you need to test before you can be sure it works as it should.
Go to the home page of your website. Click the "Feedback" button (or "Contact" or whatever you called it) in your navigation menu to go to the form. You should arrive at the form page you just uploaded. If you get an error message saying 404 File Not Found (or words to that effect), it means that you gave your feedback form a different name from that used in your navigation menu button. Either fix the link in your navigation menu so that it points to the actual file you created (see chapter 6 for this), or redo this chapter and give your feedback form page the same filename you used in the menu.
If you don't have a navigation menu, just go to the next step.
Before testing your feedback form, go to the site map you created in chapter 7. There should be a link to your feedback form there. Click it. If you end up at your feedback form again, go to the next test. If you don't, you have a mismatch between URL you used in the Site Map and the one you actually used when you created the file. Fix it so that they both refer to the same address.
As before, if you don't have a site map, just skip to the next step.
For this test, you should be at your feedback form page. Click the "Send Feedback" button. Yes, I know you haven't entered 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 the URL of your Error page. This may mean that you gave your Error page a different filename from that which you specified to the Wizard. Or you may have made a typographical error when you typed the URL of your Error page into the Wizard. Unfortunately, this error probably means that you have to redo this chapter again.
If your web browser offers to let you save "feedback.php" instead of showing you the Error Page, it means that your web host does not have PHP installed, or that they have set it up incorrectly. Without PHP installed (and properly configured), the web server does not know that the feedback form script is actually a computer program, and as such, sends it to the browser, thinking that it's just a document to be displayed or a file to be downloaded. Your only solution at this point is to either move to a web host with PHP installed, or do without a feedback form.
Go back to your feedback form page. Now complete all the fields in the form and click the "Send Feedback" button.
You should end up at your "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 not match the actual address of your Thank You page. Redo this chapter to fix the error. This time, check carefully that 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 or capital letters in the names. Those are the causes of many problems with URLs not matching.
Just because you get the Thank You page doesn't mean that your email will arrive safely. As mentioned earlier in this article, the Thank You page merely indicates that the script has handed the message to the specialised ("specialized") email programs running on your web host's computer. It doesn't mean that those programs have delivered your message or anything like that. In fact, you will even get the Thank You page if you made a typing error in your email address and your message goes nowhere because nobody can deliver email to a non-existent address.
In addition, different web hosts deliver email sent from web forms at different rates. The speed of delivery also depends on whether you are sending the feedback to a mailbox on your web host itself (which tends to be very fast) or to an external email service like Gmail. On one of the web hosts where I have tested this form, email sent from forms take many hours before arriving. If you are using such a host, I guess you will just have to be patient.
If you do not get your test message after waiting at least a few hours, see the checklist of things to do when you don't get your email. You may also want to try the obvious step of making sure that you entered your email address correctly into the Wizard.
Remember that I said earlier that the email address that you saw in the script will not be displayed in your visitors' web browsers even if they specifically put its URL in the address 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 that
you uploaded should be at "http://www.example.com/feedback.php". That is, take the URL of
your feedback form, and change the part at the end that says ".html" to ".php".
Type that new address into a tab (or window) in your browser's address bar and hit the ENTER key.
You should be magically transported to your feedback form. That is, you will not see the program code. In fact, the script was never, at any moment, transmitted to your browser.
Explanation: a web server that has PHP installed distinguishes between normal web pages and PHP scripts. If it sees a normal web page, like your home page, it sends that document to 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 to be 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 Feedback Form Wizard notices that it was accessed directly (instead of through the "Send Feedback" button). Since it has nothing to do (having no email to send), it simply tells your visitor's browser to go to the form instead. That's why you ended up at your feedback form.
(If you encountered a "404 File Not Found" error instead of the form, you've either typed the wrong URL into the browser, or you supplied the wrong address for the "URL of Feedback Form" field in the Wizard when you first created your script.)
Congratulations! You have not only successfully installed a feedback form on your website (a task considered one of the 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 navigation menu, 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 about thesitewizard.com by linking to it. Some linking suggestions can be found here, but feel free to link to any page you like (like my guide on creating a website or this BlueGriffon tutorial). Please don't forget thesitewizard.com as you move on from here with your newfound skills as a webmaster (and, of course, your new site).
Incidentally, you can also find additional articles on BlueGriffon on thesitewizard.com. Those guides are not included in this main tutorial series because they deal with things that not everyone needs to do. If I included everything you can do with a web editor here, you will be overwhelmed and become discouraged. As such, this main tutorial concentrates on the core set of skills and knowledge needed to build a site, leaving the extra features that only a few people want to separate standalone articles.
There is more to website creation than simply designing its pages. A few of the other things to do are mentioned in How to Create a Website, but you can also take a look at my Site Map to see the list of other articles that deal with frequently-needed webmaster tasks.
All the best for your site!
Copyright © 2017-2024 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 BlueGriffon 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 Contact Form to Your Website with BlueGriffon
