How can I use an image for "submit" buttons?

There are several “continue,” “submit,” and “finish” buttons within forms on my site; here’s one example:

I have buttons created to take the place of the default, but can someone guide me as to the code I would use to insert them? I would really appreciate the help. Once I know how to do this I can do it on some other sites as well, so I really want to learn how it’s done. Thanks!

Use javascript.
You can add an “onclick” event attribute to an “img” element. The function given in the “onclick” attribute can invoke the form’s method “submit”.
Another way is to use a “button” element, with the type “submit”. Button elements can have child elements, inner HTML’s. You can use an image as a child element.

There is a form field for using images to submit the form. It looks something like:

<input type=“image” src=“continue.gif”>

Thank you very much!


You can just apply a background image to a normal submit button. If you want to hide the text in the value attribute then it gets a little more complicated if you want good accessibility. You can hide the text with text-indent (IE needs some help here) but if images are switched off then your visitor gets nothing.

You can use an image replacement technique for that scenario which looks something like this.

A label input is used to provide the text and is only revealed if images are missing or turned off.

An input type=“image” is an easier option but of course has to be scripted for unlike the submit button.

The only difference is that it passes the coordinates where it was clicked (or 0,0 if enter was pressed) instead of passing the value of the button (since there isn’t one as it is an image). So it only affects the server side script if the script is relying on getting a value passed from the submit button.

I have never had a situation where I’d need to change code in order to substitute an image for a submit button but then I tend to not give the submit button a name to start with since there isn’t any reason for passing the same value from it every time. The only circumstance where it would require changes is if your form currently has more than one submit button and you’re relying on the value passed to tell which of those buttons was pressed.

Oh, geez, I’m afraid you guys are totally over my head here. :slight_smile: Does anybody want a paying job? I would gladly pay someone to fix my buttons. I’d prefer to learn to do it myself, in an ideal world, but time is short.

If you want paid help then look in the marketplace section of Sitepoint in the looking to hire forum. (It is against the guidelines to ask for paid help in a thread.)

If you show us the image you want to use for your button then we’ll show you how to either make it as a submit button or as input type=image.

Oops, I’m sorry, I didn’t realize that.

I’m not sure showing the button would help, though; I think I’ve got the code figured out based on this thread, but where to put it would be the question. This is within a WordPress plugin (the “Another WordPress Classified Plugin”) and I can’t find where it would go. I will probably have to go to the Marketplace.

Well you coulod do it simply by using the existing html but adding a new class to the input element.

input.newbutton {
    width:100px;/*match image width;*/
    height:50px;/* match image height */
    line-height:50px;/* match height*/
    background:url(images/button.gif) no-repeat 0 0;/* path to your image */
    text-transform:capitalize;/* ie6 fix to hide text*/
    text-indent:-999em;/* hide text - remove this if you want the text in the value attribute to show.*/
    clear:both;/* ie6 fix*/

<p><input type="submit" value="Continue" class="newbutton button"></p>

So all you need do is add that class to the input and then add the css.

You already have a class of .button on the input so you could use that if you want all .buttons to be the same and then you wouldn’t need to change the html.

You are very kind to continue helping! I will try to find where to add that class. I’ll be back… :slight_smile:

The relevant line for the Continue button in the plugin’s code (awpcp.php) looks to be line 6500

$output .= "<input type=\\"submit\\" class=\\"button\\" value=\\"$continuebuttontxt\\" />";