CSS image for submit button - clicking image must submit form

Question

Please help,

I have a form on wordpress. I want the user to be able to click an image instead of the standard submit button.

I have the image appear and the submit button disappear - but nothing happens when I click on the image.

This is the code I am using:

.formBuilderForm .formBuilderSubmit {
clear: both;
text-align: right;
    display:block;
width:228px;
height:49px;
background: url(my image url) no-repeat;
text-indent:-999em;

Before you say "google it" or try search: I have tried the methods mentioned here: http://www.queness.com/post/798/5-techniques-to-style-buttons-using-images-and-css

I've read similar posts such as this on stackoverflow but they don't solve my frustratingly simple problem. How to change an input button image using CSS?

Thanks for your help.

Please show the related HTML as well. Also are you aware of the <input type="image"> element? — Pekka
– Pekka, Commented Dec 31, 2010 at 11:57
Thanks for the quick reply! I am aware of it - however the submit button is part of a wordpress plugin and I don't really want to go hacking it up. In the documentation of this plugin developer says elements can be edited using css without impact - so that's why i'm taking this approach. — Tom
– Tom, Commented Dec 31, 2010 at 12:08

Shakti Singh · Accepted Answer · 2010-12-31 12:00:16Z

1

put this instead of a submit button

<input type="image" src="http://imageurl">

answered Dec 31, 2010 at 12:00

Shakti Singh

86.8k21 gold badges142 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

thanks - but the submit button is part of a wordpress plugin and I don't want to go hacking about in it.

Tom Over a year ago

n the documentation of this plugin developer says elements can be edited using css without impact - so that's why i'm taking this approach.

Tom · Accepted Answer · 2010-12-31 23:47:47Z

0

Just In case anyone cares: This was an issue with the FormBuilder Wordpress Plugin. I used very similar css using Contact Form 7 and it worked.

padding:8px 0 10px 0px;
color:#FF0000;
border:none;
width:107px;
height:26px;
text-align:center;
background-image:url(the url went here);
background-repeat:no-repeat;
text-indent:-999em;

Thanks for the help.

answered Dec 31, 2010 at 23:47

Tom

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

CSS image for submit button - clicking image must submit form

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related