Experience and expertise. We have over 20 years in the software business

Add To Cart Customizations

Cart32 product forms are simple HTML forms with a submit button. However, there are ways to style the submit feature. This article explains the various ways the submit button can be implemented.

Styling And Phrasing The Default Button

When you create a submit button the default text is really boring (like Submit Query). By specifying a value you can change the text displayed on the button. In this next example I will make the button text say Buy This Product:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem"> A Nice T-Shirt for $19.95 <input type="hidden" name="item" value="T-Shirt" /> <input type="hidden" name="price" value="19.95" /> <input type="" name="" value="" /> <input type="submit" value="Buy This Product" /> </form>

You can also use CSS to style the buttons to some extent. The website http://cssbutton.com/forms/ has information on some of the ways to style a button. For more information, consult with your developer/designer.

Using An Image Instead Of A Button

If a button isn't quite good enough, you can always use an image instead, without having to use Javascript! Simply replace your input of type submit with with one of type image and specify a src (url to the image) instead of a value. Here is an example:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem"> A Nice T-Shirt for $19.95 <input type="hidden" name="item" value="T-Shirt" /> <input type="hidden" name="price" value="19.95" /> <input type="" name="" value="" /> <input type="image" src="http://Cart32.com/image.jpg" /> </form>

Using Javascript And A Text Link Instead Of A Button

It is possible to use Javascript to submit your form instead of a button or image. Basically you put an onclick event on whatever object you want to submit your form. This could be an image, button, link, etc. In our example, we'll make it a link. First we create the form without a submit button or image:

<form id="frmShirt" method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem"> A Nice T-Shirt for $19.95 <input type="hidden" name="item" value="T-Shirt" /> <input type="hidden" name="price" value="19.95? /> <input type="" name="" value="" /> </form>

Notice how we removed the submit input altogether. We also gave the form an id. It is crucial that you give the form an id so we can reference it in the next section. Now let's create a link with an onclick event to submit the form.

<a href="#" onclick="document.getElementById('frmShirt').submit();">Buy Me

The javascript that performs the magic here is simply the onclick event. You could put this event on any object that is allowed to have an onclick event (which is pretty much everything on a page).