In WordPress Contact Form 7 – Part 1, we saw an example of how to customize the contact form. In this post, I am going to discuss a quick method of using an image button in place of the  submit button. The form we are discussing can be found at

In the form area, the last two lines should look like this:

<p><a href="#"></a></p>
<p>[submit "Send"]</p>

Then in your CSS:

.wpcf7-display-none {
display: none;

#maincontent p.sendbtn a {
background: url("images/send-btn.jpg") repeat scroll 0 0 transparent;
float: left;
height: 35px;
width: 132px;
#maincontent p.sendbtn a:hover, #maincontent p.sendbtn a:focus {
background-position: 0 -35px;

The CSS does a few important things. First, it hides the submit button (notice display:none). Then it uses CSS sprites as discussed in Using CSS sprites give the hover effect that you see on the form. The actual image used looks like this:

send button

The final touch comes from a bit of jQuery which just “clicks” the hidden submit button:

jQuery(".wpcf7-form p.sendbtn a").click(function() {
return false;