Contact Form 7 4.2 will be released at the end of this month. The edit screen has been overhauled for better usability. Add-on plugin authors should test their plugins to Contact Form 7 4.2 Beta early.

There are significant changes in the user interface of the edit screen: it no longer uses WordPress’s meta-box UI for its editing sections; instead, it uses the tabs interface that jQuery-UI provides. If your add-on plugin controls Contact Form 7’s edit screen, you need to pay particular attention to the changes.

As a result of the changes, the following filters and actions were removed from Contact Form 7 4.2:

• wpcf7_cf7com_links
• wpcf7_add_meta_boxes
• wpcf7_admin_after_general_settings
• wpcf7_admin_after_form
• wpcf7_admin_after_mail
• wpcf7_admin_after_mail_2
• wpcf7_admin_after_messages
• wpcf7_admin_after_additional_settings

If your add-on plugin uses those filters and actions to add your own content to the edit screen, consider using the new wpcf7_editor_panels filter as a substitute.

Contact Form 7 4.2 is now available. The contact form editor screen has been overhauled. As a result, some filter and action hooks were removed. See Contact Form 7 4.2 Beta announcement for details.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Renewal of the editor screen.
• Translation for Slovene has been updated.
• WordPress 4.1 or higher is required.

Contact Form 7 4.2.1 is now available. This release includes some bug fixes, accessibility improvements and translation updates.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Corrected admin script dependencies.
• Shows a hint for keyboard operation in the editor screen.
• Translations for Estonian, Portuguese, Dutch, and Turkish have been updated.

Contact Form 7 4.2.2 is now available. This release includes some bug fixes and translation updates. Contact Form 7 4.2.2 has been tested on WordPress 4.3 RC1.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Fixed: Possible empty name attribute of form element (invalid HTML5).
• Translations for Portuguese, Hungarian, and Spanish have been updated.

Contact Form 7 4.3 is now available. The recommended CAPTCHA solution has been changed. reCAPTCHA is the new CAPTCHA solution for Contact Form 7.

Since the early days of Contact Form 7, Really Simple CAPTCHA, a WordPress plugin that I created, has been its recommended CAPTCHA solution. However, it has been clear that Really Simple CAPTCHA has considerable limitations.

For example, Really Simple CAPTCHA doesn’t have an audio CAPTCHA option. That is a critical defect for screen reader users.

There are much better CAPTCHA solutions nowadays. We don’t need to stick to the old solution, do we?

How to Use reCAPTCHA

I wrote instructions for that, so please refer to reCAPTCHA.

How to Continue to Use Really Simple CAPTCHA

Existing form-tags for Really Simple CAPTCHA ([captchac] and [captchar]) still work on Contact Form 7 4.3 and later, so you don’t need to do anything special.

However, the tag-generator for Really Simple CAPTCHA won’t be displayed in the contact form editor screen by default. You might feel inconvenienced by that.

To change the setting, define WPCF7_USE_REALLY_SIMPLE_CAPTCHA constant as true in the wp-config.php file like this:

define( 'WPCF7_USE_REALLY_SIMPLE_CAPTCHA', true );

Or you can add the following code into your theme’s functions.php file to do the same thing:

add_filter( 'wpcf7_use_really_simple_captcha', '__return_true' );

» Download Contact Form 7 plugin from WordPress.org

Change Log

• reCAPTCHA module has been introduced.
• Translations for Croatian, Danish, Persian, and Swedish have been updated.
• WordPress 4.2 or higher is required.

Contact Form 7 4.3.1 is now available. This release includes some bug fixes and translation updates.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Use wp_loaded action hook instead of init to initialize the controller process.
• Fixed: Validation error messages for Really Simple CAPTCHA fields didn’t appear.
• Display an alert message if there is a reCAPTCHA widget left unanswered.
• Translations for Portuguese, Hungarian, and Turkish have been updated.

This is an announcement for volunteer translators.

Thanks to your enormous effort, Contact Form 7 is now available in 64 languages. This is great, and I appreciate your contributions.

As you may already know, translate.wordpress.org (GlotPress) has been introduced as the translation infrastructure for WordPress and related projects. It added plugin translation support last year.

Plugin Translations on WordPress.org

Translating on translate.wordpress.org has a lot of advantages; for example, you can translate collaboratively to share the burden with other translators.

We are going to migrate translations to translate.wordpress.org.

Next time you update the translation, please do it on translate.wordpress.org. For the details of translate.wordpress.org, refer to the Translator Handbook. Also, I updated the instruction page for beginner translators.

Contact Form 7 4.4 is scheduled to be released next month. I’ll check the status of translations just before the release, and if there are languages that are 100% translated at the time, I’ll remove the corresponding language (.mo) files from the plugin package so that the translations on translate.wordpress.org are used preferentially.

We are currently seeing trouble reports in a specific pattern on the support forum. The most common issue is:

• After a form submission, they see “Failed to send your message” with a red border. Mail is not sent.
• They claim that the trouble started after upgrading to WordPress to 4.4.1.

No bugs have been found so far relating to this issue, in WordPress or the Contact Form 7 plugin.

After looking through a lot of reports, I found that some of them had misconfigurations in their mail setup, and they could resolve the issue by correcting the configuration. It is possible that misconfiguration in mail setup is the main cause of this problem in many cases.

A large part of the misconfiguration is seen in the From field in their mail header. The From field is not a label or decoration; it must be a valid email address that is in the correct syntax. Otherwise, mail servers won’t be able to deliver the mail.

Following the standard specification, a From field value should be an email address:

john@example.com

It can also be a name and an email address surrounded by “<" and ">“:

John Smith <john@example.com>

While you can use Contact Form 7’s mail-tags in the field value, I recommend not using mail-tags there unless you completely understand how they work. Using an email address is safe.

Which email address should you use in the From field? You should use an address belonging to the same domain as the site. The best practice is using wordpress@{your-site-domain} and preparing the address on your host.

You might be wondering why you had been able to send mail even with invalid mail setup. Why did this issue suddenly start with WordPress 4.4.1? We’re not certain, but the important thing is that mail header fields must have valid values regardless of WordPress versions. This is a good time to review your mail setup.

In the Messages tab in a contact form editor screen, you can edit messages that Contact Form 7 displays in different situations. In the messages, you can only use plain text; do not use HTML tags and entities.

Allowing HTML in a message can be a security risk; Contact Form 7 4.4 and later forcibly strip HTML when displaying the message. Review the Messages tab to make sure that you don’t have any HTML there.

If you do need to use HTML in a message because you want to display specific HTML content in a specific situation, there is a better alternative.

After a submission, Contact Form 7 adds a class attribute value to the form element that describes the state of the form. The possible states are:

1. invalid — The form has one or more fields with invalid input;
2. spam — The user submission is suspected of spamming;
3. sent — The form has been submitted correctly and the mail has been sent successfully; and,
4. failed — The form has been submitted correctly, but sending the mail failed.

By utilizing those classes along with the CSS stylesheet, you can place a block of HTML content in your form that is visible only in the specified situation.

Let’s say your form contains a div element with a visible-only-if-invalid class which you would like to be invisible by default but visible when the form has invalid fields.

<div class="visible-only-if-invalid">
<font color="#f00">You have <marquee>invalid</marquee> fields!</font>
</div>

You can do it with the following CSS style rules:

.wpcf7 form div.visible-only-if-invalid {
    display: none;
}

.wpcf7 form.invalid div.visible-only-if-invalid {
    display: block;
}

Likewise, you can control the visibility of an element based on other situations.

Contact Form 7 4.4 has just been released. I recommend you upgrade because the new version has a lot of improvements, which I’ll describe below.

Configuration Validator

Over the past few months, we found a lot of users had mistakes in their contact form configuration that were causing serious troubles, including mail delivery failure.

To reduce this problem, Contact Form 7 4.4 has introduced Configuration Validator. With this tool, you can validate your contact form configurations and detect errors.

Started Migration to translate.wordpress.org

We have started the process of gradually migrating translations to translate.wordpress.org. Just before this release, I removed 7 language (Japanese, Hungarian, Dutch, Azerbaijani, Portuguese (Portugal), Croatian, and Swedish) files from the plugin package so that those language files are supplied from translate.wordpress.org.

Language Selector Retired

The language selector, which was displayed on Add New Contact Form screen in the previous versions to allow you to select the language of the new contact form, has been retired.

This functionality was introduced 6 years ago when Contact Form 7 2.1 was released. Even at the time, it was obvious that providing localized content was out of the contact form plugin’s territory; multilingual plugins should handle that. However, there were no good multilingual plugins I could recommend to users, so I had no choice but to implement the minimum necessary functionality in Contact Form 7.

Now we have several options for good multilingual plugins, such as Polylang, MultilingualPress, Babble, and Bogo, so I thought it was time to retire the language selector. The multilingual plugins can switch the locale setting of WordPress, and Contact Form 7 provides contact forms in the current locale.

By the way, if you are looking for multilingual plugins, I recommend Bogo (because I developed it ).

Requires: WordPress 4.3 or higher
Tested up to: WordPress 4.4.2

» Download Contact Form 7 plugin from WordPress.org

Change Log

• The configuration validator has been introduced.
• The language selector has been removed from Add New Contact Form screen.
• Attach a plain text version of the message when sending HTML mail.
• Added do_not_store additional setting to tell data storage add-ons not to store data through the contact form.
• The minimum required WordPress version has been changed from 4.2 to 4.3.

Contact Form 7 4.4.1 is now available. This release includes several fixes and improvements.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Config Validation: Added a link to FAQ.
• Config Validation: Relaxed email domain validation.
• Config Validation: Added mail header syntax check for Cc, Bcc, and Reply-To.
• Fixed: Incorrect character count for quotation marks.
• Language Packs: Language files for German (de_DE), Italian (it_IT), Romanian (ro_RO), Estonian (et), Spanish (es_ES), and Finnish (fi) have been removed.

The last Sunday was WordPress Global Translation Day and we had a lot of contribution to the Contact Form 7 translation. Thank you everybody! Now we have 22 language packs available from translate.wordpress.org.

If you are using Contact Form 7 in those languages, after updating the plugin, don’t forget to go to the WordPress Updates page (Dashboard > Updates) and update translations. Enjoy Contact Form 7 in your language.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Language Packs: Language files for French (fr_FR), Russian (ru_RU), Slovak (sk_SK), and Turkish (tr_TR) have been removed from the plugin package.
• Config Validation: Interoperability support for WordPress MU Domain Mapping plugin: Treats a mapping domain as the site domain when you compare an email address with the site domain.
• Config Validation: Made email-in-site-domain verification case-insensitive.

The default contact form template has been modified for the first time in 8 years. The major change is the addition of label elements.

Using a label element to label a form control is recommended in accessibility guidelines. In earlier versions, the default template didn’t use label elements, so you had to add them on your own if you wanted to make your form accessible.

In the early versions released before 2008, label elements were used in their default template, but they were abandoned for a reason.

If label elements were used in the default template, users would follow them and try to use label elements for fields they added as well. This practice isn’t bad, but it sometimes resulted in a critical mistake.

To demonstrate the common mistake seen around label elements, try adding the following line into your contact form:

<label>[checkbox your-country "China" "India" "San Marino"]</label>

Look correct? Try clicking on the labels for the second or third option (the text “India” or “San Marino”). Can you tick the checkbox? You can’t, right? It’s completely broken.

This happens because you have put multiple form controls inside a single label element. A label element must correspond to a single form control. Since the form-tag ([checkbox your-country "China" "India" "San Marino"]) is actually replaced with three input fields, it’s an invalid markup.

For labeling checkboxes and radio buttons, Contact Form 7 provides use_label_element option. Use this instead of label elements.

Because of the problems caused by label elements in the default contact form template, it was abandoned. However, there is no doubt that we should encourage users to do correct labeling in their forms.

As a solution for this situation, Contact Form 7 4.5 introduces an additional test item in its configuration validator. If you insert two or more form-tags inside a single label element, it will show an alert to indicate a possible misconfiguration.

This improvement was made as a result of a discussion with the WordPress Accessibility team at WordCamp Europe 2016 Contributor Day.

Requires: WordPress 4.4 or higher
Tested up to: WordPress 4.6

» Download Contact Form 7 plugin from WordPress.org

Change Log

• The default contact form template is revised.
• reCAPTCHA: Run grecaptcha.reset() after a submission.
• The autocomplete option for form-tags and wpcf7_form_autocomplete filter hook are introduced to manage autocomplete attribute.
• The config validator is revised. The wpcf7_config_validator_validate action hook is introduced to allow 3rd-party to cut in.
• A bug in character count form-tag is fixed.
• Language Packs: Language files for Danish (da_DK), Polish (pl_PL), and Czech (cs_CZ) have been removed from the plugin package.

Contact Form 7 4.5.1 is now available. This release includes several fixes and improvements.

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Avoids JavaScript strict-mode errors seen with ill-designed themes.
• Fixed a bug around reCAPTCHA’s callback and expired-callback options.
• Specifies cursor style for file uploading fields.
• Corrects language tags for locale codes with modifying suffix like ‘_formal’.
• Corrects wpcf7_is_rtl() output. Added 5 locales to the RTL locales list.
• Language Packs: Language files for Portuguese (Brazil) (pt_BR) and Hebrew (he_IL) have been removed.

Contact Form 7 4.6 is available. This release has been confirmed as compatible with the upcoming WordPress 4.7, and includes a lot of new features and improvements I’m sure you have been looking for.

Compatible with WordPress 4.7

WordPress 4.7 is scheduled to be released within the next few days. Among several highlights of 4.7, I think the most attractive is the user admin languages — users can choose the language they prefer for their admin screen.

This means that creating localized contact forms has become easier than ever; you don’t even need a multilingual plugin. Simply choose your admin language in your profile page, and then create a new contact form.

Translations are supplied from translate.wordpress.org. You can update translations in Dashboard > Updates on the admin menu.

Update of Ajax Loader: Easily Customizable with CSS

In previous versions, Ajax loader (the spinning arrow icon that shows up when you press the submit button) was marked up as an <img> element and was a bit difficult to customize.

In 4.6, Ajax loader has become a <span> element and is easier to customize with CSS. You can use modern techniques like icon fonts, SVG, CSS animation or emojis to customize it. Feel free to be creative!

HTML Mail: Customizable Header and Footer

HTML mail has become more compliant with the specification. Contact Form 7 appends a proper header and footer to HTML mail content automatically. Also, two filters (wpcf7_mail_html_header and wpcf7_mail_html_footer) have been introduced to customize them.

Serial Number Mail-Tag

A special mail-tag [_serial_number] has been added. If you use this tag in your mail content, it will be replaced by a numeric string whose value increments. You can use it as the serial number of a message.

This feature requires that Flamingo 1.5+ be installed.

Hidden Field Form-Tag and Its Option to Get Value from Shortcode Attribute

The hidden input field module has finally been introduced. Hidden fields are not visible on the front end.

Hidden field form-tag would be useful in combination with the default:shortcode_attr option. For example, if you specify the option in a hidden field like this:

[hidden destination-email default:shortcode_attr]

and you have a contact-form-7 shortcode like this:

[contact-form-7 id="123" title="Contact Form" destination-email="xxxxxx@example.com"]

the destination-email hidden field will have a value of xxxxxx@example.com.

Note that you need to register the shortcode attribute you use beforehand. For details, refer to the documentation for default:shortcode_attr.

WPCF7_Shortcode Has Become Deprecated

WPCF7_Shortcode class is now marked as deprecated. If you use WPCF7_Shortcode in your custom code, you will need to replace it with WPCF7_FormTag. Otherwise, you will receive a warning if you are in the debug mode.

I renamed this because the use of the term “shortcode” was confusing. It is actually a form-tag of the Contact Form 7 plugin, but sounds like a shortcode of WordPress itself. Those two concepts are similar, but fundamentally different.

For the same reason, some other classes, methods and functions have also become deprecated.

Requires: WordPress 4.5 or higher
Tested up to: WordPress 4.7

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Ajax loader: HTML markup changed to <span> to be easily customizable with CSS.
• Appends a proper header and footer to HTML mail content automatically.
• [_serial_number] special mail-tag.
• New form-tag type for hidden fields.
• default:shortcode_attr form-tag option.
• WPCF7_Shortcode, WPCF7_ShortcodeManager, wpcf7_add_shortcode(), wpcf7_scan_shortcode(), and some other classes and functions have become deprecated.
• Removed all language files from the languages folder. Translations have moved to translate.wordpress.org.

Contact Form 7 4.6.1 is now available. This release includes several bug fixes.

Requires: WordPress 4.5 or higher
Tested up to: WordPress 4.7.1

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Fixed: “0” input could pass the minlength validation.
• Fixed: exclude_blank option was applied to all mail fields, not only to the message body.
• Fixed: wpcf7_autop() incorrectly inserted <br /> around hidden and block-type form-tags.
• Fixed: Applying strtolower() to uploaded file names was unnecessary and could cause troubles in a non-English environment.

Contact Form 7 4.7 is now available. This release is mainly aimed at several internal refinements that are going to be important in the future evolution. Although it doesn’t include fixes for security issues or critical bugs, I recommend that all users upgrade as soon as possible.

Requires: WordPress 4.6 or higher
Tested up to: WordPress 4.7.2

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Added REST API custom endpoints to manipulate contact form data.
• Config Validator: Added test items for field names and attachment file paths.
• Added custom DOM events: wpcf7invalid, wpcf7spam, wpcf7mailsent, wpcf7mailfailed and wpcf7submit.
• New action hook: wpcf7_after_flamingo.
• Added size option to select and select* form-tag types.
• Made it possible to use the 3rd parameter of wpcf7_add_form_tag() to specify “features” of the form-tag type.

Contact Form 7 4.8 is now available. Continuing from the previous update, the main focus is placed on internal refinements for future evolution.

Frontend JS Overhauled

We overhauled the JavaScript file loaded on the front-end.

Contact Form 7 4.8 and later versions no longer use the jQuery Form Plugin (jquery.form.js) for Ajax form submissions. Although most users may not notice, jquery.form.js has been supporting one of the most important functions of Contact Form 7 for almost 10 years. I want to express my respect and appreciation for the developers who have been maintaining jquery.form.js for all of this time.

Contact Form 7 4.8 introduces the FormData object used to compose submission data and adds a couple of custom REST API endpoints that Ajax submissions are directed to.

Requires: WordPress 4.7 or higher
Tested up to: WordPress 4.8

» Download Contact Form 7 plugin from WordPress.org

Change Log

• Stopped using jquery.form.js.
• Added custom REST API endpoints for Ajax form submissions.
• WPCF7_FormTag class implements ArrayAccess interface.
• WPCF7_FormTagsManager::filter() filters form-tags based on features they support.
• New form-tag features: do-not-store, display-block, and display-hidden
• Removed inappropriate content from h1 headings.
• Added the support of size:invisible option to the reCAPTCHA form-tag.

The Additional Setting “on_sent_ok” is used to assign a JavaScript code that will be executed when a form submission completes and mail has been sent successfully. It is often used for the purpose of tracking form submissions with web analytics services or redirecting to another page after a form submission.

The “on_sent_ok” and its sibling setting “on_submit” are deprecated and scheduled to be abolished by the end of 2017. It’s not that using those settings is unsafe, but it’s possible that enabling them will increase risk in case there are vulnerabilities in this plugin or in other components of your site. It’s time to replace them with a safer alternative.

The recommended alternative to on_sent_ok is using DOM events. Coding with DOM events has a number of advantages over using on_sent_ok. For the details of Contact Form 7’s custom DOM events, please refer to the documentation.

In the rest of this post, I’ll explain with some examples how you can replace your on_sent_ok settings.

Replacing on_sent_ok with DOM Events

Suppose that you currently have the following line of settings in the Additional Settings tab:

on_sent_ok: "ga( 'send', 'event', 'Contact Form', 'submit' );"

This setting tells Contact Form 7 to run the ga() (Google Analytics tracker) function when a form submission completes and mail has been sent successfully.

To replace it with an alternative code using DOM events, first, find the file named “functions.php” in the directory of your active theme. Second, add the following code at the bottom of the functions.php file:

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>
<?php
}

Third, remove the “on_sent_ok” line from the Additional Settings tab and save the contact form.

That’s it.

Targeting a Specific Contact Form

If you have several contact forms and want to run the function only for a specific contact form, check the ID of the contact form like the following:

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	if ( '123' == event.detail.contactFormId ) {
		ga( 'send', 'event', 'Contact Form', 'submit' );
	}
}, false );
</script>
<?php
}

In this case, the ga() function will be executed only if the ID of the contact form (event.detail.contactFormId) is “123”.

You can find the ID of a contact form by looking for the “id” attribute in the contact-form-7 shortcode. For example, if the shortcode looks like this:

[contact-form-7 id="1234" title="Contact form 1"]

The ID of this contact form is “1234”.

Contact Form 7 4.8.1 is now available. This release fixes several bugs found in Contact Form 7 4.8.

Requires: WordPress 4.7 or higher
Tested up to: WordPress 4.8

» Download Contact Form 7 plugin from WordPress.org

Change Log

• wpcf7.initForm JavaScript function added to isolate form initialization process.
• Fix response message duplication caused by repeated click on submit button.
• Clear $phpmailer->AltBody to avoid unintended inheritance from previous wp_mail() calls.
• Fix incorrect character count of textarea input.
• Akismet: Exclude the comment_author, comment_author_email, and comment_author_url values from the comment_content value.
• REST API: More reliable approach to build route URLs.
• Include free_text inputs into event.detail.inputs.