Shopping Cart Links Using Forms

Linking with Forms

Basic text links are not always the most suitable method of linking to FastCart. Forms with drop down menus, radio buttons, or whatever suits you can also be used. This page lists just some of the many ways to create form links to FastCart.

The Key=Value pairs are the same as for basic text links, but are used in text fields, hidden fields, radio buttons, drop down menus and so on. The choice is yours - use whatever suits you best.

Example Code

Basic Form	HTML Code
	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <input type="hidden" name="item" value="Big Blue Widget"> <input type="hidden" name="price" value="9.99"> <input type="submit" value="Add to Cart"> </form>
All the product information here is hidden in a form. You should note that the code for form submissions is different to the code for basic links. The URL for the cart is the same as with the links apart from the ? is no longer required. Each key=value pair is now stored in a hidden input field where the key is in the name field and the value is in the value field. When using form submissions, do not replace the spaces in item names with + symbols or they will appear in the cart!

Drop Down Menu	HTML Code
Select: Blue Widget Green Widget Red Widget	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <select name="item"> <option value="Blue Widget">Blue Widget <option value="Green Widget">Green Widget <option value="Red Widget">Red Widget </select> <input type="hidden" name="price" value="9.99"> <input type="submit" value="Add to Cart"> </form>
If a product is available in lots of colours or sizes, all for the same price, you can use a form with a drop down menu rather than using multiple text links. You need to replace the hidden item input with the select options. Remember to close the select.

Drop Down Menu 2	HTML Code
Select: Quantity: 1 2 3	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <input type="hidden" name="item" value="Blue Widget"> <input type="hidden" name="price" value="9.99"> Quantity: <select name="qty"> <option value="1">1 <option value="2">2 <option value="3">3 </select> <input type="submit" value="Add to Cart"> </form>
You can also set the quantity using a drop down menu instead of always using the default of 1 item. The customer can always change the quantity within FastCart.

Drop Down Menu 3	HTML Code
Select: Blue Widget Green Widget Red Widget Quantity: 1 2 3	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <select name="item"> <option value="Blue Widget">Blue Widget <option value="Green Widget">Green Widget <option value="Red Widget">Red Widget </select> <input type="hidden" name="price" value="9.99"> Quantity: <select name="qty"> <option value="1">1 <option value="2">2 <option value="3">3 </select> <input type="image" src="addtocart.gif" value="Add to Cart"> </form>
Of course, you can combine drop down menus etc within forms and use an image in place of the grey button. Bear in mind the notes above.

Radio Buttons	HTML Code
Select: Blue Green Red	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <input type="radio" name="item" value="Blue Widget">Blue <input type="radio" checked name="item" value="Green Widget">Green <input type="radio" name="item" value="Red Widget">Red <input type="hidden" name="price" value="9.99"> <input type="submit" value="Add to Cart"> </form>
Radio buttons can also be used. Each radio button has the same name but different values. You should always ensure that one radio button is always selected by adding the checked attribute to one of the radio buttons. If you omit this and the customer simply clicks the button, the item will not be added to FastCart. It may be worth adding some JavaScript to check for this.

Text Input	HTML Code
Select: Quantity:	<form action="http://www.fastcart.co.uk/cart/index.php" method="post" target="_top"> <input type="hidden" name="id" value="1223"> <input type="hidden" name="item" value="Blue Widget"> <input type="hidden" name="price" value="9.99"> Quantity: <input type="text" name="qty" size="3" value="1"> <input type="submit" value="Add to Cart"> </form>
You can also let customers enter their own quantities, although we don't recommend it as users may enter invalid quantities and nothing will be added.

Tips

Always use a quantity of 1 or more - never use a quantity of zero - some shoppers click the button without setting the quantity, then find nothing has been added to the cart.
Always check every link / button with every option to make sure it works properly.
Try to use only alpha-numeric characters in your descriptions. Avoid using symbols.
If a small item costs less than a big item, use two separate buttons. You cannot set one button to use two different prices. If you need multiple options, see the multiple product options page.