Inspiredblog: How to set up a simple contact form using Contact Form 7 pluginTue, Oct 13, 2009 in Tutorials, WP templates
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.
Related posts:
- Contact us
- Retro theme tutorials (part II): How to replace the text main site name with a simple PNG file?
- Inspiredblog: How to implement filmstrip navigation from FancyTheme
- Inspiredblog: How to disable style switchers and select your default color?
- Retro theme tutorials (part I): How to position the navigation menu below the header image?
Categorized as Tutorials, WP templates
Chris October 13th, 2009 at 11:08 am
Phantastic! Thank you very much!
Mip October 16th, 2009 at 2:34 pm
No problem Chris, glad to help.
Sometimes it takes a little bit longer but I
Bryce October 19th, 2009 at 11:27 pm
Hi Mip,
I’ve tried adding in the “Uploads” and “Drop down menu” to this contact for to be used as a “submission” form… When I tried adding them in, it gets all messed up. Is there a way to add in these two options without messing up the nice look of the contact form?
GREAT TUTORIAL!!
Stoneypointe October 20th, 2009 at 9:01 pm
Thank you. Thank you. Thank you!!!!!
Mip October 22nd, 2009 at 1:44 am
I’ll add some additional styles (to this post and in update) to fix file input and select boxes.
Mip October 22nd, 2009 at 1:44 am
Glad to help. Enjoy.
mark October 31st, 2009 at 2:07 am
Hi Danny,
I was looking for blogs that use Contact Form 7 to see what it looked like and found your post. I went to your Contact Page but no form is displayed – it displays:
—–
Contact us
Interested in working with us?
Fill the form below and we will contact you as soon as possible.
—–
…but then nothing else.
Hope this helps,
Mark.