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”

mike さん、

正常な状態であればフォーム送信後に結果のメッセージが表示されます。何か問題が生じているようです。マージンの件もその影響です。

JavaScript が正常に動作していない可能性が考えられます。ブラウザの設定や、何かエラーが出ていないかをまず確認されるとよいかと思います。他のブラウザで試してみるのも切り分けになります。

他のプラグインとのコンフリクトで上の問題が引き起こされるケースも考えられるので、できればクリーンインストールした WordPress 上でテストしてみるといいと思います。

個別環境の問題と思われるのでこれ以上のサポートはできませんが、試してみてください。

lillymon san,

Thanks for your comment. “your message has been successfully sent” message means “mail sending function completed successfully”. You should check 1) your mail server is working properly, 2) channel and your mail client are working properly.

I think the most possible cause of those issues is spam filtering. Check your spam filter both on server and on client.

Hello,
Could you, please, add id’s to these lines:

$html = ‘_input type=”text” id=”‘ . $name . ‘” name=”‘ . $name . ‘” value=”‘ . attribute_escape($value) . ‘”‘ . $atts . ‘ /_’;

$html = ‘_textarea id=”‘ . $name . ‘” name=”‘ . $name . ‘”‘ . $atts . ‘_’ . $value . ‘_/textarea_’;

$html = ‘_select id=”‘ . $name . ‘” name=”‘ . $name . ‘”‘ . $atts . ‘_’ . $html . ‘_/select_’;

This would be really great!
Good luck.

@Miyoshi san,

“You should check
1) your mail server is working properly
2) channel and your mail client are working properly
I think the most possible cause of those issues is spam filtering. Check your spam filter both on server and on client.”

I’m using Gmail with no custom spam filters or anything of that sort so i suppose they are working fine and my test messages shouldn’t be treated as spam but i still do not receive my own test messages. =(
I’ve double checked everything and I’m pretty sure I’ve followed your installation notes.

Any suggestions ;_;?

I put your contact form in my site and everything is great except that I get each email twice.

Any idea what is happening?

I get a few every day, so deleting the duplicate is getting tedious.

lillymon san,

You should check your server again. Nowadays many hosting servers have own spam filtering system.

Do you receive other mails e.g. comment notifications from WordPress? I think this is not an issue of plugins.

Macでの文字化け問題ですが、
1.6.1 にアップデートしたら無事に解決しました。
さっそくのご対応ありがとうございます!

初めまして。
探し求めていた個別に設置できるメールフォームが見つかり、本当にうれしいです!ありがとうござます。

1つ質問させてください。
入力者にタイトルを入力してもらうのを省くために、メールのタイトル(subject)部分を、ブログのタイトル(部分)にしたいと考えています。
そういった箏は可能でしょうか?

お忙しいところすみませんが、ご教授願えたらと思います。
よろしくお願い致します。

glass さん、

メールの件名欄にあらかじめブログのタイトルを書いておけばいいんじゃないでしょうか。タグ以外の部分は置換の対象になりませんから自由に書き換えてください。

something is not working – i always get the RED error-message. as in a reply to a similar question this should be a php problem. nevertheless WP Contact Form III just works right.

what “backend-mailer” is contactform 7 using.
thank you

Well the problem actually is that the theme i built dont use widgets (and i dont want to use them) thats why i needed a simple php solution without widgets :)

At first I was hesitant to use this contact form since it looked complicated, but the defaults are perfect for my humble needs. Thank you for this excellent and free plugin. You have made my life much easier.

Hi, it doesnt work with 2.3.1, just got rid of wp_mail() and used mail() as described above and sent the mail at flash speed… thanks for this useful plugin.

Miyoshi:
Thanks for the work on the plug-in. I’ve installed and set-up the contact page on my site. However, I’m not getting the test mails I’ve sent using the form. I’ve turned off the spam controls on both my wordpress site and my e-mail account. Still no messages go through although the contact form says they were successfully sent. Can you help?

Randall

Hi, thank you very much for the plugin but I am having a similar problem to Mohammad… it works perfectly but it has no AJAX effects… i receive all the e-mails ok though.
here is my link:
http://www.alexweber.info/contato/

also, i have another plugin “wp-email” to send emails of articles and it works with ajax, link here if you want to see: http://www.alexweber.info/blog/traducao-do-wordpress/

thank you very much and please help me make ajax work!! :)

Alex, you may also want to check out “cforms II” as it’ll fully support Ajax and can do what WP-Email does – just in case you can’t get contact-form-7 to work.

I’ve been happy with contact-form-7 but will have to eventually switch because I need more flexibility.
JP

thanks! :)
i’ll check it out but i’d really love it if the developer could just help me make ajax work! :)

Miyoshi,

This is by far THE BEST contact plugin ever – and thank you for all of your hard work on it. The one question I do have on it, is that I get a large colored box upon mail transmitting through the form, that I would like to have contained to the message area that reads “Your message was sent successfully. Thanks.” located beneath the send button. Instead, what happens is the entire form is surrounded by the colored box upon transmission. Any suggestions to correct this would be highly appreciated, and please feel free to go to the contact form on the site, and test submission of an email to reproduce the error. All the Best, Booker!

Jake, its easy!
On the customize contact form admin screen just add a new text-area tag and you will see that there are optional parameters like rows and columns… here’s an example:

Subject
[text your-subject 40/]

Message
[textarea* your-message 50×6]

this creates a subject text field of size ’40’ and a textarea field of 50 rows x 6 columns…

look at what it looks like here:
http://www.alexweber.info/contato

*note i also added some custom CSS of my own but you get the idea! :)

Hi Jake,
I didn’t, all i did was manually find the PHP code where the form is generated (search for: ###$form .= ”;###) around line 540 of wp-contact-form-7.php and added a fieldset around the form. just make sure to add the opening fieldset tags before opening the DIV a couple lines up or else AJAX won’t work (don’t ask… took forever for me to figure it out) and also don’t forget to close the fieldset tags after closing the form tags… then just override the CSS for ALL fieldsets.

but really, you could just add a class to the form in that same file and style it like that…
if you need more detailed help drop me a line by email and i’ll help out!

Alex

ok it edited out most of my code… but you might still be able to find it around like #540 of that php file… where the form is generated… gl

Alex

Sorry, I’m late …

Thank you for comment everybody.


Randall,

I’ve installed and set-up the contact page on my site. However, I’m not getting the test mails I’ve sent using the form. I’ve turned off the spam controls on both my wordpress site and my e-mail account. Still no messages go through although the contact form says they were successfully sent. Can you help?

I don’t know well about those problems, but it seems that WordPress’s current mail sending function has trouble on some environment (see trac #5007). And some Contact Form 7 users have reported that changing wp_mail() to mail() solves the problem. I’m still not sure what’s the cause.


Alex,

Hi, thank you very much for the plugin but I am having a similar problem to Mohammad… it works perfectly but it has no AJAX effects… i receive all the e-mails ok though.
here is my link:
http://www.alexweber.info/contato/

Sorry for my late reply, but you seem to have already solved the issue by yourself :)

And thank you very much for answering to other users questions!


Booker,

The one question I do have on it, is that I get a large colored box upon mail transmitting through the form, that I would like to have contained to the message area that reads “Your message was sent successfully. Thanks.” located beneath the send button. Instead, what happens is the entire form is surrounded by the colored box upon transmission.

I saw your site and checked its HTML tree with Firebug. It seems that all the contents are under the “header” div element. Is this intended? I think you forgot to add a closing </div> tag.


Jake,

Thanks Alex! I hate to bother you further, but how did you set id’s to the form fields for CSS.

You can also use id: and class: options as:

[text your-subject id:formsubject1 class:textfield]

This tag is replaced by:

<input type="text" name="your-subject" id="formsubject1" class="textfield" />

Then you can specify CSS style for these id and class.

So far the <form> element has no id or class, but I’ll set them in next version for CSS styling.

Thank you.

Miyoshi… in your response you said: “I saw your site and checked its HTML tree with Firebug. It seems that all the contents are under the “header” div element. Is this intended? I think you forgot to add a closing tag.” Could you specify where I should put the tag – I’m lost! Thanks, :) Booker.

Thanks Miyoshi. You and Alex have been great helps. I think just adding a default form id would work out great. The only thing would be if you change the name of the form (which I recently did), the id would probably change, and then you not only have to change the code where you want the form to show, you would also have to go back and rename your css. Regardles.. I still like the idea.

Thanks again!

Jake
http://grapethinking.com

Hello, thanks for all your work on this great plugin.
Is there a way to REMOVE all the code within the head of pages that do NOT have the Contact Form?
It seems strange to have all that code in the head on every page when the contact form is (often) only on one page.

I know with other plugins, one can employ a combination of a conditional tag and a “remove_filter” call.

Here’s a snippet from such a combination for another plugin:

Copernicus,

Good suggestion. How about this?

<?php remove_action('wp_head', array(&$wpcf7, 'wp_head')); ?>

Add this line into your template before wp_head() is called. You need the latest 1.7.1 of Contact Form 7 which I released just now :)

Thank you.

Your contact form is DA BEST Can I use help?:D How can I use drop-down menu for my customize subject?

Jonathan,

You can do it by adding this line into the Form text area.

[select your-subject "Option 1" "Option 2" "Option 3"]

Original [text your-subject] line is no longer in use, so you can remove it.

Miyoshi,

Thanks for your reply. I customize the design of your contact form 7 to fit in my site. Is that okay to you?

Your contact form was great promise. I rate that 10 out of 10. Because its useful and easy to use plugins!

すばらしいプラグインをありがとうございます。
カスタマイズ性と使いやすさが両立されていて、
最も優れたメールフォームだと思います。

Contact Form 1.7.1について質問があるのですが、
送信者のメールアドレスの入力を必須にしないため、
メールアドレスは

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

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

[your-name]

と固定の送信者アドレスを入力すると、
「入力内容に不備があります。確認してもう一度送信してください。」
というメッセージが表示されて、送信されません。
送信者のメールアドレスを必須とせず、フォームを利用するには
実際にはどうすればいいでしょうか?

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

お忙しいところすいませんがよろしくお願いします。

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