WordPress | Contact Form 7

cf7.php

<style>
/* Standard fields and elements */
div.wpcf7 form.wpcf7-form label {}
div.wpcf7 form.wpcf7-form input.wpcf7-text,
div.wpcf7 form.wpcf7-form textarea {width:calc(98% - 2px); padding:0.4em 1%; border-width:1px; border-style:solid}
div.wpcf7 form.wpcf7-form select {}
div.wpcf7 form.wpcf7-form input.wpcf7-submit {}
/* Validation and messages */
div.wpcf7 form.wpcf7-form span.wpcf7-not-valid-tip {display:block; font-size:1em} /* the prompt that appears under a field */
div.wpcf7 form.wpcf7-form div.wpcf7-response-output {margin:2em 0.5em 1em 0.5em; padding:0.2em 1em; border-width:2px; border-style:solid} /* the larger alert that appears under the form following a submission */
/* Success colors */
div.wpcf7 form.wpcf7-form.sent div.wpcf7-mail-sent-ok {border-color:green}
div.wpcf7 form.wpcf7-form.sent div.wpcf7-response-output {color:green}
/* Error colors */
div.wpcf7 form.wpcf7-form.invalid div.wpcf7-validation-errors {border-color:red}
div.wpcf7 form.wpcf7-form.invalid div.wpcf7-response-output,
div.wpcf7 form.wpcf7-form.invalid span.wpcf7-not-valid-tip {color:red}
</style>
/* Basic HMTL structure */
<ol>
  <li><label>Name*</label> [text* your-name]</li>
  <li><label>Email*</label>[email* your-email]</li>
  <li><label>Message*</label>[textarea* your-message]</li>
  <li>[submit "Send"]</li>
</ol>

Contact Form 7 Structure

Here is the barebones CSS, HTML and Message Body for your typical contact form. Where CF7 provides CSS styles I have overridden them with the same values here. I've also added some styles to input.wpcf7-text and textarea to partially reset thus ensuring consistent widths.

Nothing fancy but it gives you a neat and tidy starting structure and should speed up the process.

Here is the basic message body structure:

From: [your-name]
Email: [your-email]
Message:
[your-message]
--
This e-mail was sent through the page "[_post_title]" located at [_post_url] via [_remote_ip] on [_date] at [_time].

Also see Display any CF7 forms that match the page title and Custom CF7 select from post list.

Also, the default animated loading GIF is a bit ugly. You can generate a new one here and then customise the CSS using:

div.wpcf7 form.wpcf7-form span.ajax-loader {margin-left: 0.25em; width: 32px; height: 32px; background-image:url(../images/ajax-loader.gif); background-size: 32px}

Hopefully all is taking shape now!