Inspiredblog: How to set up a simple contact form using Contact Form 7 plugin

Most of us, are using some kind of wordpress plug-ins to easily create custom forms. One of the best is surely Contact Form 7.  Its key features are spam filters from the Akismet database which will filter out any spam on your form. In this tutorial we’ll create a simple contact form usually placed on “about” or “contact us” page

Create your form

Copy/paste this code in ‘Form’ area (Administration -> Contact):


<label>Your Name (required)</label>[text* your-name]
<label>Your Email (required)</label>[email* your-email]
<label>Subject</label>[text your-subject]
<label>Your Message</label>[textarea your-message]
[submit class:submit "Send message"]

save it, and copy and paste generated code into your post content on desired place.

Style your form

Now, for styling. Add these css properties to your “style.css” file, at the end.


/* Page content - comment form 7 plugin
------------------------------------------------------*/

#page-content .wpcf7
{
margin: 30px 0 30px 0;
}

#page-content .wpcf7:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#page-content .wpcf7 input, #page-content .wpcf7 textarea
{
background: url("images/bg_shadow.gif") repeat-x 0% 0%;
}

#page-content .wpcf7 input.submit
{
width: 130px;
background-color: #444;
color: #fff;
font-size: 0.9em;
font-weight: bold;
}

#page-content .wpcf7 textarea
{
width: 500px;
}

New theme update

I’ll will include this styles in my next update of Inspiredblog theme.