A Guide To Basic Form Code
Cart32 is designed to receive form code submissions (from HTML forms) and process the information accordingly. Everything from adding items, to applying discounts, to checking out is done via forms. The purpose of this article is to outline the basics of form code, give a starter example, and enumerate the other possibilities for your product forms. If you need specific information about a particular form option (for example: weights) there will be an entire article dedicated to it in the same category as this guide.
The HTML Form Wizard
Before you put on your IT hat and start digging through HTML forms with notepad, you should know that we offer a FREE form code wizard. This wizard allows you to use a simple GUI (Graphical User Interface) to add your product information. Once all the information is loaded, this little wizard creates the form code for you. It's not always a perfect solution since we can't foresee every possible use of forms, but it does cover about 99% of the applications you'd use it for! For more information about the Form Wizard please refer to the article in this same category called HTML Form Wizard.
A Basic Product Form
The basic product form has form tags, input for price/qty/item, and a submit button. Here is an example form for adding a T-Shirt:
<form method="post" action="http://www.Cart32.com/cgi-bin/cart32.exe/TEST-Additem">
A Really Nice Shirt for Only $15.75
<input type="hidden" name="item" value="A Really Nice T-Shirt" />
<input type="hidden" name="price" value="15.75" />
<input type="text" name="qty" value="1" />
<input type="submit" value="Buy Now" />
Let's analyze the parts of this form above to see what each part does:
- Form: The opening form tag begins the form. The method (post) indicates we will be sending the information in the http headers instead of via the querystring in our address bar. And the action is the URL to our cart location along with the CLIENTCODE-Action (in our example the client is TEST and the action was Additem)
- The text we added (A Really Nice Shirt for Only $15.75) is just a description for the customer to see what they are about to purchase. You can put any information and any HTML content (including images) inside a form element, but be careful with adding buttons inside a form; if the button's 'type' attribute is not set to 'button', it will act as a 'submit' button (meaning it will submit the form when clicked).
- Item: This input tells Cart32 what the name of the product is. In our example, it is A Really Nice T-Shirt. Notice also that this input is of type 'hidden' which means it will not show up on the screen when the form is displayed.
- Price: This input tells Cart32 what the price of the product is. In our example the price is $15.75. The price is also a hidden field and will not be displayed on the page to the customer.
- Qty: This input tells Cart32 how many of the product the customer wants to add. In our example the default value is 1. Notice this field is of type text. This means a small textbox with the number 1 will show up to the customer, so they can change the quantity. You cannot use the word 'quantity' in place of 'qty'.
- The final input is the submit button. An input of type submit will create a button for the customer to click to submit the form. In our example we gave the button a special text of Buy Now by specifying the value attribute
So What Else Can We Do With HTML Form Code?
A LOT! There are dozens of preset features you can add to your products for additional control. Best of all, each product can have its own set of inputs to describe just that product. All of the preset options and custom options for your products are controlled by the input tags within your HTML form. Above you saw input for price, qty, and item. Here are the rest of the input options you can use with Cart32 and a short description of how they work (detailed articles on each can often be found in this same category):
- AccountingCategory: Category that the product will be listed under in QuickBooks if you are using the Quickbooks addon with Cart32.
<input type="hidden" name="AccountingCategory" value="Lawn Mowers" />
- Discount: This input can perform an automatic discount based on the quantity added.
<input type="hidden" name="discount" value="1-5:1230.95;6-10:999.95" />
<input type="hidden" name="discount" value="1-5:10.00;6-10:85%;11+:70%" />
- (First one is 15% off, second is 30% off)
- Note: If are using the product database, the discount hidden field is ignored. Put the same value as you had in the discount hidden field into the discount field of the database and the discount will work properly.
- Image: This input specifies a URL to an image which will show up in the itemlist next to the item name when the customer views their cart.
<input type="hidden" name="Image" value="http://www.site.com/lawnmower.jpg" />
- Item (Required): The name of the item as you would like it to appear in the Cart32 itemlist when the customer views their cart.
<input type="hidden" name="Item" value="Cool Lawn Mower" />
- MaxQty: The maximum number of an item that a customer can purchase at one time.
<input type="hidden" name="MaxQty" value="2" />
- PartNo: The unique part number (sku, upc, etc) of the product.
<input type="hidden" name="PartNo" value="LM-1" />
- Price (Required): The price of the product.
<input type="hidden" name="Price" value="1230.95" />
- P#: The P# fields are used in conjunction with the T# fields. The P# fields specify the actual option selected for a given product added to the cart. In this example the customer would type in the preferred color of, say, a T-Shirt. (Normally options are dopdowns. Those are covered in the article Custom Product Options)
<input type="text" name="p1" value="Red">
- Qty: The number of a particular item to buy. If left blank Cart32 will assume 1. You can also use a dropdown box for Qty, just make sure you include your QtyDrop input as well (described below).
<input type="text" name="Qty" />
- QtyDrop: The selections available (separated by semi-colons) in a Qty dropdown box. This is used with the qty input when your are using Qty dropdown boxes (that way when you add the item to the cart, Cart32 will know what Qty options to make available in the itemlist in case the customer updates the itemlist).
<input type="hidden" name="QtyDrop" value="1;2;3" />
- SendTo: This input allows you to specify a URL for the customer to be redirected to after adding an item to their cart.
<input type="hidden" name="SendTo" value="http://www.site.com/thankyou.html" />
- Shipping: This input allows you to specify a particular shipping charge for the item. This is separate and does not substitute the other shipping calculates Cart32 can do if you have them set up.
<input type="hidden" name="Shipping" value="50.52" />
- ShipsInOwnBox: This input allows you to tell Cart32 (and subsequently, the shippers) if a product requires it's own special box to be shipped in. The options for this field are Yes and No.
<input type="hidden" name="ShipsInOwnBox" value="Yes" />
- Submit Image: You can use an image for your submit "button" if you prefer. This completely replaces the input type of submit from your form.
<input type="image" src="http://www.site.com/addtocart.jpg" />
- T#: The T# fields work in conjunction with the P# fields to specify custom options. The T# field tells the Cart32 itemlist what possible options can exist, and what format they should be in, when an item is added to the cart. This allows customers to update items in their cart (including options). More information about the T# fields can be found in the article Custom Product Options.
<input type="hidden" name="t1" value="t-Color:Red;Blue;Green;Purple" />
- Taxcode: This input allows you to specify a tax code that applies to this product. This tax code is then compared to your grid of tax values which you should have set up in your Cart32 Administration under Cart Settings -> Tax. For example, if you sell an item that is tax free you might have a taxcode called taxfree which is set up in your tax grid as 0% tax.
<input type="hidden" name="taxcode" value="taxfree" />
- URL: This input allows you to enter a URL to the product page (or wherever you like). The URL specified is used to turn the Item name into a link in the itemlist for the customer.
<input type="hidden" name="url" value="http://www.site.com/lawnmower.html" />
- Weight: This input specifies the weight (in pounds) of a single product. You can use tenths (example: 12.5 pounds).
<input type="hidden" name="weight" value="18.2" />