Knowledgebase: Cart32: Version 7.0
Add To Cart Button Customizations
Posted by Kyle on 11 December 2008 01:33 PM
Cart32 product forms are simple HTML forms with a submit button. However, there are ways to style the submit feature. Use the quick links below to jump to a specific section on these modifications.

Quick Links
Styling And Phrasing The Default Button
Using An Image Instead Of A Button
Using Javascript And A Text Link Instead Of A Button



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! Even without javascript you can do this, simply replace your input of type submit and replace 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</a>


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).
(112 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: