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”

として必須の*を外し、「差出人」の欄に

[your-name] <user@domain.com>

と固定の送信者アドレスを入力すると、

Miyoshi,

Man time past by I always want to have a comment form like your “contact form 7” I love the jquery effect. Are you planning to release a comment form that has captcha and validates like contact form 7?.

Thanks,
Jonathan

P.S.
Maybe you can visit my contact form. peace!

Aurelius さん、

メールアドレス
[email your-email]

として必須の*を外し、「差出人」の欄に

[your-name] <user@domain.com>

と固定の送信者アドレスを入力すると、
「入力内容に不備があります。確認してもう一度送信してください。」
というメッセージが表示されて、送信されません。

指摘されてはじめて気づいたんですが email でも入力カラだったらメールアドレスの構文チェックではじかれてしまうんですね。これじゃ emailemail* を区別する意味がなくなってしまいますね。これは意図してないことなので次のリリースで修正します。

(たぶん最初のころからそうなっていたと思うんですが今までだれも指摘しなかったところを見ると email はほとんど使われてないのかな…)

それと、タグの作成でメールアドレス項目を作成すると、
作成されるコードが”email”ではなく”text”になるのは
バグでしょうか?

バグです! これも次のリリースで修正します。今週末あたりに出そうと思うのでためしてみてください。

いろいろと助かりました。どうもありがとうございます。

Jonathan,

So far I have no plan to extend it to comment. I would appreciate if someone do it. I think I can help.

btw, elegant web design yours is! I like it!

Miyoshi,

Thats great man; I want to create that comment base contact form 7. But I wish I have a skills to do that. But I try it soon if I’m not busy. I’m still reviewing your contact form 7 it was really great!, besides it has many function and its really fits may needs. Since this is an open source Can I suggest to you nor to open source developer who uses a contact form 7?

Oh man! Thanks for your appreciation regarding to my website!

Jonathan,

I want to see the comment plugin based on Contact Form 7, too! It’s really an honer for an open source developer to see someone find his product useful and even make more useful derivative from it. Good luck!

Hi there,

Thanks for a great plugin, I really appreciate the work you’ve put into this.

I have found one problem though. I have enabled a captcha on my form. When I click on the input box to confirm the captcha focus is immediately sent to the submit button. I have to click in the input box and keep the mouse button pressed to force the cursor to stay in the box.

This happens using Firefox 2.0.0.9 and using version 1.7.2 of your plugin. It works fine in Safari 3.0.4 (5523.10).

Regards,
Paul.

Paul,

I visited your site and confirm the problem on Firefox 2.0.0.11.

And I validated the XHTML structure of your site with the xhtml-css validator. It shows some critical “XML Parsing Errors”. One of them is opening <p> tag just before the contact form part with missing closing </p>. I don’t know whether that is related to the problem, but you should correct if first.

If you continue to see the problem after correcting all the XHTML errors, please let me know again. I’ll find out in detail.

Thanks.

Thanks for having a look, I really appreciate you taking the time to have a look.

When I created my contact page I wrapped the code to include the form in paragraph tags as I wasn’t aware that your code automatically did this. I’ve removed these tags from the page, however I’m still having the same problem.

Regards,
Paul.

OK, I look again …, I’m still not sure, but it might be the <label> tag surrounding the captcha. Firefox might think it is not proper use of <label>. Can you try to take it away?

Hello how to set default value for radio:
Rok studiów
[radio radio “III rok” “IV rok” “V rok”]
And I want to set default “III rok”
Thnx for help
Squacker

Hello Miyoshi,

is there a way to have one contact form sending to alternative receivers?

Seems it could be done via select, but I do not want to present the receiver’s mail adresses as publically visible options, but only their names.

If it is not possible, I consider it a really most important feature for future release.

Otherwise I would have to create x identical forms, one for each receiver.

Maybe a conversion step from external value (like actually used in select) to internal value would be possible?

KR
Det

Hello Det,

Unfortunately, so far it has no way to do like you wrote. It’s a to-do for next version. I’m thinking about easy and simple way, but not yet decided. I’m considering putting sort of if-clause into Mail fields.

Hello Miyoshi,

“I’m considering putting sort of if-clause into Mail fields.”

Sounds good and flexible in use.

If it were for the select alone, some way of declaring a mapping would be sufficient. (That was what I thought by myself).

E.g:
[select receiver “Tom”(tom@tomshome.org) “inga”(she@somewhere.se) “webmaster”(info@thisdomain.com)]

or
[select receiver “Tom”:”tom@tomshome.org” “inga”:”she@somewhere.se” “webmaster”:”info@thisdomain.com”]

Where the content of the ‘key’ is shown in the HTML and the content of the ‘value’ is replacing the mail field’s tag.
Same behaviour as currently, only that an internal content change happens in between.

Only a suggestion …

THX
Det

Hi Miyoshi,

Thanks for this great plug-in!

I have a question:
Is it possible to assign a css class to the submit button somewhere?

I can’t find where to add class=”mybutton” for example and don’t think this can be achieved in my wordpress style sheet.

I should say, the button class needs to be different from the input class currently used for styling the textfields.

Normally I’d simply do this for example:

Of course, it’s not so easy with this plug-in due to the syntax:

[submit “Send”]

Any suggestions much appreciated!

Sorry, I’ll try that again…

Normally I’d simply do this for example:

input name=submit class=button value=Submit type=submit

Steven,

So far it’s not supported but I’ll make class: and id: options for [submit] tag as same as other type tag soon, so please wait for a while. Thanks.

Just installed Contact Form 7 and I have the default contact form working inside a post or page just fine.

Problem is, no message confirmation is displayed after clicking send. Do I need to activate Akismet for this? I notice the description of the four response states is contained in the details for using Akismet.

The ajax loader animated GIF plays endlessly and there is no response message even after clicking send with all fields blank.

Any and all help appreciated.

Michalien,

I can’t find contact form in the page you wrote. Is that correct?

Also note that form allows multiple sends – or is this a symptom of the ajax loader not running right?

It depends on the setting on the plugin admin panel. I believe it’s not related to the AJAX thing.

Miyoshi,

Please try again. I wanted the register page to not appear on the list of pages so tried using the ‘draft’ or ‘private’ status to suppress. I was able to view the form page successfully with the link:

http://www.amorecucina.com/blog/?page_id=21

as long as I used the same browser window (I now discover). Opening a new window I find the same as you: el blanco.

I have published the page now – it seems to work.

regards,

Michalien

Michalien,

I confirmed that there is no Ajax (JavaScript) problem on client side. Maybe server side problem. You should check mail log on your server. If you are using other plugins related to mail, you should disable them as a test as well.

Miyoshi,

Contact form is only plugin accessing email. Mails are sent and received fine – just no message confirmation appears and no validation – empty fields produce no error response?

Tks,

michalien

Miyoshi,

Many thanks for your prompt responses. Frustrated by the unexpected hang-ups in getting a form working, I have disabled CF7 and am trying CFORMS II. Initially, I had the *same* problem with CFORMS with the ajax submission not working. Help info suggested that this is due to our wp install being in /blog/ rather than the domain root. The suggested fix was to change a variable in the cforms js file to specify the base URI as [/blog/] which seems to have fixed it. Though I don’t know how to tell whether it is actually submitting via ajax.

I like the simplicity of CF7 so am happy to try again if we can work out the probs.

Best regards,

michalien

Miyoshi,

Excellent plugin! Thanks!

I have been testing the contact form and I was wondering if anyone else noticed that when I enter text into the Name, Email, and Subject boxes, the text is “normal” sized, but when I enter text into the Message box the text size is smaller. I only notice this in Firefox, not in IE. Any ideas?

Thanks,
Joe

You mean font size? If so, it just because relative font size is applied in CSS. To fix it, add this line into CSS stylesheet in theme you are using

input, textarea { font-size: 48pt; }

# Too big?

Yep. That’s it. The problem is that affects the text in the blog comment field, which looks like it’s also called “textarea.” Hmmm….
joetest

Hi Miyoshi,

I have some questions regarding the checkbox code.

1. What does “Make checkboxes exclusive” mean?

2. I used the “Generate tag” function to create the checkbox tag. It created: “[checkbox code “I agree”] and the checkbox shows up on the contact form. My two questions are: How do I make it REQUIRED? What do I put in the “Mail” section for me to see if it was checked or not? I tried putting in [checkbox] but that didn’t work.

Thanks!

Does the plugin require a “textarea” to be included? I’ve done some testing and if I don’t have a “textarea” then it indicates that the message was sent, but it does not get received. When I put back the “textarea” then it seems to work again.

Is it possible to just have custom fields and no textarea?

Thanks,
Joe

jcmilton,

1. What does “Make checkboxes exclusive” mean?

It makes the checkbox behaves like a radio button. When you check A, it automatically uncheck B and C. Only one can be checked.

How do I make it REQUIRED?

So far you can’t make it required. It’s in next to-do.

I tried putting in [checkbox] but that didn’t work.

Perhaps you need [code] not [checkbox]. If the checkbox is checked, "I agree" will be shown up on the mail.

Is it possible to just have custom fields and no textarea?

Yes, it is. I think the textarea thing has no relation to the problem you're seeing.

Hi Miyoshi,

Thanks for the help. I used [code] and it works.

I'm still having problems with the email being received if I remove this:

Other Information
[textarea your-message 60x10]

If I include it in the form, the email is received. If I remove it, the email is not received. Any ideas why this is happening?

OK it seems to work now. For some reason those emails were delayed but they were delivered. Sorry for the false alarm. Thank you for the help and the quick response!

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