dlperry.com

Designing Intuitive Websites

[DLPerry.com] [Website Design] [Simply SEO] [Website Software] [Articles & Resources] [Free Resources Center] [Contact DLPerry]

Featuring Willmaster Website Software

Save / Share this page

dlperry.com- Internet Website Resources- masters series-

The Shopping List Scenario

Someone runs across your site and your shopping list service...

You have created a shopping list: selectable items on a webpage. The visitor checks off all the items s/he wants to purchase on the next local shopping expedition. Then the "Remember These Items" button is clicked and the information is saved in a "cookie" (a file on the visitor's computer).

The next time the visitor wants to add to the shopping list, here s/he comes back to your bookmarked site and checks off more items. "Click" and those items are saved, again in the cookie.

Eventually shopping day comes around. Here is your visitor, back on your site. This time the "Create a Printable Page" button is clicked. The page appears and the visitor prints the shopping list.

In a few days, the process is repeated. Another shopping list is begun.

Repeat Visitors

Setting up a "shopping list" service as described in this article can automatically and with near-zero maintenance, bring people back to your site, again and again, for as long as you make the service available. With a little encouragement, those people will begin exploring your site to see what else you may have to offer.

Our example is an online household supplies and groceries shopping list. A printer-friendly page is generated with the click of a button. This shopping list can fit in well with recipe, child raising, party supplies, and other web sites with homemakers as the largest demographic.

Home and garden maintenance web sites might vary the shopping list for lumber, nails, tools, how-to manuals, and other items essential to many do-it-yourself projects. The idea is that the indvidual will return to create a new personal list for each project.

Knitting, scrapbooking, crafting, and similar web sites can vary the list for their own site visitors. Large shopping sites might have several lists — craft, clothing ensembles, back-to-school, and other categories.

A live, ready to use, online household supplies and groceries shopping list example is ready for you to use.

Want a Wish List?

Would your web site benefit by providing an easy to use "wish list" for the products on your site?

If you have more than one product, and not more than would fit elegantly on a wish list page, all of your products can be listed. A wish list might use checkboxes instead of "how many" fields. Wishers can check the items they want to have.

Products or services on the wish list can be your own or your affiliate program's.

The wish list can ask for name and email address. Then, when the printer-friendly page is generated, the contact information can be sent to you along with their wish list. It makes personal follow-up possible.

Whether shopping list or wish list, the list details are remembered in a cookie for when the user returns.

How To Set It Up

Master Form V4 is the engine for the shopping/wish list. It can handle as many lists as you want to set up.

You will need to create and upload a web page with the list and a separate printer-friendly web page template. Here's how.

The Shopping List

The example household supplies and groceries shopping list is large. The page has a lot of code. Items may be removed or added, or a completely new list created.

Here is the example shopping list.

<html><head>

<style type="text/css">
<!--
body, td, p, .normal
 { font-family: arial,helvetica,sans-serif; font-size: 14px; font-weight: normal; line-height: 175%; background-color:#ffffff;}
h1 {font-size: 22px; font-weight: bold; text-align:center;}
h2 {font-size: 18px; font-weight: bold; text-align:center;}
h3 {font-size: 16px; font-weight: bold; text-align:center; background-color:#99ffff}
.nowrap { white-space: nowrap; }
input, textarea, .formtext { font-family: monospace,courier; }
.italic {font-style: italic; }
.bold { font-weight: bold; }
.bolditalic {font-style: italic; font-weight: bold; }
.indent {margin-left:30px;}
.small {font-size: 12px;}
.center {text-align:center;}
.submitbutton { font-family: arial,helvetica,sans-serif; font-size: 14px;  font-weight: normal; line-height: 18px; margin:5px;}
a:link, a:active, a:visited { color:#003366; font-weight: bold; text-decoration: none;}
a:hover { color:#990000; font-weight: bold; text-decoration: underline; font-weight:bold;}
-->
</style>

</head>
<body>
<div align="center">

<form 
 name="MyForm" 
 method="POST" 
 onsubmit="javascript:return RecordFormInformation();" 
 action="http://willmaster.com/master/formV4/cgi-bin/MasterFormV4.cgi">
<input type="hidden" name="flowto" value="http://willmaster.com/master/formV4/shoppinglistprint.html">


<table border="0" cellpadding="5" cellspacing="0" width="750">
<tr><td width="33%" colspan=3 >
<h1>Grocery Shopping List</h1>

<h2>
"Quantity" may have text instead of a number, like "some" or "lots."
</h2>
<p> </p>
</td></tr>

<tr>
<td width="33%" valign="top" colspan=3 >
<h3>Fresh Produce</h3>
</td></tr>
<tr>
<td width="33%" valign="top">

<input type="text" name="Apples" size="5"> Apples<br>
<input type="text" name="Bananas" size="5"> Bananas<br>
<input type="text" name="Lemons" size="5"> Lemons<br>
<input type="text" name="Lime" size="5"> Lime<br>
<input type="text" name="Melons" size="5"> Melons<br>
<input type="text" name="Oranges" size="5"> Oranges<br>
<input type="text" name="Strawberries" size="5"> Strawberries<br>
<input type="text" name="Watermelon" size="5"> Watermelon<br>
<span class="nowrap"><input type="text" name="FreshFoods1" size="5" nowrap> <input type="text" name="FreshFoods1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FreshFoods2" size="5" nowrap> <input type="text" name="FreshFoods2Name" size="22"></span>


</td><td width="33%" valign="top">
<input type="text" name="Broccoli" size="5"> Broccoli<br>
<input type="text" name="Carrots" size="5"> Carrots<br>
<input type="text" name="Cauliflower" size="5"> Cauliflower<br>
<input type="text" name="Celery" size="5"> Celery<br><input type="text" name="Corn" size="5"> Corn<br>
<input type="text" name="Garlic" size="5"> Garlic<br>
<input type="text" name="Lettuce" size="5"> Lettuce<br>
<input type="text" name="Zucchini" size="5"> Zucchini<br>
<span class="nowrap"><input type="text" name="FreshFoods3" size="5" nowrap> <input type="text" name="FreshFoods3Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FreshFoods4" size="5" nowrap> <input type="text" name="FreshFoods4Name" size="22"></span>


</td><td width="33%" valign="top">
<input type="text" name="Mushrooms" size="5"> Mushrooms<br>
<input type="text" name="Onions" size="5"> Onions<br>
<input type="text" name="Peppers" size="5"> Peppers<br>
<input type="text" name="Potatoes" size="5"> Potatoes<br>
<input type="text" name="Squash" size="5"> Squash<br>
<input type="text" name="Tomatoes" size="5"> Tomatoes<br>
<input type="text" name="Yams" size="5"> Yams<br>
<input type="text" name="YellowSquash" size="5"> Yellow Squash<br>
<span class="nowrap"><input type="text" name="FreshFoods5" size="5" nowrap> <input type="text" name="FreshFoods5Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FreshFoods6" size="5" nowrap> <input type="text" name="FreshFoods6Name" size="22"></span>



</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">

<h3>Frozen Foods</h3>

<input type="text" name="FrozenBroccoli" size="5"> Broccoli<br>
<input type="text" name="FrozenCarrots" size="5"> Carrots<br>
<input type="text" name="FrozenCorn" size="5"> Corn<br>
<input type="text" name="Peas" size="5"> Peas<br>
<input type="text" name="TVDinners" size="5"> TV Dinners<br>
<input type="text" name="FishSticks" size="5"> Fish Sticks<br>
<input type="text" name="IceCream" size="5"> Ice Cream<br>
<input type="text" name="Pizza" size="5"> Pizza<br>
<span class="nowrap"><input type="text" name="FrozenFoods1" size="5" nowrap> <input type="text" name="FrozenFoods1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FrozenFoods2" size="5" nowrap> <input type="text" name="FrozenFoods2Name" size="22"></span><br>

</td><td width="33%" valign="top">
<h3>Fresh Meat</h3>

<input type="text" name="Bacon" size="5"> Bacon<br>
<input type="text" name="Chicken" size="5"> Chicken<br>
<input type="text" name="Fish" size="5"> Fish<br>
<input type="text" name="Ham" size="5"> Ham<br>
<input type="text" name="Hamburger" size="5"> Hamburger<br>
<input type="text" name="PorkChops" size="5"> Pork Chops<br>
<input type="text" name="Roast" size="5"> Roast<br>
<input type="text" name="SandwichMeat" size="5"> Sandwich Meat<br>
<span class="nowrap"><input type="text" name="FreshMeat1" size="5" nowrap> <input type="text" name="FreshMeat1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FreshMeat2" size="5" nowrap> <input type="text" name="FreshMeat2Name" size="22"></span><br>


</td><td width="33%" valign="top">
<h3>Dairy</h3>

<input type="text" name="Butter_Margarine" size="5"> Butter/Margarine<br>
<input type="text" name="Cheese" size="5"> Cheese<br>
<input type="text" name="CottageCheese" size="5"> Cottage Cheese<br>
<input type="text" name="CreamCheese" size="5"> Cream Cheese<br>
<input type="text" name="Eggs" size="5"> Eggs<br>
<input type="text" name="Milk" size="5"> Milk<br>
<input type="text" name="SourCream" size="5"> Sour Cream<br>
<input type="text" name="Yogurt" size="5"> Yogurt<br>
<span class="nowrap"><input type="text" name="Dairy1" size="5" nowrap> <input type="text" name="Dairy1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Dairy2" size="5" nowrap> <input type="text" name="Dairy2Name" size="22"></span>



</td></tr>
<tr><td> </td></tr>
<tr>
<td width="33%" valign="top" colspan=3 >
<h3>Canned and Bottled Goods</h3>
</td></tr>

<tr>
<td width="33%" valign="top">

<input type="text" name="MixedFruit" size="5"> Mixed Fruit<br>
<input type="text" name="Peaches" size="5"> Peaches<br>
<input type="text" name="Pears" size="5"> Pears<br>
<input type="text" name="Pineapple" size="5"> Pineapple<br>
<input type="text" name="BakedBeans" size="5"> Baked Beans<br>
<input type="text" name="CannedCorn" size="5"> Corn<br>
<input type="text" name="GreenBeans" size="5"> Green Beans<br>
<input type="text" name="Peas" size="5"> Peas<br>
<input type="text" name="PintoBeans" size="5"> Pinto Beans<br>
<input type="text" name="RefriedBeans" size="5"> Refried Beans<br>
<input type="text" name="TomatoPaste" size="5"> Tomato Paste<br>
<input type="text" name="TomatoSauce" size="5"> Tomato Sauce<br>
<input type="text" name="Tomatoes_stewed" size="5"> Tomatoes - stewed<br>
<input type="text" name="Tomatoes_whole" size="5"> Tomatoes - whole

</td><td width="33%" valign="top">

<input type="text" name="Salsa" size="5"> Salsa<br>
<input type="text" name="SpaghettiSauce" size="5"> Spaghetti Sauce<br>
<input type="text" name="CannedChicken" size="5"> Canned Chicken<br>
<input type="text" name="CannedHam" size="5"> Canned Ham<br>
<input type="text" name="CornedBeef" size="5"> Corned Beef<br>
<input type="text" name="Salmon" size="5"> Salmon<br>
<input type="text" name="Tuna" size="5"> Tuna<br>
<input type="text" name="Soup" size="5"> Soup<br>
<span class="nowrap"><input type="text" name="CannedGoods1" size="5" nowrap> <input type="text" name="CannedGoods1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="CannedGoods2" size="5" nowrap> <input type="text" name="CannedGoods2Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="CannedGoods3" size="5" nowrap> <input type="text" name="CannedGoods3Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="CannedGoods4" size="5" nowrap> <input type="text" name="CannedGoods4Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="CannedGoods5" size="5" nowrap> <input type="text" name="CannedGoods5Name" size="22"></span>
<span class="nowrap"><input type="text" name="CannedGoods6" size="5" nowrap> <input type="text" name="CannedGoods6Name" size="22"></span><br>

</td><td width="33%" valign="top">

<input type="text" name="Jelly_Jam" size="5"> Jelly/Jam<br>
<input type="text" name="PeanutButter" size="5"> Peanut Butter<br>
<input type="text" name="OliveOil" size="5"> Olive Oil<br>
<input type="text" name="VegetableOil" size="5"> Vegetable Oil<br>
<input type="text" name="SaladDressing" size="5"> Salad Dressing<br>
<input type="text" name="Spices" size="5"> Spices<br>
<input type="text" name="Salt" size="5"> Salt<br>
<input type="text" name="Pepper" size="5"> Pepper<br>
<input type="text" name="BBQSauce" size="5"> BBQ Sauce<br>
<input type="text" name="Honey" size="5"> Honey<br>
<input type="text" name="Ketchup" size="5"> Ketchup<br>
<input type="text" name="Mayonnaise" size="5"> Mayonnaise<br>
<input type="text" name="Mustard" size="5"> Mustard<br>
<input type="text" name="SoySauce" size="5"> Soy Sauce<br>



</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">

<h3>Baking Supplies</h3>


<input type="text" name="BakingPowder" size="5"> Baking Powder<br>
<input type="text" name="BakingSoda" size="5"> Baking Soda<br>
<input type="text" name="BiscuitMix" size="5"> Biscuit Mix<br>
<input type="text" name="BrownSugar" size="5"> Brown Sugar<br>
<input type="text" name="BrownieMix" size="5"> Brownie Mix<br>
<input type="text" name="CakeMix" size="5"> Cake Mix<br>
<input type="text" name="Cocoa" size="5"> Cocoa<br>
<input type="text" name="Cornstarch" size="5"> Cornstarch<br>
<input type="text" name="Flour" size="5"> Flour<br>
<input type="text" name="Sugar" size="5"> Sugar<br>
<input type="text" name="Vanilla" size="5"> Vanilla<br>
<span class="nowrap"><input type="text" name="BakingSupplies1" size="5" nowrap> <input type="text" name="BakingSupplies1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="BakingSupplies2" size="5" nowrap> <input type="text" name="BakingSupplies2Name" size="22"></span>


<h3 style="margin-top:32px;">Misc.</h3>
<span class="nowrap"><input type="text" name="Misc1" size="5" nowrap> <input type="text" name="Misc1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Misc2" size="5" nowrap> <input type="text" name="Misc2Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Misc3" size="5" nowrap> <input type="text" name="Misc3Name" size="22"></span><br>


</td><td width="33%" valign="top">
<h3>Dry Pantry</h3>

<input type="text" name="BreakfastCereals" size="5"> Breakfast Cereals<br>
<input type="text" name="DriedBeans" size="5"> Dried Beans<br>
<input type="text" name="Jello" size="5"> Jello<br>
<input type="text" name="Oatmeal" size="5"> Oatmeal<br>
<input type="text" name="Pasta" size="5"> Pasta<br>
<input type="text" name="Rice" size="5"> Rice<br>
<span class="nowrap"><input type="text" name="DryPantry1" size="5" nowrap> <input type="text" name="DryPantry1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="DryPantry2" size="5" nowrap> <input type="text" name="DryPantry2Name" size="22"></span>


<h3 style="margin-top:32px;">Bread</h3>
<input type="text" name="Bagels" size="5"> Bagels<br>
<input type="text" name="Buns" size="5"> Buns<br>
<input type="text" name="Muffins" size="5"> Muffins<br>
<input type="text" name="Rolls" size="5"> Rolls<br>
<input type="text" name="WheatBread" size="5"> Wheat Bread<br>
<input type="text" name="WhiteBread" size="5"> White Bread<br>
<span class="nowrap"><input type="text" name="Bread1" size="5" nowrap> <input type="text" name="Bread1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Bread2" size="5" nowrap> <input type="text" name="Bread2Name" size="22"></span><br>


</td><td width="33%" valign="top">
<h3>Snacks</h3>

<input type="text" name="Candy" size="5"> Candy<br>
<input type="text" name="Cookies" size="5"> Cookies<br>
<input type="text" name="Crackers" size="5"> Crackers<br>
<input type="text" name="Nuts" size="5"> Nuts<br>
<input type="text" name="Popcorn" size="5"> Popcorn<br>
<input type="text" name="PotatoChips" size="5"> Potato Chips
<span class="nowrap"><input type="text" name="Snacks1" size="5" nowrap> <input type="text" name="Snacks1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Snacks2" size="5" nowrap> <input type="text" name="Snacks2Name" size="22"></span>


<h3 style="margin-top:32px;"> Beverages</h3>

<input type="text" name="Coffee" size="5"> Coffee<br>
<input type="text" name="Juice" size="5"> Juice<br>
<input type="text" name="SoftDrinks" size="5"> Soft Drinks<br>
<input type="text" name="SportsDrinks" size="5"> Sports Drinks<br>
<input type="text" name="Tea" size="5"> Tea<br>
<input type="text" name="Water" size="5"> Water<br>
<span class="nowrap"><input type="text" name="Beverages1" size="5" nowrap> <input type="text" name="Beverages1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Beverages2" size="5" nowrap> <input type="text" name="Beverages2Name" size="22"></span><br>



</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">
<h3>Pet Items</h3>

<input type="text" name="CatFood" size="5"> Cat Food<br>
<input type="text" name="DogFood" size="5"> Dog Food<br>
<input type="text" name="CatLitter" size="5"> Cat Litter<br>
<span class="nowrap"><input type="text" name="Pets1" size="5" nowrap> <input type="text" name="Pets1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Pets2" size="5" nowrap> <input type="text" name="Pets2Name" size="22"></span>

<h3 style="margin-top:32px;">First Aid</h3>

<input type="text" name="Aspirin_PainReliever" size="5"> Aspirin/Pain Reliever<br>
<input type="text" name="Bandaids" size="5"> Bandaids<br>
<input type="text" name="CoughDrops" size="5"> Cough Drops<br>
<input type="text" name="FirstAidCream" size="5"> First Aid Cream<br>
<span class="nowrap"><input type="text" name="FirstAid1" size="5" nowrap> <input type="text" name="FirstAid1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="FirstAid2" size="5" nowrap> <input type="text" name="FirstAid2Name" size="22"></span>


</td><td width="33%" valign="top">

<h3>Paper Supplies</h3>

<input type="text" name="Foil" size="5"> Foil<br>
<input type="text" name="Papercups" size="5"> Paper Cups<br>
<input type="text" name="Papercups" size="5"> Paper Cups<br>
<input type="text" name="Paperplates" size="5"> Paper Plates<br>
<input type="text" name="PaperTowels" size="5"> Paper Towels<br>
<input type="text" name="PlasticBags" size="5"> Plastic Bags<br>
<input type="text" name="PlasticWrap" size="5"> Plastic Wrap<br>
<input type="text" name="Tissue" size="5"> Tissue<br>
<input type="text" name="ToiletPaper" size="5"> Toilet Paper<br>
<input type="text" name="TrashBags" size="5"> Trash Bags<br>
<input type="text" name="WaxPaper" size="5"> Wax Paper<br>
<span class="nowrap"><input type="text" name="Paper1" size="5" nowrap> <input type="text" name="Paper1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Paper2" size="5" nowrap> <input type="text" name="Paper2Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Paper3" size="5" nowrap> <input type="text" name="Paper3Name" size="22"></span>

</td><td width="33%" valign="top">

<h3>Cleaning/Soap</h3>

<input type="text" name="BathSoap" size="5"> Bath Soap<br>
<input type="text" name="Bleach" size="5"> Bleach<br>
<input type="text" name="DishSoap" size="5"> Dish Soap<br>
<input type="text" name="DryerSheets" size="5"> Dryer Sheets<br>
<input type="text" name="FurniturePolish" size="5"> Furniture Polish<br>
<input type="text" name="GlassCleaner" size="5"> Glass Cleaner<br>
<input type="text" name="LaundryDetergent" size="5"> Laundry Detergent<br>
<input type="text" name="LiquidHandSoap" size="5"> Liquid Hand Soap<br>
<input type="text" name="PowderedCleanser" size="5"> Powdered Cleanser<br>
<input type="text" name="ShowerSpray" size="5"> Shower Spray<br>
<input type="text" name="ToiletBowlCleaners" size="5"> Toilet Bowl Cleaners<br>
<span class="nowrap"><input type="text" name="Cleaning1" size="5" nowrap> <input type="text" name="Cleaning1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Cleaning2" size="5" nowrap> <input type="text" name="Cleaning2Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Cleaning3" size="5" nowrap> <input type="text" name="Cleaning3Name" size="22"></span>


</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">


<h3>Baby Items</h3>

<input type="text" name="Fruit" size="5"> Fruit<br>
<input type="text" name="BabyJuice" size="5"> Juice<br>
<input type="text" name="Meat" size="5"> Meat<br>
<input type="text" name="Vegetables" size="5"> Vegetables<br>
<input type="text" name="Diapers" size="5"> Diapers<br>
<input type="text" name="Formula" size="5"> Formula<br>
<input type="text" name="Wipes" size="5"> Wipes<br>
<span class="nowrap"><input type="text" name="Babyitems1" size="5" nowrap> <input type="text" name="Babyitems1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Babyitems2" size="5" nowrap> <input type="text" name="Babyitems2Name" size="22"></span><br>

</td><td width="33%" valign="top">
<h3>Notes to Self</h3>
<textarea cols="22" rows="13" wrap="hard" name="NotesToSelf">
Notes to Self:
</textarea>



</td><td width="33%" valign="top">

<h3>Personal Items</h3>

<input type="text" name="Deodorant" size="5"> Deodorant<br>
<input type="text" name="Floss" size="5"> Floss<br>
<input type="text" name="Mouthwash" size="5"> Mouthwash<br>
<input type="text" name="Razors" size="5"> Razors<br>
<input type="text" name="Shampoo" size="5"> Shampoo<br>
<input type="text" name="Soap" size="5"> Soap<br>
<input type="text" name="Toothpaste" size="5"> Toothpaste<br>
<span class="nowrap"><input type="text" name="Personal1" size="5" nowrap> <input type="text" name="Personal1Name" size="22"></span><br>
<span class="nowrap"><input type="text" name="Personal2" size="5" nowrap> <input type="text" name="Personal2Name" size="22"></span><br>


</td></tr>
</table>

<div align="center">
<input class="submitbutton" type="button" value="Remember Form (no printing, yet)" onclick="RecordFormInformation();alert('Cookie has been updated!');">
<br> 
<input class="submitbutton" type="submit" value="Remember Form and Create Printable Page">
<br> <br> 
<input type="checkbox" name="verifyclear" value="yes">Check to confirm forgetting.<br> 
<input class="submitbutton" type="button" value="Forget All Form Information" onclick="ForgetFormInformation()">

<p>Powered by <a href="http://willmaster.com/master/formV4/">Master Form V4</a></p>

</form>

</div>


<!-- 
 Form field restore code and instructions can be found at 
 http://bontragerconnection.com/library/restoring_form_field_values.shtml
 The JavaScript was edited to make cookie last for a year for this shopping list.
 -->


<script type="text/javascript" language="JavaScript">
<!-- Copyright 2005 Bontrager Connection, LLC
// For more information, see the "Restoring Form Field Values" 
// article, first published in Possibilities ezine described 
// at http://willmaster.com/possibilities/
//
// The form's <form...> tag needs to contain this attribute:
// onsubmit="javascript:return RecordFormInformation();"

// Put this JavaScript somewhere below the form.

// Two variables in this JavaScript can be customized.

// Customizable variable 1:
// Between the quotation marks, specify the form name:
var FormName = "MyForm";

// Customizable variable 2:
// Between the quotation marks, specify the cookie name:
var CookieName = "FormRestoreCookie";


////////////////////////////////////////////////
//                                            //
//  No other customizations need to be done.  //
//                                            //
////////////////////////////////////////////////

function GetCookie() {
if(document.cookie.length < 1) { return ''; }
var cookiename = CookieName + '=';
var cookiebegin = document.cookie.indexOf(cookiename);
cookiebegin += cookiename.length;
var cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
return document.cookie.substring(cookiebegin,cookieend);
} // function GetCookie()


function ForgetFormInformation() {
if(eval('document.' + FormName + '.verifyclear.checked == false;')) {
	alert('Checkbox must be checked to confirm forgetting form information.');
	return false;
	}
var CookieString = new String('');
document.cookie = CookieName + "=" + CookieString;
location.href = document.URL;
} // function ForgetFormInformation()


function RestoreFormInformation() {
var CookieString = GetCookie();
if(CookieString.length < 3) { return; }
CookieString = unescape(CookieString);
var CookiePieces = CookieString.split('\t\t');
for(var i = 0; i < CookiePieces.length; i++) {
 var pieces = CookiePieces[i].split('\t');
 if(pieces.length < 3) { continue; }
 if(pieces[1] == -1) {
 if( (pieces[2].indexOf('radio') > -1) || (pieces[2].indexOf('checkbox') > -1) ) {
 eval('document.' + FormName + '.' + pieces[0] + '.checked = true;');
 }
 else {
 if(pieces[2].indexOf('select') > -1) { eval('document.' + FormName + '.' + pieces[0] + '.selected = true;'); }
 else {
 var ta = pieces[3].split('"');
 pieces[3] = ta.join('\\"');
 var ta = pieces[3].split('\n');
 pieces[3] = ta.join('\\n');
 eval('document.' + FormName + '.' + pieces[0] + '.value = "' + pieces[3] + '";');
 }
 }
 continue;
 } 
 if( (pieces[2].indexOf('radio') > -1) || (pieces[2].indexOf('checkbox') > -1) ) { eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].checked = true;'); }
 else {
 if(pieces[2].indexOf('select') > -1) { eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].selected = true;'); }
 else {
 var ta = pieces[3].split('"');
 pieces[3] = ta.join('\\"');
 var ta = pieces[3].split('\n');
 pieces[3] = ta.join('\\n');
 eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].value = "' + pieces[3] + '";');
 }
 }
 }
} // function RestoreFormInformation()


function RecordFormInformation() {
var l = new Number();
eval('l = document.' + FormName + '.elements.length')
var NameList = new Array();
for (var i = 0; i < l; i++) { 
 var FORMname = new String();
 var FORMfields = new Number();
 eval('FORMname = document.' + FormName + '.elements[i].name;');
 if(FORMname.length < 1) { continue; }
 eval('FORMfields = document.' + FormName + '.' + FORMname + '.length');
 if(parseInt(FORMfields) > 1) { FORMfields = parseInt(FORMfields); }
 else { FORMfields = 1; }
 NameList.push(FORMname + '\t' + FORMfields);
 }
var FORMfieldNameNumber = new Number();
var FORMvalue = new String();
var FORMtype = new String();
var Done = new String();
var CookiePieces = new Array();
for (var i = 0; i < NameList.length; i++) { 
 var FORM_NL = NameList[i].split('\t');
 if(Done.indexOf(' ' + FORM_NL[0] + ' ') > -1) { continue; }
 Done += ' ' + FORM_NL[0] + ' ';
 if(FORM_NL[1] == 1) {
 FORMvalue = '';
 FORMfieldNameNumber = -1;
 eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;');
 if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
 var checked = false;
 eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.checked;');
 if(checked == true) { FORMvalue = 'C'; }
 }
 else {
 if(FORMtype.indexOf('select') > -1) {
 var checked = false;
 eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.selected;');
 if(checked == true) { FORMvalue = 'S'; }
 }
 else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '.value;'); }
 }
 if(FORMvalue.length < 1) { continue; }
 CookiePieces.push(FORM_NL[0] + '\t' + FORMfieldNameNumber + '\t' + FORMtype + '\t' + FORMvalue);
 continue;
 } 
 for(var ii = 0; ii < FORM_NL[1]; ii++) {
 FORMvalue = '';
 FORMfieldNameNumber = ii;
 eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].type;');
 if(FORMtype == undefined) { eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;'); }
 if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
 var checked = false;
 eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].checked;');
 if(checked == true) { FORMvalue = 'C'; }
 }
 else {
 if(FORMtype.indexOf('select') > -1) {
 var checked = false;
 eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].selected;');
 if(checked == true) { FORMvalue = 'S'; }
 }
 else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].value;'); }
 }
 if(FORMvalue.length < 1) { continue; }
 CookiePieces.push(FORM_NL[0] + '\t' + FORMfieldNameNumber + '\t' + FORMtype + '\t' + FORMvalue);
 } 
 }
var CookieString = new String();
CookieString = CookiePieces.join('\t\t');
CookieString = escape(CookieString);
// // // // // //
// Next three lines added and the fourth line modified for shopping list application to make cookie last a year.
var now = new Date();
var then = now.getTime() + (365 * 24 * 60 * 60 * 1000); // Number of days * 24 hours * 60 minutes * 60 seconds * 1000 milliseconds
now.setTime(then);
document.cookie = CookieName + "=" + CookieString + '; expires=' + now.toGMTString();
return true;
} // function RecordFormInformation()

RestoreFormInformation();
//-->
</script>

</body></html>

The hidden field name="flowto" points to the location of the printer-friendly template. (The template is addressed in the next section.)

JavaScript below the list is used to set a cookie when a button is clicked to remember the list items and amounts. There should be no need to change the JavaScript unless you want to change the cookie name or make the cookie last more or less than the year it currently lasts.

For the JavaScript to work correctly, shopping/wish list form field names must begin with a letter and be composed only of letters, numbers, and underscore characters.

The shopping list has a "remember" button, a "remember and printable page" button, and a "forget" button. During your testing process, if you change any form field names (or hidden field values) for the shopping list after you've "remembered," click the "forget" button to purge the old names and values from the cookie before proceeding.

The Printer-Friendly Template

If you look at the overall structure of the printer-friendly template, it may appear somewhat confusing. But if you look at it line by line, you'll notice that each line has to do with one item of the shopping list.

Here is a copy of the printer-friendly template for use with the example shopping list, above.

<html><head>

<style type="text/css">
<!--
body, td, p, .normal
 { font-family: arial,helvetica,sans-serif; font-size: 14px; font-weight: normal; line-height: 175%; background-color:#ffffff;}
h1 {font-size: 22px; font-weight: bold; text-align:center;}
h2 {font-size: 18px; font-weight: bold; text-align:center;}
h3 {font-size: 16px; font-weight: bold; text-align:center; background-color:#99ffff; }
.nowrap { white-space: nowrap; }
input, textarea, .formtext { font-family: monospace,courier; }
.italic {font-style: italic; }
.bold { font-weight: bold; }
.bolditalic {font-style: italic; font-weight: bold; }
.indent {margin-left:30px;}
.small {font-size: 12px;}
.center {text-align:center;}
.submitbutton { font-family: arial,helvetica,sans-serif; font-size: 14px; color: blue; font-weight: normal; line-height: 18px; }
a:link, a:active, a:visited { color:#003366; font-weight: bold; text-decoration: none;}
a:hover { color:#990000; font-weight: bold; text-decoration: underline; font-weight:bold;}
-->
</style>

</head>
<body>
<div style="margin-left:50px;">


<table border="0" cellpadding="5" cellspacing="0" width="750">
<tr><td width="33%" colspan=3 >
<h1>Grocery Shopping List</h1>


<tr>
<td width="33%" valign="top" colspan=3 >
<h3>Fresh Produce</h3>
</td></tr>
<tr>
<td width="33%" valign="top">
[[if_Apples]]<b>[[Apples]]</b> Apples<br>[[/if_Apples]]
[[if_Bananas]]<b>[[Bananas]]</b> Bananas<br>[[/if_Bananas]]
[[if_Lemons]]<b>[[Lemons]]</b> Lemons<br>[[/if_Lemons]]
[[if_Lime]]<b>[[Lime]]</b> Lime<br>[[/if_Lime]]
[[if_Melons]]<b>[[Melons]]</b> Melons<br>[[/if_Melons]]
[[if_Oranges]]<b>[[Oranges]]</b> Oranges<br>[[/if_Oranges]]
[[if_Strawberries]]<b>[[Strawberries]]</b> Strawberries<br>[[/if_Strawberries]]
[[if_Watermelon]]<b>[[Watermelon]]</b> Watermelon<br>[[/if_Watermelon]]
[[if_FreshFoods1]]<b>[[FreshFoods1]]</b> [[FreshFoods1Name]]<br>[[/if_FreshFoods1]]
[[if_FreshFoods2]]<b>[[FreshFoods2]]</b> [[FreshFoods2Name]]<br>[[/if_FreshFoods2]]


</td><td width="33%" valign="top">
[[if_Broccoli]]<b>[[Broccoli]]</b> Broccoli<br>[[/if_Broccoli]]
[[if_Carrots]]<b>[[Carrots]]</b> Carrots<br>[[/if_Carrots]]
[[if_Cauliflower]]<b>[[Cauliflower]]</b> Cauliflower<br>[[/if_Cauliflower]]
[[if_Celery]]<b>[[Celery]]</b> Celery<br>[[/if_Celery]]
[[if_Corn]]<b>[[Corn]]</b> Corn<br>[[/if_Corn]]
[[if_Garlic]]<b>[[Garlic]]</b> Garlic<br>[[/if_Garlic]]
[[if_Lettuce]]<b>[[Lettuce]]</b> Lettuce<br>[[/if_Lettuce]]
[[if_Zucchini]]<b>[[Zucchini]]</b> Zucchini<br>[[/if_Zucchini]]
[[if_FreshFoods3]]<b>[[FreshFoods3]]</b> [[FreshFoods3Name]]<br>[[/if_FreshFoods3]]
[[if_FreshFoods4]]<b>[[FreshFoods4]]</b> [[FreshFoods4Name]]<br>[[/if_FreshFoods4]]


</td><td width="33%" valign="top">
[[if_Mushrooms]]<b>[[Mushrooms]]</b> Mushrooms<br>[[/if_Mushrooms]]
[[if_Onions]]<b>[[Onions]]</b> Onions<br>[[/if_Onions]]
[[if_Peppers]]<b>[[Peppers]]</b> Peppers<br>[[/if_Peppers]]
[[if_Potatoes]]<b>[[Potatoes]]</b> Potatoes<br>[[/if_Potatoes]]
[[if_Squash]]<b>[[Squash]]</b> Squash<br>[[/if_Squash]]
[[if_Tomatoes]]<b>[[Tomatoes]]</b> Tomatoes<br>[[/if_Tomatoes]]
[[if_Yams]]<b>[[Yams]]</b> Yams<br>[[/if_Yams]]
[[if_YellowSquash]]<b>[[YellowSquash]]</b> Yellow Squash<br>[[/if_YellowSquash]]
[[if_FreshFoods5]]<b>[[FreshFoods5]]</b> [[FreshFoods5Name]]<br>[[/if_FreshFoods5]]
[[if_FreshFoods6]]<b>[[FreshFoods6]]</b> [[FreshFoods6Name]]<br>[[/if_FreshFoods6]]




</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">

<h3>Frozen Foods</h3>
[[if_FrozenBroccoli]]<b>[[FrozenBroccoli]]</b> Broccoli<br>[[/if_FrozenBroccoli]]
[[if_FrozenCarrots]]<b>[[FrozenCarrots]]</b> Carrots<br>[[/if_FrozenCarrots]]
[[if_FrozenCorn]]<b>[[FrozenCorn]]</b> Corn<br>[[/if_FrozenCorn]]
[[if_Peas]]<b>[[Peas]]</b> Peas<br>[[/if_Peas]]
[[if_TVDinners]]<b>[[TVDinners]]</b> TV Dinners<br>[[/if_TVDinners]]
[[if_FishSticks]]<b>[[FishSticks]]</b> Fish Sticks<br>[[/if_FishSticks]]
[[if_IceCream]]<b>[[IceCream]]</b> Ice Cream<br>[[/if_IceCream]]
[[if_Pizza]]<b>[[Pizza]]</b> Pizza<br>[[/if_Pizza]]
[[if_FrozenFoods1]]<b>[[FrozenFoods1]]</b> [[FrozenFoods1Name]]<br>[[/if_FrozenFoods1]]
[[if_FrozenFoods2]]<b>[[FrozenFoods2]]</b> [[FrozenFoods2Name]]<br>[[/if_FrozenFoods2]]

</td><td width="33%" valign="top">
<h3>Fresh Meat</h3>
[[if_Bacon]]<b>[[Bacon]]</b> Bacon<br>[[/if_Bacon]]
[[if_Chicken]]<b>[[Chicken]]</b> Chicken<br>[[/if_Chicken]]
[[if_Fish]]<b>[[Fish]]</b> Fish<br>[[/if_Fish]]
[[if_Ham]]<b>[[Ham]]</b> Ham<br>[[/if_Ham]]
[[if_Hamburger]]<b>[[Hamburger]]</b> Hamburger<br>[[/if_Hamburger]]
[[if_PorkChops]]<b>[[PorkChops]]</b> Pork Chops<br>[[/if_PorkChops]]
[[if_Roast]]<b>[[Roast]]</b> Roast<br>[[/if_Roast]]
[[if_SandwichMeat]]<b>[[SandwichMeat]]</b> Sandwich Meat<br>[[/if_SandwichMeat]]
[[if_FreshMeat1]]<b>[[FreshMeat1]]</b> [[FreshMeat1Name]]<br>[[/if_FreshMeat1]]
[[if_FreshMeat2]]<b>[[FreshMeat2]]</b> [[FreshMeat2Name]]<br>[[/if_FreshMeat2]]

</td><td width="33%" valign="top">
<h3>Dairy</h3>
[[if_Butter_Margarine]]<b>[[Butter_Margarine]]</b> Butter/Margarine<br>[[/if_Butter_Margarine]]
[[if_Cheese]]<b>[[Cheese]]</b> Cheese<br>[[/if_Cheese]]
[[if_CottageCheese]]<b>[[CottageCheese]]</b> Cottage Cheese<br>[[/if_CottageCheese]]
[[if_CreamCheese]]<b>[[CreamCheese]]</b> Cream Cheese<br>[[/if_CreamCheese]]
[[if_Eggs]]<b>[[Eggs]]</b> Eggs<br>[[/if_Eggs]]
[[if_Milk]]<b>[[Milk]]</b> Milk<br>[[/if_Milk]]
[[if_SourCream]]<b>[[SourCream]]</b> Sour Cream<br>[[/if_SourCream]]
[[if_Yogurt]]<b>[[Yogurt]]</b> Yogurt<br>[[/if_Yogurt]]
[[if_Dairy1]]<b>[[Dairy1]]</b> [[Dairy1Name]]<br>[[/if_Dairy1]]
[[if_Dairy2]]<b>[[Dairy2]]</b> [[Dairy2Name]]<br>[[/if_Dairy2]]

</td></tr>
<tr><td> </td></tr>
<tr>
<td width="33%" valign="top" colspan=3 >
<h3>Canned and Bottled Goods</h3>
</td></tr>

<tr>
<td width="33%" valign="top">

[[if_MixedFruit]]<b>[[MixedFruit]]</b> Mixed Fruit<br>[[/if_MixedFruit]]
[[if_Peaches]]<b>[[Peaches]]</b> Peaches<br>[[/if_Peaches]]
[[if_Pears]]<b>[[Pears]]</b> Pears<br>[[/if_Pears]]
[[if_Pineapple]]<b>[[Pineapple]]</b> Pineapple<br>[[/if_Pineapple]]
[[if_BakedBeans]]<b>[[BakedBeans]]</b> Baked Beans<br>[[/if_BakedBeans]]
[[if_CannedCorn]]<b>[[CannedCorn]]</b> Corn<br>[[/if_CannedCorn]]
[[if_GreenBeans]]<b>[[GreenBeans]]</b> Green Beans<br>[[/if_GreenBeans]]
[[if_Peas]]<b>[[Peas]]</b> Peas<br>[[/if_Peas]]
[[if_PintoBeans]]<b>[[PintoBeans]]</b> Pinto Beans<br>[[/if_PintoBeans]]
[[if_RefriedBeans]]<b>[[RefriedBeans]]</b> Refried Beans<br>[[/if_RefriedBeans]]
[[if_TomatoPaste]]<b>[[TomatoPaste]]</b> Tomato Paste<br>[[/if_TomatoPaste]]
[[if_TomatoSauce]]<b>[[TomatoSauce]]</b> Tomato Sauce<br>[[/if_TomatoSauce]]
[[if_Tomatoes_stewed]]<b>[[Tomatoes_stewed]]</b> Tomatoes - stewed<br>[[/if_Tomatoes_stewed]]
[[if_Tomatoes_whole]]<b>[[Tomatoes_whole]]</b> Tomatoes - whole<br>[[/if_Tomatoes_whole]]

</td><td width="33%" valign="top">

[[if_Salsa]]<b>[[Salsa]]</b> Salsa<br>[[/if_Salsa]]
[[if_SpaghettiSauce]]<b>[[SpaghettiSauce]]</b> Spaghetti Sauce<br>[[/if_SpaghettiSauce]]
[[if_CannedChicken]]<b>[[CannedChicken]]</b> Canned Chicken<br>[[/if_CannedChicken]]
[[if_CannedHam]]<b>[[CannedHam]]</b> CannedHam<br>[[/if_CannedHam]]
[[if_CornedBeef]]<b>[[CornedBeef]]</b> Corned Beef<br>[[/if_CornedBeef]]
[[if_Salmon]]<b>[[Salmon]]</b> Salmon<br>[[/if_Salmon]]
[[if_Tuna]]<b>[[Tuna]]</b> Tuna<br>[[/if_Tuna]]
[[if_Soup]]<b>[[Soup]]</b> Soup<br>[[/if_Soup]]
[[if_CannedGoods1]]<b>[[CannedGoods1]]</b> [[CannedGoods1Name]]<br>[[/if_CannedGoods1]]
[[if_CannedGoods2]]<b>[[CannedGoods2]]</b> [[CannedGoods2Name]]<br>[[/if_CannedGoods2]]
[[if_CannedGoods3]]<b>[[CannedGoods3]]</b> [[CannedGoods3Name]]<br>[[/if_CannedGoods3]]
[[if_CannedGoods4]]<b>[[CannedGoods4]]</b> [[CannedGoods4Name]]<br>[[/if_CannedGoods4]]
[[if_CannedGoods5]]<b>[[CannedGoods5]]</b> [[CannedGoods5Name]]<br>[[/if_CannedGoods5]]
[[if_CannedGoods6]]<b>[[CannedGoods6]]</b> [[CannedGoods6Name]]<br>[[/if_CannedGoods6]]

</td><td width="33%" valign="top">

[[if_Jelly_Jam]]<b>[[Jelly_Jam]]</b> Jelly/Jam<br>[[/if_Jelly_Jam]]
[[if_PeanutButter]]<b>[[PeanutButter]]</b> Peanut Butter<br>[[/if_PeanutButter]]
[[if_OliveOil]]<b>[[OliveOil]]</b> Olive Oil<br>[[/if_OliveOil]]
[[if_VegetableOil]]<b>[[VegetableOil]]</b> Vegetable Oil<br>[[/if_VegetableOil]]
[[if_SaladDressing]]<b>[[SaladDressing]]</b> Salad Dressing<br>[[/if_SaladDressing]]
[[if_Spices]]<b>[[Spices]]</b> Spices<br>[[/if_Spices]]
[[if_Salt]]<b>[[Salt]]</b> Salt<br>[[/if_Salt]]
[[if_Pepper]]<b>[[Pepper]]</b> Pepper<br>[[/if_Pepper]]
[[if_BBQSauce]]<b>[[BBQSauce]]</b> BBQ Sauce<br>[[/if_BBQSauce]]
[[if_Honey]]<b>[[Honey]]</b> Honey<br>[[/if_Honey]]
[[if_Ketchup]]<b>[[Ketchup]]</b> Ketchup<br>[[/if_Ketchup]]
[[if_Mayonnaise]]<b>[[Mayonnaise]]</b> Mayonnaise<br>[[/if_Mayonnaise]]
[[if_Mustard]]<b>[[Mustard]]</b> Mustard<br>[[/if_Mustard]]
[[if_SoySauce]]<b>[[SoySauce]]</b> Soy Sauce<br>[[/if_SoySauce]]


</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">

<h3>Baking Supplies</h3>

[[if_BakingPowder]]<b>[[BakingPowder]]</b> Baking Powder<br>[[/if_BakingPowder]]
[[if_BakingSoda]]<b>[[BakingSoda]]</b> Baking Soda<br>[[/if_BakingSoda]]
[[if_BiscuitMix]]<b>[[BiscuitMix]]</b> Biscuit Mix<br>[[/if_BiscuitMix]]
[[if_BrownSugar]]<b>[[BrownSugar]]</b> Brown Sugar<br>[[/if_BrownSugar]]
[[if_BrownieMix]]<b>[[BrownieMix]]</b> Brownie Mix<br>[[/if_BrownieMix]]
[[if_CakeMix]]<b>[[CakeMix]]</b> Cake Mix<br>[[/if_CakeMix]]
[[if_Cocoa]]<b>[[Cocoa]]</b> Cocoa<br>[[/if_Cocoa]]
[[if_Cornstarch]]<b>[[Cornstarch]]</b> Cornstarch<br>[[/if_Cornstarch]]
[[if_Flour]]<b>[[Flour]]</b> Flour<br>[[/if_Flour]]
[[if_Sugar]]<b>[[Sugar]]</b> Sugar<br>[[/if_Sugar]]
[[if_Vanilla]]<b>[[Vanilla]]</b> Vanilla<br>[[/if_Vanilla]]
[[if_BakingSupplies1]]<b>[[BakingSupplies1]]</b> [[BakingSupplies1Name]]<br>[[/if_BakingSupplies1]]
[[if_BakingSupplies2]]<b>[[BakingSupplies2]]</b> [[BakingSupplies2Name]]<br>[[/if_BakingSupplies2]]

<h3 style="margin-top:35px;">Misc.</h3>

[[if_Misc1]]<b>[[Misc1]]</b> [[Misc1Name]]<br>[[/if_Misc1]]
[[if_Misc2]]<b>[[Misc2]]</b> [[Misc2Name]]<br>[[/if_Misc2]]
[[if_Misc3]]<b>[[Misc3]]</b> [[Misc3Name]]<br>[[/if_Misc3]]

</td><td width="33%" valign="top">
<h3>Dry Pantry</h3>

[[if_BreakfastCereals]]<b>[[BreakfastCereals]]</b> Breakfast Cereals<br>[[/if_BreakfastCereals]]
[[if_DriedBeans]]<b>[[DriedBeans]]</b> Dried Beans<br>[[/if_DriedBeans]]
[[if_Jello]]<b>[[Jello]]</b> Jello<br>[[/if_Jello]]
[[if_Oatmeal]]<b>[[Oatmeal]]</b> Oatmeal<br>[[/if_Oatmeal]]
[[if_Pasta]]<b>[[Pasta]]</b> Pasta<br>[[/if_Pasta]]
[[if_Rice]]<b>[[Rice]]</b> Rice<br>[[/if_Rice]]
[[if_DryPantry1]]<b>[[DryPantry1]]</b> [[DryPantry1Name]]<br>[[/if_DryPantry1]]
[[if_DryPantry2]]<b>[[DryPantry2]]</b> [[DryPantry2Name]]<br>[[/if_DryPantry2]]

<h3 style="margin-top:35px;">Bread</h3>

[[if_Bagels]]<b>[[Bagels]]</b> Bagels<br>[[/if_Bagels]]
[[if_Buns]]<b>[[Buns]]</b> Buns<br>[[/if_Buns]]
[[if_Muffins]]<b>[[Muffins]]</b> Muffins<br>[[/if_Muffins]]
[[if_Rolls]]<b>[[Rolls]]</b> Rolls<br>[[/if_Rolls]]
[[if_WheatBread]]<b>[[WheatBread]]</b> Wheat Bread<br>[[/if_WheatBread]]
[[if_WhiteBread]]<b>[[WhiteBread]]</b> White Bread<br>[[/if_WhiteBread]]
[[if_Bread1]]<b>[[Bread1]]</b> [[Bread1Name]]<br>[[/if_Bread1]]
[[if_Bread2]]<b>[[Bread2]]</b> [[Bread2Name]]<br>[[/if_Bread2]]

</td><td width="33%" valign="top">

<h3>Snacks</h3>
[[if_Candy]]<b>[[Candy]]</b> Candy<br>[[/if_Candy]]
[[if_Cookies]]<b>[[Cookies]]</b> Cookies<br>[[/if_Cookies]]
[[if_Crackers]]<b>[[Crackers]]</b> Crackers<br>[[/if_Crackers]]
[[if_Nuts]]<b>[[Nuts]]</b> Nuts<br>[[/if_Nuts]]
[[if_Popcorn]]<b>[[Popcorn]]</b> Popcorn<br>[[/if_Popcorn]]
[[if_PotatoChips]]<b>[[PotatoChips]]</b> Potato Chips<br>[[/if_PotatoChips]]
[[if_Snacks1]]<b>[[Snacks1]]</b> [[Snacks1Name]]<br>[[/if_Snacks1]]
[[if_Snacks2]]<b>[[Snacks2]]</b> [[Snacks2Name]]<br>[[/if_Snacks2]]

<h3 style="margin-top:35px;">Beverages</h3>

[[if_Coffee]]<b>[[Coffee]]</b> Coffee<br>[[/if_Coffee]]
[[if_Juice]]<b>[[Juice]]</b> Juice<br>[[/if_Juice]]
[[if_SoftDrinks]]<b>[[SoftDrinks]]</b> Soft Drinks<br>[[/if_SoftDrinks]]
[[if_SportsDrinks]]<b>[[SportsDrinks]]</b> Sports Drinks<br>[[/if_SportsDrinks]]
[[if_Tea]]<b>[[Tea]]</b> Tea<br>[[/if_Tea]]
[[if_Water]]<b>[[Water]]</b> Water<br>[[/if_Water]]
[[if_Beverages1]]<b>[[Beverages1]]</b> [[Beverages1Name]]<br>[[/if_Beverages1]]
[[if_Beverages2]]<b>[[Beverages2]]</b> [[Beverages2Name]]<br>[[/if_Beverages2]]




</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">
<h3>Pet Items</h3>

[[if_CatFood]]<b>[[CatFood]]</b> Cat Food<br>[[/if_CatFood]]
[[if_DogFood]]<b>[[DogFood]]</b> Dog Food<br>[[/if_DogFood]]
[[if_CatLitter]]<b>[[CatLitter]]</b> Cat Litter<br>[[/if_CatLitter]]
[[if_Pets1]]<b>[[Pets1]]</b> [[Pets1Name]]<br>[[/if_Pets1]]
[[if_Pets2]]<b>[[Pets2]]</b> [[Pets2Name]]<br>[[/if_Pets2]]


<h3 style="margin-top:35px;">First Aid</h3>

[[if_Aspirin_PainReliever]]<b>[[Aspirin_PainReliever]]</b> Aspirin/Pain Reliever<br>[[/if_Aspirin_PainReliever]]
[[if_Bandaids]]<b>[[Bandaids]]</b> Bandaids<br>[[/if_Bandaids]]
[[if_CoughDrops]]<b>[[CoughDrops]]</b> Cough Drops<br>[[/if_CoughDrops]]
[[if_FirstAidCream]]<b>[[FirstAidCream]]</b> First Aid Cream<br>[[/if_FirstAidCream]]
[[if_FirstAid1]]<b>[[FirstAid1]]</b> [[FirstAid1Name]]<br>[[/if_FirstAid1]]
[[if_FirstAid2]]<b>[[FirstAid2]]</b> [[FirstAid2Name]]<br>[[/if_FirstAid2]]

</td><td width="33%" valign="top">

<h3>Paper Supplies</h3>

[[if_Foil]]<b>[[Foil]]</b> Foil<br>[[/if_Foil]]
[[if_PaperCups]]<b>[[PaperCups]]</b> PaperCups<br>[[/if_PaperCups]]
[[if_PaperCups]]<b>[[PaperCups]]</b> Paper Cups<br>[[/if_PaperCups]]
[[if_PaperPlates]]<b>[[PaperPlates]]</b> Paper Plates<br>[[/if_PaperPlates]]
[[if_PaperTowels]]<b>[[PaperTowels]]</b> Paper Towels<br>[[/if_PaperTowels]]
[[if_PlasticBags]]<b>[[PlasticBags]]</b> Plastic Bags<br>[[/if_PlasticBags]]
[[if_PlasticWrap]]<b>[[PlasticWrap]]</b> Plastic Wrap<br>[[/if_PlasticWrap]]
[[if_Tissue]]<b>[[Tissue]]</b> Tissue<br>[[/if_Tissue]]
[[if_ToiletPaper]]<b>[[ToiletPaper]]</b> Toilet Paper<br>[[/if_ToiletPaper]]
[[if_TrashBags]]<b>[[TrashBags]]</b> Trash Bags<br>[[/if_TrashBags]]
[[if_WaxPaper]]<b>[[WaxPaper]]</b> Wax Paper<br>[[/if_WaxPaper]]
[[if_Paper1]]<b>[[Paper1]]</b> [[Paper1Name]]<br>[[/if_Paper1]]
[[if_Paper2]]<b>[[Paper2]]</b> [[Paper2Name]]<br>[[/if_Paper2]]
[[if_Paper3]]<b>[[Paper3]]</b> [[Paper3Name]]<br>[[/if_Paper3]]

</td><td width="33%" valign="top">

<h3>Cleaning/Soap</h3>

[[if_BathSoap]]<b>[[BathSoap]]</b> Bath Soap<br>[[/if_BathSoap]]
[[if_Bleach]]<b>[[Bleach]]</b> Bleach<br>[[/if_Bleach]]
[[if_DishSoap]]<b>[[DishSoap]]</b> Dish Soap<br>[[/if_DishSoap]]
[[if_DryerSheets]]<b>[[DryerSheets]]</b> Dryer Sheets<br>[[/if_DryerSheets]]
[[if_FurniturePolish]]<b>[[FurniturePolish]]</b> Furniture Polish<br>[[/if_FurniturePolish]]
[[if_GlassCleaner]]<b>[[GlassCleaner]]</b> Glass Cleaner<br>[[/if_GlassCleaner]]
[[if_LaundryDetergent]]<b>[[LaundryDetergent]]</b> Laundry Detergent<br>[[/if_LaundryDetergent]]
[[if_LiquidHandSoap]]<b>[[LiquidHandSoap]]</b> Liquid Hand Soap<br>[[/if_LiquidHandSoap]]
[[if_PowderedCleanser]]<b>[[PowderedCleanser]]</b> Powdered Cleanser<br>[[/if_PowderedCleanser]]
[[if_ShowerSpray]]<b>[[ShowerSpray]]</b> Shower Spray<br>[[/if_ShowerSpray]]
[[if_ToiletBowlCleaners]]<b>[[ToiletBowlCleaners]]</b> Toilet Bowl Cleaners<br>[[/if_ToiletBowlCleaners]]
[[if_Cleaning1]]<b>[[Cleaning1]]</b> [[Cleaning1Name]]<br>[[/if_Cleaning1]]
[[if_Cleaning2]]<b>[[Cleaning2]]</b> [[Cleaning2Name]]<br>[[/if_Cleaning2]]
[[if_Cleaning3]]<b>[[Cleaning3]]</b> [[Cleaning3Name]]<br>[[/if_Cleaning3]]



</td></tr>
<tr><td> </td></tr>
<tr><td width="33%" valign="top">

<h3>Baby Items</h3>

[[if_Fruit]]<b>[[Fruit]]</b> Fruit<br>[[/if_Fruit]]
[[if_BabyJuice]]<b>[[BabyJuice]]</b> Juice<br>[[/if_BabyJuice]]
[[if_Meat]]<b>[[Meat]]</b> Meat<br>[[/if_Meat]]
[[if_Vegetables]]<b>[[Vegetables]]</b> Vegetables<br>[[/if_Vegetables]]
[[if_Diapers]]<b>[[Diapers]]</b> Diapers<br>[[/if_Diapers]]
[[if_Formula]]<b>[[Formula]]</b> Formula<br>[[/if_Formula]]
[[if_Wipes]]<b>[[Wipes]]</b> Wipes<br>[[/if_Wipes]]
[[if_Babyitems1]]<b>[[Babyitems1]]</b> [[Babyitems1Name]]<br>[[/if_Babyitems1]]
[[if_Babyitems2]]<b>[[Babyitems2]]</b> [[Babyitems2Name]]<br>[[/if_Babyitems2]]

</td><td width="33%" valign="top">
<h3>Notes to Self</h3>
<pre>[[NotesToSelf]]</pre>

</td><td width="33%" valign="top">

<h3>Personal Items</h3>

[[if_Deodorant]]<b>[[Deodorant]]</b> Deodorant<br>[[/if_Deodorant]]
[[if_Floss]]<b>[[Floss]]</b> Floss<br>[[/if_Floss]]
[[if_Mouthwash]]<b>[[Mouthwash]]</b> Mouthwash<br>[[/if_Mouthwash]]
[[if_Razors]]<b>[[Razors]]</b> Razors<br>[[/if_Razors]]
[[if_Shampoo]]<b>[[Shampoo]]</b> Shampoo<br>[[/if_Shampoo]]
[[if_Soap]]<b>[[Soap]]</b> Soap<br>[[/if_Soap]]
[[if_Toothpaste]]<b>[[Toothpaste]]</b> Toothpaste<br>[[/if_Toothpaste]]
[[if_Personal1]]<b>[[Personal1]]</b> [[Personal1Name]]<br>[[/if_Personal1]]
[[if_Personal2]]<b>[[Personal2]]</b> [[Personal2Name]]<br>[[/if_Personal2]]

</td></tr>
</table>

<p>Your shopping list is at<br>
<a href="http://willmaster.com/master/formV4/shoppinglist.html">
<span class="bold" style="font-family: monospace;">
http://willmaster.com/master/formV4/shoppinglist.html
</span>
</a>
</p>
<p style="font-size:12px">
Powered by <a href="http://willmaster.com/master/formV4/">Master Form V4</a>
</p>

</div>

</body></html>

It may be obvious how the template is constructed after studying it for a moment or two. If not, the Master Form V4 users manual has details about how to create this and other types of templates. (The software is an exceptional form handler.)

The printer-friendly page contains the URL to the shopping list page so the user can return to it. It may also contain your primary URL and maybe even a blurb reinforcing the idea that your web site is a good one to remember.

Testing

Upload the shopping list page and the printer-friendly template. Verify that printer-friendly template is retrievable and that the generated page is acceptable.

Specify an amount for each shopping list item, and specify items for all blank fields. In this way, you can verify that all show up on the printer-friendly page. If any are missing, a placeholder is incorrect. (Placeholders are words representing form field names between double square brackets, and can also be if/if sets for conditional printing. The Master Form V4 users manual has more information.)

The look of the printer-friendly page generated from the template may vary from browser to browser. Test your installation with each browser you have available.

Bring 'em Back

To return to your web site, folks will need a reason. The more compelling the reason, the more likely they'll be back.

How can you adapt this idea for your website's niche and entice multiple return visits?

William Bontrager, programmer
The Master Series CGI Software