Creating and Validating a Rootsweb Guestbook

Create the Guestbook 

Step 1: Create the guestbook by following these instructions.

Step 2: Copy the form code into your webpage (using copy/paste works best). Be sure to fill in the areas that are red and in the brackets below, with the information as you originally entered it into the form. If you don't know your guestbook's ID number, you may retrieve it through PasswordCentral.


<!-- ************************ BEGIN GUESTBOOK ********************* -->
<a name="guestbook">\;</a>
<form method=POST action="http://resources.rootsweb.ancestry.com/~guestbook/cgi-bin/public_guestbook.cgi?gb=[your guestbook id goes here]&action=submit">
<center>
<h2>Sign Our Guestbook</h2>
<a href="http://resources.rootsweb.ancestry.com/~guestbook/cgi-bin/public_guestbook.cgi?gb=[guestbook id goes here]&action=view"><img src="view.gif" border=0></a>
</center>
<p>&nbsp;</p>
<table border=0>
<tr><td>Name: <INPUT TYPE=text name="name" size=28></td></tr>
<tr><td>Email: <INPUT TYPE=text name="email" size=28></td></tr>
<tr><td colspan=2> </td></tr>

<!-- ****************************** Note ************************************ -->
<!-- ** Use these following lines if you chose to ask your visitors questions ** -->
<!-- ** (remove these if you did NOT chose to ask your visitors questions) ** -->
<tr><td>[Question #1 goes here]: <INPUT TYPE=text name="personal1" size=28></td></tr>
<tr><td>[Question #2 goes here]: <INPUT TYPE=text name="personal2" size=28></td></tr>
<tr><td>[Question #3 goes here]: <INPUT TYPE=text name="personal3" size=28></td></tr>

<!-- ****************************** Note ************************************ -->
<!-- ** Use the following lines if you did NOT chose to ask your visitors questions ** -->
<!-- ** (remove these if you DID chose to ask your visitors questions) ** -->
<input type=HIDDEN name=personal1 value="">
<input type=HIDDEN name=personal2 value="">
<input type=HIDDEN name=personal3 value="">
<!-- **************************** End Note ********************************** -->
</table>
Comments:<BR>
<TEXTAREA COLS=60 ROWS=7 name="comment" wrap="virtual"></TEXTAREA>
<p>&nbsp;</p>
<center>
<table border=0>
<tr>
<td valign=top><input type="image" src="sign.gif" border=0 ALT="Sign the Guestbook"></td>
<td valign=top><input type=reset value=" Clear "></td>
</tr>
</table>
</center>
</form>
<p><hr></p>
<p>&nbsp;</p>
<center>
<a href="http://resources.rootsweb.ancestry.com/~guestbook/"><img src="gbbutton.gif" border=0></a>
</center>
<p>&nbsp;</p>
<!-- ************************ END GUESTBOOK ********************* -->

Step 3: Get the Graphics
Make sure the path to ANY of the images you use is correct. The form above assumes the graphic images are in the SAME directory as the guestbook form. You can save the image on your hard drive by using your mouse, right-click on the image you want. Select 'Save As' to save the image.

   

or you may use

Validate Guestbook Code for HTML doctype

Step 1: Validate your Guestbook Screenshot of code created by RootsWeb Guestbook Generator

  • Using the HTML doctype, the code as generated has 8 Errors, 1 warning
  • Using the XHTML doctype, there are 130 Errors, 5 warnings

Step 2:  Remove all opening and closing <P></P> tags from the code

Step 3: Add the missing closing </td> tag at the end of this line
<td>Email: <INPUT TYPE=text name="email" size=28>

Step 4: Remove the extra closing </center> tag after this line
<TEXTAREA COLS=60 ROWS=7 name="comment" wrap="virtual"></TEXTAREA>

Step 5: ALL images require an alt tag in order to validate. Add one to this line of code or delete that line if you do not want to show the Free Guestbook button
<a href="http://resources.rootsweb.com/~guestbook/"><img src="gbbutton.gif" border=0></a>

Add an alt tag to the View Guestbook button

Step 6: The ampersand sign & will not validate so change it to the code which is &amp;

Step 7: Validate the code again and you are down to 2 errors and no warnings.

Step 8:  border="0" will not validate as part of the input tag so either change the code to
style="border:0px" 

OR better yet, add the following to your external style sheet

body img {border: 0px; text-decoration: none;} and delete all instances of border="0"

Step 9: Validate the code again and you are down to 1 error.

Step 10: The last error is wrap is not permitted for the textarea so you can delete this line of code
wrap="virtual"

NOTE: Netscape introduced this attributes a few years ago as proposed extensions to HTML 3.0, then abandoned them. Officially, the HTML 4.0 specs don't list WRAP, but Netscape and MSIE list WRAP = HARD | SOFT | OFF in their guides. From HTML Code Tutorial.

Step 11: Validate the code again and you should receive the message "This document was successfully checked as HTML 4.01 Transitional!"

Validate Guestbook Code for XHTML doctype

Follow Steps 1-10 for making corrections to the guestbook code

Step 11: Validate the code again and you should receive the message that you have 101 errors.

Step 12: alt and attribute tags must be in lowercase AND all tags must be closed or self closing:

NOTE: If you are using FrontPage 2003 or Expression Web any version, right click in code view and choose Apply XML formatting rules. You will now have only 16 errors to fix.
If you are not using Expression Web, you will need to manually go through and add the closing / to your tags.

Step 13: Change method="POST" to method="post"
Change all instances of TYPE to type
Change all instances of INPUT to input
Change TEXTAREA to textarea
Change COLS to cols
Change ROWS to rows
Change BR to br
Change CENTER to center
Change ALT to alt

Step 14: Validate your page and you should receive the message "This document was successfully checked as XHTML 1.0 Transitional!"

Step 15: If you are using the XHTML doctypes on your RootsWeb sites then you will need to upload a banner_select file in order for your pages to validate.

Making the Guestbook Accessible

Forms represent the one area of your web site where you absolutely must commit time and energy to ensure user accessibility. Even though forms represent some of the most complex interactions that can occur on a web page, in many cases these interactions are only represented visually -- via the proximity of a form element to its label, or grouping by borders and background colors. Users of assistive technology such as screen readers may not be able to see these visual clues, so it's vital that you support these users by ensuring accessibility. The key concept behind providing an accessible form is to have descriptive labeling of all its sections and input elements.

In particular, this means the proper usage of two elements: label and legend. There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now! ~  from SitePoint ~

Instructions on how to make your Rootsweb Guestbook Accessible

Upload or Publish your Guestbook

Step 1: Upload the guestbook webpage and the graphics to the Rootsweb servers as you normally do. You can use FileZilla or WS_FTP or your web editor to do this.


Validated guestbook using HTML doctype N.B. The example will not validate on the server as I have uploaded a banner_select file so that this site will validate using the XHTML doctype.

Validated guestbook using XHTML doctype

Validated guestbook using XHTML Strict doctype styled to match site

N.B. Your results page will NOT validate and you do NOT have access to the code to fix it so that it does.