Categories
WordPress Plugins

Contact Form 7

This post is no longer updated. Move to Contact Form 7 official site.


Download | Plugin Homepage | FAQ | Support Forum

(日本語の説明はこちら)

Summary

screenshot

Just another contact form plugin. Simple but flexible.

  • Supports multiple contact forms.
  • You can customize form and mail contents with simple markup.
  • AJAX submitting with jQuery Form Plugin.
  • Spam filtering with Akismet.
  • Bot prevention with CAPTCHA.

Download and Install

Download the latest release from WordPress.org plugin directory.

  1. Upload whole contact-form-7 folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

Usage

  1. Open admin page [Options] – [Contact Form 7] [Manage] – [Contact Form 7].

    Update: If you are using WordPress 2.7 or greater, you can find the admin page under [Tools] – [Contact Form 7].

  2. Edit default “Contact form 1” or add new and save it.
  3. Copy [contact-form ...] code and paste it into the content of any posts you need the contact form.

FAQ

See Contact Form 7 FAQ

How to customize form and mail contents

You can use “tags” in several fields. Contact Form 7’s “tag” is formed string enclosed in square brackets [].

A tag used in form content is replaced by HTML form control element like <input> or <textarea>.

A tag used in mail template is replaced by user input of element with the same name.

wpcf7-desc

In this picture, a tag [textarea your-message ...] inserted in form content is replaced by <textarea> tag with name="your-message" attribute.

When a visitor input into this <textarea> field and submit, Contact Form 7 generates a mail based on mail template. Since message body field has [your-message] tag, this tag replaced by the user input message.

Tags in form content

You can use the following types of tags in form content.

Type Replaced by Validated as
text <input type="text" /> Any text
text* <input type="text" /> Any text / Required
email <input type="text" /> Email address
email* <input type="text" /> Email address / Required
textarea <textarea> </textarea> Any text
textarea* <textarea> </textarea> Any text / Required
select <select> </select>
select+ <select> </select>
checkbox <input type="checkbox" /> ...
checkbox+ <input type="checkbox" /> ...
radio <input type="radio" /> ...
captchac <img /> CAPTCHA
See How to use CAPTCHA
captchar <input type="text" />
submit <input type="submit" />

The syntax of tag is not so easy. You can use Generate Tag menu under Form textarea to make a tag you need.

I show you some examples of tags.

  • [text your-name 40/100 "John Smith"]

    This tag is replaced with:
    <input type="text" name="your-name" size="40" maxlength="100" value="John Smith" />

  • [email* your-email 60/ id:email]

    <input type="text" name="your-email" id="email" size="60" />

  • [textarea your-message 80x15 "Write message here."]

    <textarea name="your-message" cols="80" rows="15">Write message here.</textarea>

  • [select your-country "China" "India" "other"]
    <select name="your-country">
      <option value="China">China</option>
      <option value="India">India</option>
      <option value="other">other</option>
    </select>

I wrote about tag syntax.

How to use Akismet on Contact Form 7

1. You need Akismet plugin. If you have not activated it yet, activate it first.
2. Open Contact Form 7’s admin page and edit Form text area as:

  • Add akismet:author option to the tag of field which requires sender’s name.
    Example: [text* your-name akismet:author]
  • Add akismet:author_email option to the tag of field which requires sender’s email address.
    Example: [email* your-email akismet:author_email]
  • Add akismet:author_url option to the tag of field which requires sender’s URL.
    Example: [text your-url akismet:author_url]

Once you have activated the Akismet plugin and at least one of the akismet: options is set, Contact Form 7 will send all of a sender’s input as well as any other information related to input activity to the Akismet server. Akismet will then judge whether this input is likely to be spam.

When Akismet judges a message as spam, Contact Form 7 sends no mail and shows a response message with an orange border line (the third example in the picture below).

To make sure the spam filtering is working, send a message with “viagra-test-123” as the sender’s name. If the test is a success, the message will be judged as spam.

Changelog

0.9 (2007/04/30)
Initial release.
1.0 (2007/05/20)
Tag helper.
1.1 (2007/08/02)
File restructuring.
1.2 (2007/08/16)
jQuery Form Plugin introduced.
1.3 (2007/08/26)
New tag type: [select]
1.3.1 (2007/08/26)
Critical bug about JavaScript loading fixed.
1.3.2 (2007/09/03)
Bug fix around jQuery.
1.4 (2007/09/07)
Akismet spam filtering introduced.
1.4.1 (2007/09/11)
Add Spanish and Catalan translations.
1.4.2 (2007/09/13)
Add German translation.
1.4.3 (2007/09/15)
Add Polish translation.
1.4.4 (2007/09/17)
Add French translation.
1.5 (2007/10/07)
CAPTCHA introduced.
1.6 (2007/10/17)
Mail (2) and UI improvement for admin page.
1.6.1 (2007/10/27)
Sidebar widget support.
1.7 (2007/11/27)
New tag type: [select+], [checkbox], [checkbox+] and [radio]
1.7.1 (2007/12/06)
Made wpcf7 variable global. Polish translation updated.
1.7.2 (2007/12/13)
Bugfix. Czech translation added.
1.7.3 (2007/12/23)
New default: and label-first options added.
1.7.4 (2007/12/30)
select+ and checkbox+ tag types removed. multiple and exclusive options added.
1.7.5 (2008/01/26)
Two fixes and include_blank option.
1.7.6 (2008/03/02)
New acceptance tag added.

1,401 replies on “Contact Form 7”

Regarding Styling…

Here’s my quick solves-almost-everything-hack

1) surround the contact 7 form with a div:

[contact-form 1 "Contact form 1"]

2) define new form styles at the end of your stylesheet:
#mystyles {line-height:1.4em;}
#mystyles p {margin: 0 0 10px;}
#mystyles input {padding: 2px;}

This should help you avoid having to create new wordpress page templates and allow for rapid customization when using many forms across your site.

Regarding Styling…

the divs didn’t print so…

the above comment should read

(div id=”mystyles”)
[contact-form 1 "Contact Form 1"]
(/div)

use appropriate brackets

For a custom display (floating the fields right on the same line as the text) I edited the fields within the admin area so the text came after the field.

[text* your-first-name] First Name:

Then in my style sheet added the following:

.your-first-name input {float:right; margin-right:3em; width:15em;}

This created a nice look for my form (http://www.averybedandbreakfast.com/contact-us/).

Hi Miyoshi

I asked about…………

“Fantastic form and brilliantly easy to use. Thank you.

Can you tell me if you have a way that I can choose a URL to send the customer to when they submit the form?”

and you said…………..

“Rob Dore, currently it does not support such feature. I’m not sure about the necessity.”

I really love your form – particularly the way that it simply embeds into an existing page and doesn’t stand out as a separate form. My request is based on the fact that I am hoping to use it for more that just a “contact form”. We manage sites for some commercial clients and want to use it for sales enquiries and to monitor the performane with google analytics we need to send the user to another page so that we can get stats from that page.

If you can do it, we could pay.

Thanks again

Rob

Is it possible to have a single contact form which has a dropdown from which a user can choose to send the message to a specific department, e.g. “Technical Support”, “Sales”, “Intellectual Property”,etc.?

Thanks.

I keep coming back to this plugin whenever I need a contact form for a WordPress powered site. It’s intuitive and quick to set up. Keep up the good work. One suggestion would be to give the “Submit” button a separate selector so it can be easily skinned. Perhaps a more simpler CSS naming scheme…

I wanted to know if there’s a way to disable/modify the automatic loading of the WordPress jquery library? I want to use other jquery plugins on my site which seem to require a newer jquery version…

Very nice plugin, but having problem with my tags.

Before Contact 7 i had:

Read more »

Tags: tag 1, tag 2, tag 3, etc

After Contact 7 i’ve:

Read more »Tags: tag 1, tag 2, tag 3, etc

Any suggestion?
You can see it on drinkadrink.com
Thanks :)

Hi Miyoshi

I asked about…………

“Fantastic form and brilliantly easy to use. Thank you.

Can you tell me if you have a way that I can choose a URL to send the customer to when they submit the form?”

and you said…………..

“Rob Dore, currently it does not support such feature. I’m not sure about the necessity.”

I really love your form – particularly the way that it simply embeds into an existing page and doesn’t stand out as a separate form. My request is based on the fact that I am hoping to use it for more that just a “contact form”. We manage sites for some commercial clients and want to use it for sales enquiries and to monitor the performane with google analytics we need to send the user to another page so that we can get stats from that page.

If you can do it, we could pay.

Thanks again

Rob

I have a menu on my site that also uses java and it seems that when i turn on this plugin that the menu will not work. Is there somehitng i can do to the .js files to make them not clash.

Rob, I’m glad to hear that you like this plugin. I’ll give the idea a chance for the future version. But I’m so busy now that I’m not sure I’ll be able to implement it soon.

after i activate the plugin i also cant validate becouse or i get this error.

‘Sorry, I am unable to validate this document because on line 47 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

The error was: utf8 “\x99″ does not map to Unicode

Even if i turn of the plugin i still cant use validation anymore.

hello,
i have been using this plugin for some months now. After the famous issue with the string ?wpcf7=json which i managed to remove thanks to robot.txt (if i am not mistaken also the author manageged to eliminate it in the further versions) i would like to know if there are any issue related to this plugin and SEO. i say so because every now and then i hear people saying that this plugin is bad for SEO. i would like to have some encouraging words from the author expalining me and to everydoby who use cf7 if there are any reason to be worried about being positioned low in the search result due this plugin…is this pluing seo friendly???
thanks

webmaster of http://www.webtlk.com

Ash Haque, you can not add classes to submit buttons on current version 1.7.x, but I’ll implement the feature on next 1.8. Please wait it in one or two months.

frank, yes, this plugin is SEO friendly. They don’t fight.

Seriously, I can’t understand why some people think this plugin as bad for SEO. It is just a CONTACT FORM, right? Why a contact form harms SEO? I don’t have the answer. You should ask Google.

Im trying to generate my own entry field.

The code Im using is:

[text* WebSiteAddress id:WebSiteAddress “www.YourWebSite.com”]

The field shows on the page, but the data never gets emailed.

Here is the entire form code:

Your Name (required)
[text* your-name]

Your Email (required)
[email* your-email]

[text* WebSiteAddress id:WebSiteAddress “www.YourWebSite.com”]

Questions / Comment
[textarea your-message]

[submit “Send”]

When I contacted form 1.7.7.1 plugin activate Internet Explorer gives each page under a yellow triangle with the message that mistakes are found on the page. Reference is made to sign 3 rule 2.

Rule 3 looks a source like this:

If I disable the plug is there is no error.

The plugin works properly.

In Firefox are no errors to be seen.

What’s the problem?

Hello, is it possible to include a form within the header.php?? ie could I copy and paste the code generated when I view the source of a post that has a form, into my header.php?

[…] Contact Form 7: Great for those who aren’t familiar with code, don’t have Dreamweaver to fall back on, or just need a simple form and don’t want to waste time figuring out how to configure it. While there aren’t any bells and whistles with Contact Form 7, it does provide the basics for anyone looking for a “Contact Us” form that goes straight to email (similar to the mailto: function, but in a form presentation). If you’re looking for a contact form on the snazzier side, including ecommerce options, dropdowns, required fields or confirmation receipts, check out WuFoo.com. Also made with the non-developer in mind, WuFoo allows customers to make 5 free, customizable forms. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s