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”

miyoshi, thanks for your responce, i’ve checked my site using html validator and there are errors, i agree. But the major error that shows the yellow triangle at IE7 is caused the contactform 7 pluging. When i disable the plugin the error is gone. how to solve this?

vetvrijcom, you should solve the HTML errors first if you are seeing them. If the IE error remains even after you solved all the HTML errors, please tell me that and let me see your problematic page.

miyoshi, thanks again. Every site has html errors when you check it whit http://www.xhtml-css.com. by example: “google.com” generates 63 html errors and even your blog (https://ideasilo.wordpress.com/) generates 10 html errors.

It’s impossible to solve this errors.

The difference between this site https://ideasilo.wordpress.com/ and my site is that my site caused a yellow triangle with IE7 as contactform 7 is activated. If I contactform 7 plugin off the error is gone. There is no conflict with another plugin.

i made a screendump from the IE error. you can find it on: http://img387.imageshack.us/img387/7517/contactfaultjb1.jpg

This error is gone when i deactivate the contactform plgin.

Thanks in advance!

vetvrijcom, thanks. I didn’t realize that wordpress.com also has errors.

But, even if you have IE errors only when Contact Form 7 is activated, it doesn’t have to mean there is causes in Contact Form 7.

As I wrote before, you should show the actual page, the URL. Why don’t you do that? Without seeing the problematic page, no one can solve it. I couldn’t get any clues from the jpeg screen shot you wrote, sorry.

miyoshi, my actual page is the same as my username. just place a dot (.) before com ;)

Hello Takayuki,

I wanted to know one thing
if i dont want
1) contact-form-7/contact-form-7.js (3KB) and
2) contact-form-7/stylesheet.css (800 byes)

to load on everypage .. what can we do ?

its not huge data, but still was keen to reduce page size.

Regards

Link Exchange

[…] Contact Form 7 : コンタクト・フォームです。高機能で、僕は使いこなせてません(汗)が、毎回これを使ってます。ちなみにこのプラグインは日本発ですが、WP本家サイトのプラグインページを見ていると、海外でも非常に評価・人気が高いのがわかります。もしかしたら、今は海外の方が知名度は上かも? […]

Hi,

This works great when used in a post but I can’t seem to get it to work on a Page. I just get the [contact-form…] tag, its not getting parsed correctly. Any ideas what might be the problem?

Cheers
Rory

plugin seems great, very flexible, and its perfect for what i need. only problem is, i can’t get it to work, and i am confused as to why. i can get the form set up with no problem, as seen here: http://toonbarn.com/contact/

and it appears to send correctly, but the email never arrives.

i went to my WP admin plugin settings, and edited “Contact form 1”

i left “FORM” as is

in “MAIL” i added my email (rob@toonbarn.com) in the “TO” field and left everything else as is.

i did not check “MAIL (2)”

what did i miss?

rob, is it a problem of the contact form? Do you recieve other mails from your server? I think you should check your mail log on the server. Or spam filters.

hi miyoshi, thanks for responding

i am able to receive emails from other sources. i also tried changing the email address in the contact form to another address of mine, but with no better results. and the second account i tried has no spam filter. im not sure what else i can do.

I am trying to use the drop down box feature and when i tested it the incoming email does not let you know which selection the user made. Is there a way to fix this???

Thank you,
Terry

hi miyoshi,

good find, you are correct — i also do not receive notification emails (and again, to any address i set up to do so)

i guess there’s an overall wordpress setting i am missing somewhere

[…] You can now use the Contact Form 7 plugin to create multiple custom contact forms. To use it, go to the admin panel’s Options tab and then Contact Form 7. You can create a custom email form and then format the email that gets sent to you. Copy the provided code snippet (in brackets) and paste this into a page to make the form show up where you want it-. You can find out more about working with this plugin at: https://ideasilo.wordpress.com/2007/04/30/contact-form-7/ […]

Thanks for the great plugin! It’s very useful and well designed. I was up and running with two different forms in less than 20 minutes!

I’m having one issue with a form at

http://www.big6.com/register-your-school/

with the radio buttons and FireFox 3. When I try to click on the radio buttons, only the first radio button in the set is clickable. Clicking on any of the others doesn’t work, and the first button in the set is marked instead.

I’m not sure what to do. Can you help me?

Thank you for creating this plugin!!! I needed a plugin that would allow my client to create and maintain complex web application forms for his website and this does the trick… The other webforms were too linear and with your plugin I can arrange the fields however I need to.

Just one suggestion… instead of the link to managing the forms under ‘Settings’..Could it be placed under the ‘Manage’ section of the site?

thanks again!!!

Kannagi,

Just one suggestion… instead of the link to managing the forms under ‘Settings’..Could it be placed under the ‘Manage’ section of the site?

Yes, I think it makes sense. I’m considering to include it into next version. Thanks for your suggestion.

hello,

I have a problem with ssl admin (https) I guess. Since WP 2.6 we can use and force https in the admin panel.

When I save the options form, None change has been saved… I think that is from the https connexion, because the browser says to me “Warning, the informations will not be send securely…”

Great Plugin. It set itself up automatically on one of my blogs that had a lame contact form plugin. Just install and bam, it was running.

I have an issue on another blog. Probably an easy thing to straighten out, but I simply can’t figure out why the form works in IE 7, but not in Firefox 3.

Can I get a pointer in the right direction to resolve this? The URL is http://www.webpageadvisor.com
Many thanks.

Great plugin! I find it very useful! Thanks!

But, I think there might be a bug. When I submit a form, the form submits and then clears itself. There’s no message to indicate that the form has been submitted (no green border message).

Is there a way to get this to show up? And also, is there a way to customize this message for each form?

はじめまして。すばらしいプラグインをありがとうございます。

さて、URLに埋め込まれたパラメータをPHPでGETして、それをフォームの初期値として表示させることは出来ないのでしょうか?
例えば等としてコードに埋め込んでも、そのまま表示するだけです。

よろしくご教示願います。

miyoshiさん。早速のお返事ありがとうございます。

いじるというのは、プラグインを構成するスクリプトをですか?wp-contact-form-7.phpあたりでしょうか?
もし何かヒントをいただければ、大変ありがたいのですが。

The layout and process for this is at best confusing.

I tried to get it to work but when it says copy and paste I couldn’t even copy it out?

I wish someone would design a form that is simple to use and doesn’t assume you the user knows what they fail to clearly state.

Looks like others got it to work? Frustrating.

Vonster: I’m a little confused by your question here. I installed the plugin and it worked right out-of-the-box! What sort of problems are you facing?

@Yingna: I get a ‘message was sent successfully’ message at the bottom of the form when I send a test message. Here’s a screenshot: http://c.imagehost.org/0305/sent.png

自己レスです。プラグインをいじる必要は無かったですね。
WPのテンプレートにPHPとJavascriptを追加することで出来ました。
お騒がせしました。

Is there a way to transform the mail function to a simple download function. I want users to download a file after entering a email-adress.

Thanks.

Hi there.

I am new to wordpress and PHP. I would like to incorporate the CAPTCHA feature on my contact page. However, when I copy the CAPTCHA code, I does not align properly. With the default fields.

How can I fix this. You can go to http://www.shawnhank.com/blog/contact and you will see what I mean.

I would like the image to be centered on it’s own line, and I would like the user field to enter the characters to be right below it. With the submit button right at the bottom center. As you can see there is no submit button at all.

Thanks,
Shawn

forget about the submit part. I figured that part out.

However, the CAPTCHA image and the user entry field are not centered and are on the same line.

here is the code from the form field under Manage -> Contact Form 7:

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

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

Subject
[text your-subject]

Your Message
[textarea your-message]

[captchac captcha-145]

Please fill in with data from image above:

[captchar captcha-145]

[submit “Submit”]

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