The comment form makes sense to me because:

• it is protected by akismet;
• generally you only need the name, email and comment field;
• All your form responses are emailed to you and a record is kept in your database.

How do you do it?

I’m assuming a general knowledge of wordpress templates here so let me know in the comments of you want further clarification. After looking through the file wp_comments_post.php I noticed that it looks for a post parameter called ‘redirect_to’ that isn’t present in the regular comment form. I added the following hidden field to a copy of the comments form I made on a custom page template:

<input type="hidden" name="redirect_to" value="/contact?success" />

The end result is that a form submission will return to my contact page but with the added query string in the URL. I then check for the query string in the template using PHP to show a thank you message in place of the form.

<?php if ( isset($_GET['success']) ) { ?>

   ... show thank you message ...

<?php } else { ?>

   ... show comment form ...

<?php } ?>

There are some caveats to this approach:

• No real error handling as the comments list isn’t written out so javascript validation is required.
• If you are displaying recent comments you will need to block ‘comments’ made on the contact page from showing up.

Those problems may be deal breakers for you – especially the error handling but until I find (or write) the prefect contact form plugin this is the approach that works for me.

Here’s a quick solution to the problem of using regular CSS image replacement on inputs. The text-indent method fails in IE so we need a slightly different approach.

HTML:

<input type="submit" class="submit" />

CSS:

input.submit {
  display: inline-block;
  background: url(submit.png) no-repeat left top;
  width: 120px; // match width of background image
  height: 40px; // match height of background image
  text-indent: -9999px;
}

Because IE screws this up by not acknowledging the text-indent rule we need to take another approach. If text-indent is the horizontal approach to hiding text for small objects it made sense to try hiding the text vertically using line-height.

CSS take 2:

input.submit {
  display: block;
  background: url(submit.png) no-repeat left top;
  width: 120px;
  height: 40px;
  line-height: 100px; // must be at least the font-size plus the button height
  overflow: hidden; // only show what is within the desired dimensions
}

So there you go. The downside is that you have to use display: block; on the input. Usually this won’t be much of an issue however if you have multiple submit buttons or links next to the buttons then you’ll have to get your float on.