WordPress Contact Form 7 – Part 2

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 http://www.alliedarts-foundation.org/contact/

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 http://www.alistapart.com/articles/sprites. Using CSS sprites give the hover effect that you see on the form. The actual image used looks like this:

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

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