HTML LESSON 6: Guestbooks

		HTML Lesson Six

Back to Main Menu

ADDING A GUESTBOOK

There are links (for the faint of heart) on the links page to get a free guestbook. If you want to make your own guestbook, read on......!

To make your very-own-special-do-what-you-want-change-what-you-want-anytime-you-want Guestbook, you need to create three different files.

The Sign My Guestbook Page (where people can sign in).
Let's call this "mybook.html".
The View My Guestbook Page (where you and everyone else can see what other people wrote - if you don't want other people to view your guestbook, just don't add a link to there from your page. However, that might be rude.).
Let's call this page "myguests.html".
The GBT File (which tells the input from the Sign My Guestbook Page to go onto the View My Guestbook Page and what to look like when it gets there).
Let's call this "myguests.gbt".
Very Very Very Important: The GBT file must be the same name as the View Page name except with the ".gbt" extention instead of ".html". Why? Because the Sign Page sends info through the GBT file to the View Page. The GBT file formats the info and tells it HOW to show up on the bottom of the View Page. If they aren't the same file name, they won't communicate.

The Sign My Guestbook Page

Welp, let's get started with the Sign My Guestbook Page. First you have to decide what you want to ask your Faithful Reader about. They must be faithful if they got to bottom of your page where everyone usually puts the "Sign My Guestbook" option. After all, if you opened a page and the first thing you saw was a plea to sign a guestbook, would you? Probably not. No, it's up to you to convince Faithful Reader your page is worthy of the time it takes to sign!

Oops, I digressed. As I was saying, let's get started with the Sign My Guestbook Page...

What do you want to know about your guests? Well, obviously you'd like to know their screenname and/or their email address. Maybe you'd like to ask them to enter their own web page address if they have one. And maybe you'd like to give them a place for comments so they can pat you on the back for all your hard work!

These four options (screenname, email, web page and comments) will give you enough information to work with to add your own questions so let's just dive into the code and I'll explain as we go along. This will be kind of a review too.

First of all, start the Sign Page with the usual stuff.
(Note: never enter the <html>, </html> or <body>, </body> codes in Personal Publisher. PP enters those codes automatically.)

<html>
<head>
<title>Screenname's Guestbook</title>
</head>
<body>
<center><h2>Welcome to My Guestbook!</h2> <br><br>
<hr>
Thanks for stopping by...<br>

So far we've said "Put 'MyName's Guestbook' in the blue title bar and then insert a heading and horizontal rule. Under the horizontal rule insert the text 'Thanks for stopping by...'" Your page will look like this so far (just what's between the purple lines):

Welcome to My Guestbook!

Thanks for stopping by...

Next Step: Create a Form

Now we need to create a form. This is where the guests will enter their input. We're going to start a form and tell it what to do. (Enter this in an "HTML" box in Personal Publisher.)

Enter this code:
<form action="/cgi-bin/guestbook/screenname/myguests.html" method="post"><br><br>

This says, "Start a form to send stuff to my View Page (named remember, "myguests.html") and post it there."

Now ask your questions!

1. To ask their screenname enter this:
What is your screenname?<br>

Then make a place for them to answer you:
<input type="text" name="screenname" size="60"><br>

"Input" is a special HTML code to create an area where Faithful Reader can enter something. This says what they will input is going to be text, and we have to give it a name so your gbt file (the simplest form to create!) will know where to put it, thus, "screenname". And "60" is how wide the single line text box will be.

And this is what will appear:

What is your screenname?

Check it out! Type something in this box!
(Of course, there's nowhere for what you typed here to go. That comes later when we create a "Send" button!)

2. To ask their email address enter this:
Please enter your complete email address. (i.e. JayneCG@aol.com)<br>
(Of course you'll put your complete email address here, not mine!)

Then make a place for them to answer you:
<input type="text" name="email" size="60"><br>

And now you have another input box:

Please enter your complete email address. (i.e. JayneCG@aol.com)

Looks the same, doesn't it? Not exactly... this one names their input as "email" and puts it in a different place than "screenname" when it's posted on the View Page.

3. To ask them about their web page enter:
If you have a web page please enter your URL:<br>

And add another place for Faithful Reader to answer:
<input type="text" name="page" size="60"><br>

And now you have a third box:

If you have a web page please enter your URL:

This box names their input "page".

4. And how about a comment box? Enter this code:
Please let me know any comments, suggestions or questions you may have about my web site:<br>

And now give them a bigger place to enter comments:
<textarea name="comments" rows=8 cols=55></textarea><br>

"Textarea" (one word) is another special HTML code. Textarea works the same way as <input> except it will let us define more area to enter text. We named it "comments" and then we have to define how big an area to make, thus the rows and cols codes. You also have to remember to close this code!

And whalah!

Please let me know any comments, suggestions or questions you may have about my web site:

Now create a Send button!

All that's left on the Sign Page is to create a way for them to send their input to your guestbook.

Enter this code:
<input type="submit" value="Send"> <input type="Reset" value="Reset"><br>

The first code creates Button #1 and identifies the input (Faithful Reader's click) as a submit command and the value code says to put the word "Send" on the button.

The second code creates Button #2 and identifies it's input as a reset command which means to clear all entries. If you typed anything in the boxes above, this Reset button will clear them. I haven't connected the Send button to anywhere but if you click it you will see the warning message your guests will see - unless, of course, you have your own security warning messages turned off.)

So now you have two buttons!

Hey! We're almost done!

Now close the form and close the page! Enter:
</form>
</body>
</html>

(In Personal Publisher, just enter the </form> code)

Now you have a guestbook. However, what did we forget to do??? Lemme think, lemme think. (Is it getting smoky in here?)... By George! I think I've got it (read that with an English accent, please)...

We have to make a link to the guestbook from your page!

Go back to your home page and enter this code at the bottom:
<a href="mybook.html">Sign My Guestbook</a><br>

And this will appear on your page (but it will be a link to signing your guestbook):
Sign My Guestbook

The View My Guestbook Page

Now we have to create a whole new page (name it "myguests.html) to view what Faithful Readers have written. Create a new page and start it the same as the Sign My Guestbook page except

Change your <title> to View My Guestbook and
Change your heading <h2> to something like, "Thanks for signing my guestbook!"

Then write an intro for the entries, something like this will work:
<p align="left"><font size="3"><b>Here is what previous visitors have written about my web site:</b></p><br>

And guess what? You're done with the View My Guestbook Page!

You do NOT need the "close this page" codes:
</body>
</html>

Now go back to your home page and below the Sign My Guestbook link you just created...

Enter this code:
<a href="myguests.html">View My Guestbook</a><br>

This will appear on your page (but it will be a link to seeing your guestbook):
View My Guestbook

The GBT File

Do do do do...this sounds complicated doesn't it? Have no fear! This is the easiest part of all!

YOU DO NOT NEED the usual
<html>, <head>, <title> or <body>
in this document!

All you are going to enter is what order and how you want Faithful Reader's input to be displayed on your View Page. Create the GBT File and name it "myguests.gbt".

How...? (NOTE: You CANNOT create this file in Personal Publisher. You MUST follow these instructions and upload this file directly to your FTP space by going to Keyword "myplace")

Open Notepad (under Accessories).

Click on File, then Save As. Choose the directory you want to save it in.

In the "File name:" box type this ---> myguests.gbt

Important: In the "Save as type:" box make SURE you choose All Files (*.*) and not Text Documents (.txt)... if you forget this step your file name will be myguests.gbt.txt and it won't work!

Here's a sample .gbt file (complete, whole, this is all you need from start to finish!):

<font size="3">
#date#
#time#<br>
<b>Screenname: #screenname#<br>
<b>Email Address: #email#<br>
<b>Web Page: #page#<br>
<b>Comments: #comments#<br>
<center>
<hr color =#000000" size=5%>
</center>
<p>

You can just copy the above onto Notepad. I get many emails asking me how to copy and paste so if you don't know, here's instructions.

DO NOT COPY THE ABOVE FROM "VIEW SOURCE"!!!!
Sorry for shouting but I mean it! I have to make my source code jump through hoops to get it to display for you. Just copy it right from THIS page or you will get gobbledegook on your Notepad!

Now, what does the above myguest.gbt do?
Translation:
This says, "insert the date and time Faithful Reader signed my guestbook.
Then enter Faithful Reader's input (according to what we named that input).
Next put a medium thick horizontal rule between entries."

What it will look like is between the purple lines:
(Faithful Reader's entries are in the red letters below - the date and time are entered automatically.)

date time
Email Address: Faithful Reader's email here
Web Page: Faithful Reader's web page here
Comments: Faithful Reader's comments here

Of course you can change the size or color of the HR since you've already done Lesson 2, right? You can change the font face, size, color. You can change the background color, add some music and some pics too. Know why?

Because this guestbook is your creation and under your control!

Quick Upload Lesson

Don't forget to upload all three sections of the guestbook to your FTP. If you used the Add HTML code part of Personal Publisher to create the Sign and View pages, great! You cannot use Personal Publisher to create the .gbt file though!!! You must follow my instructions and use Notepad. Why? Because Personal Publisher will automatically save the file with a .html file extension.

If you are using Personal Publisher you MUST upload the .gbt file directly. It's simple. If you've never uploaded yet here's a quick lesson:

Go online and click on the Keyword button.
Type in ---> myplace.
Click on Go To My Place.
Click on the Upload button.
Type in ---> myguests.gbt
Click on the ASCIII (text document) button.
Click on the Continue button.
Click on the Select File button.
Find the myguests.gbt file wherever you saved it on your hard drive and click on it once.
Click on the Open button.
Click on the Send button.

Wow!!! You just learned how to upload! If you want to know more about uploading, it's covered in the Freedom From Personal Publisher Lesson.

»NEW!« More Cool Form Codes

So... think you're ready for the more complicated codes? PLEASE ignore this section until after your guestbook is up and running! You can always come back to this section later and add these codes, k? Do a simple guestbook, get it right and then add these options later.

Radio Buttons
If you want to ask Faithful Reader a question and have just one answer returned, radio buttons are an option.

To put a radio button option on your page enter:
Did you like my page?<br> (or whatever question you want)
<input type="radio" name="like" value="Yes">Yes<br>
<input type="radio" name="like" value="No">No<br>
<input type="radio" name="like" value="Maybe">Maybe<br>

And this will appear:
Did you like my page?
Yes
No
Maybe

Pssst... click on the buttons and you'll see that only one can be chosen!

Code translation:
This says the input is going to be from a click on a radio button. We're naming it "like" and the value tells what radio answer to display on the View Page. Then we enter the value again so Faithful Reader can see it.

On your GBT file remember to add a code for Faithful Reader's answer to appear. In this case you'd enter something like:
Did you like my page? #like#<br>

Option Boxes
So how to you make those drop down option boxes? Basically it's pretty simple.

To make a drop down box enter:
Which page did you like best?<br>
<select name="bestpage">
<option value="My Home Page">My Home Page
<option value="My Links Page">My Links Page
<option value="My Football Page">My Football Page
<option value="My Music Page">My Music Page
</select>

(NOTE: You do NOT need a <br> after each option value line!)

And this will appear:
Which page did you like best?

Notice you can only select one option in the option box, just like the radio buttons.

Suppose you want to "stack the deck" and choose which one appears in the box when Faithful Reader sees it? Just add the word "selected" to ONE of the options!

For example, to choose which answer to display in the box, change one line above to:
<option value="My Music Page" selected>My Music Page

And My Music Page now appears in the box before it's clicked on:
Which page did you like best?

To call for this answer to be displayed on your View Page, enter this in your GBT file:
Which page did you like best? #bestpage#

Checkboxes
Ok, so what if you want Faithful Reader to be able to give more than one answer? Then you want to use checkboxes!

To make checkboxes, enter this code:
Which page did you like best?<br>
<input type="checkbox" name="home" value="My Home Page,">My Home Page<br>
<input type="checkbox" name="links" value="My Links Page,">My Links Page<br>
<input type="checkbox" name="football" value="My Football Page,">My Football Page<br>
<input type="checkbox" name="music" value="My Music Page,">My Music Page<br>

And this will appear:
Which page did you like best?
My Home Page
My Links Page
My Football Page
My Music Page

Click on the boxes and you'll see that you can choose as many of them as you want!

NOW! Calling for checkbox answers in your GBT file are a little different since you CAN choose more than one answer. Handling checkboxes are different in two ways.

Think about it. When we had radio buttons and the option box, only one answer could be chosen. Therefore only one answer could be sent to the GBT file to be displayed on the View Page. So we could give all the answers the same "name."

Now we have a whole BUNCH of answers coming into the GBT file as possible answers to just ONE question. So...

We have to "name" each answer a different name.

Now, look at the code once more. See the commas after the each of the values?
(i.e. value="My Home Page,")This comma will be added on your View Page to separate the answers. Do not put commas in the GBT file. (Trust me... just don't! The View Page would end up with a bunch of "space comma space comma space comma" for all the options Faithful Reader didn't choose.

In your GBT file you can call for the answers by entering this:
Which page did you like best? #home# #links# #football# #music#
Enter the code for all the answers ("names"). Only the answers chosen by Faithful Reader will be displayed.

Remember! No matter what type of form code you use, to make it appear on your View Page you just enter #name# where "name" is whatever you called the input no matter what kind of "input" it is (like radio button, typed text, option box, checkbox, etc.).

»NEW!« "Hidden" Form Codes

Now I'm going to really cut down on the questions in my mailbox. Should I or shouldn't I? Hmmm...

Even though I dislike the fact that AOL advertises on TV since many nights I can't even access the web due to traffic (I get the ol' "Operation Timed Out" message), I have to agree with the one ad that says something like, "Opening my mailbox is like opening a present."

Well, ok. I'm sure my mailbox is going to be full of questions anyway. 99.9% of them end up being typos in code anyway... LOL!

Would you like to know everytime someone signs your guestbook? Wouldn't it be neat if you could get an email that tells you so you don't have to check your guestbook only to find there were no new entries? Here's how!

Anywhere between <form> and </form> enter this code:
<input type="hidden" name="Notify" value="yes">

And you will get emails with the subject: "New Guestbook Entry"!

Now, what if you want to bypass the AOL "Thank You!" screen and send Faithful Reader straight to your View Page instead?

Anywhere between <form> and </form> enter this code:
<input type="hidden" name="ResponsePage" value="myguests.html">

If the name of your View Page is "myguests.html", Faithful Reader will go there as soon as the "Submit" button is clicked!

Congratulations!
You're almost done the HTML Lessons Tutorial!

There are lots of cool guestbooks out there. It's up to you to add the snazzy stuff yourself.

You are almost at the end of this tutorial so after you're done, go back to my links page and start looking for the cool stuff for your pages. You'll find lots of good sources of help there (including a link to an excellent site where I learned about creating forms!) plus places to get free graphics and sound files.

HTML LESSONS
One	Two	Three	Four	Five	Six	???

(Hold cursor over clickbox to see what's covered in each)