submit button – use an image, alt style

The submit button is currently very limited. First, the button is always added at the very end of the form, but I’d like to include it in above the end, so that it’s inside my formatted table. Second, I’d like to use an image.

I know that the submit button can be styled, (it has class=’contact-submit’ class=’pushbutton-wide’) but that won’t do what I want.

[Code moderated as per the Forum Rules. Please use the pastebin]

As a rough idea, I came up with this:

[contact-button type=”submit” label=”Click Here” src=”image.jpg” /]

* Notice that it’s “contact-button” not “contact-field”.
* The code would check to see if a submit button was included and if it wasn’t then it would include the default submit button at the end.
* The button type can be “submit” at first, and may later be extended to include HTML5 options. (“button” OR “submit” OR “reset”)

The above shortcode could expand to:

HTML4

<p class='contact-submit'>
<input type='image' value='Click Here' class='pushbutton-wide' src='wp-content/uploads/2011/06/Button2.png'/>;
<input type='hidden' name='contact-form-id' value='$id' />
</p>

or

HTML5
<button type='submit' class='pushbutton-wide'><img src='wp-content/uploads/2011/06/images/Button.png'/></button>

Where is the Grunion developer thread? I should probably post my idea there.

[Please post code snippets between backticks or use the code button.]