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”

Alo,

Great plugging!

But i was wondering, if there’s a way i can edit the style of the “send” button??

I tried styling the button directly from my WordPress Administrator Panel, but that didn’t work :(

Any clues? – Thanks!

hello again me!

please if someone has any idea how can i style the “send” button of the form – e.g. change the color of the button to blue and make it longer in size.

let me know!!! – thanks!

NEVERMIND!!

hehe finally I found out how to style the “send” button of the form.

sweet! =)

Hi

I’m trying to use your contact form at palmcourttrio.org.uk. However, every time I test the form it doesn’t fill in any details in the form. All I get in the email to say somebody has use the form is [Your Message] etc.

Any ideas please?

Thanks

Rich

P.S. I have matched the form fields in the mail fields.

diana, it would be helpful to me and others if you wrote what you did to style the button, not just tell everyone you figured it out…

I continue to get the following error, come what may:

“Failed to send your message. Please try later or contact administrator by other way.”

What do I need to correct it?
Thanx

I made a contactform with a HTML mail as result. It works fine. But when I upload a jpg file too, the mail is changed in a textfile. The jpg is uploaded and is an attachment . In the field File attachments have i placed only [file-33]. Any idea?

I upgraded the plugin to the latest version (1.9.4) and my CAPTCHA stopped working. This presented a problem because no one could use my form anymore and I had no way of knowing it wasn’t working until I went to the page. How often do you think users go to their own Contact page?

The plugin told me that I needed another plugin (Really Simple CAPTCHA) to make the CAPTCHA work. I NEVER NEEDED IT BEFORE yet for some reason it’s now a dependency. Why the developer would think creating a dependency was a good idea I’ll never know…

WTF?

Hello,
So as requested here are some steps on how I was able to finally STYLE a “SEND” in this fabulous plunging for a contact form.

I really hope this can help to people that maybe has been trying to do the same as me.

It was very easy!

Styling a “SEND” button in your contact form:
1. In your Contact Form 7 Admin panel, create a new tag –> “Generate Tag” drop menu.
2. Chose “submit button”.
3. In the “class” field, fill out a name for what you would like to call your styled button. (E.g. button)
4. In the “label” field, fill out the name of your desire “submit button”. (E.g. send)
5. Copy the code that appeared automatically when you were filling out the fields and paste it into the form left.
6. By now on the form left, you should have something like this: [submit class:button “send”] –>You see, the class name you gave to your button, appears as “class:button”.

Now it’s only up to work your CSS to style that class:
7. E.g:
.button { border: 1px solid: black; background: #cccccc;
padding: 1px 2px 2px 4px; text-transform: lowercase; }

And that’s it, by now you should have a “send” or “submit” button styled as you wanted.

So just to recap again:
– In the form: [submit class:button “send”]
– In your CSS stylesheet:
.button { border: 1px solid: black; background: #cccccc;
padding: 1px 2px 2px 4px; text-transform: lowercase; }

–> Btw. I wanted to add that once you are creating that button and adding a class, you could also add a div with an “id”. E.g. id=button-one.
In the form: [submit id:button-one class:button “send”]

ups! just wanted to say sorry for bad spelling in English, when I write to fast, I tend to make many mistakes, since it’s not my native tongue.

– I meant “how I was able to finally STYLE a “SEND” button in this fabulous pluging…”

– and forgot to mention, for the ones that doesn’t know how to style an id, you do it like this in your CSS stylesheet:
#button-one { margin: 20px 0 0 15px; }

Hi Miyoshi,

I tweaked the wp-contact-form-7.php by adding the line $mail_headers .= “Bcc: BccEmail@example.com“; after your $mail_headers = “From: $mail_sender\n”; and it works fine, but I’d like to suggest to have the CC and BCC fields available in the Contact Form 7 Admin panel.

Btw, your Contact Form 7 is really FABULOUS.

[…] Contact Form 7 This is very nearly everything it needs to be.  This plugin allows you to create multiple instances of contact forms, using the standard form elements, and includes the ability to add a simple Captcha.  The documentation could use a little help; so you may need to read through some of the responses on the plugin homepage and do some trial and error to figure out just how it works, but once you get through that, it works like a charm.  You may also want the Really Simple CAPTCHA plugin from the same developer — it used to be included, but now it’s a separate element — or the more robust WP-reCAPTCHA that I’ve used on this site. […]

When the form is filled out it doesn’t pass any information except whatever is written in the message box. Any ideas?

This is the only downside I’ve discovered to an otherwise good plug in.

I love this plugin and want to make these suggestions (after spending much time trying variations and hanging in the forums looking for answers) :

1. add a “CC” field to the form that is mailed so we can have a copy of the form data sent to the person filling it out, ex. “CC : [your-email]”

2. add a settings option for a redirect to URL on Submit

It is a fabulous and fabulously designed plugin!!

iDeasilo, Thanks for the plugin. I was able to customize my contact form. If any want to see it…just click my name and find the contact link.

When I include a telephone number field with Akismet enabled, Akismet will define the telephone number as a spam message. When I include a telephone number in the text area field this is also considered as a spam message. Is there a work around for this problem?

TIA

great plugin …have had no luck with automatic upgrades … every time try it, it fails….any ideas?

Could not copy file: /public_html/my website/wp-content/upgrade/wp-contact-form-7/contact-form-7/README.txt

Plugin upgrade Failed

any chance of ever merging MMForms back into contact form 7 to create one package?

it seems twice the manpower would benefit both CF7 and MMF

Very nice plugin! Clean, light and easy to implement. Perfect for quickly adding a simple contact form. Also like the simple Akismet integration. Keep it up :-)

Hi,

is it possible to call your plugin´s contact form with a php-function in a template? I simply can´t use a short-code here. could you explain? thanks a lot!

I installed as instructed in the readme file, i put the whole folder in the plugin directiory and nothing happend, didnt even show up on my manage plugins page. I guess its not working so i deleted it. thanks

I am trying to style the background color from white to black for the form fields and it’s driving us crazy. Is there a way (I know there is) to make the text form titles on a black backround.

Thanks.

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