Contact Form 7 5.4 Beta

The next major update, Contact Form 7 version 5.4, is scheduled to be released on February 24. Since 5.4 brings unusually large changes, I have decided to have a beta testing period of a few weeks before the live release.

You can download a copy of the beta version plugin package from the GitHub repository. If you find any bugs, please report back to us by creating an issue on GitHub.

If you find an add-on plugin you use doesn’t work correctly with Contact Form 7 5.4, then please report the issue to the developer of that plugin, not to us. We cannot take any responsibility with regards to 3rd-party products.

Major changes of 5.4 fall into the following four groups:

You can browse the full list of changes on GitHub.

Introduction of the Sendinblue integration module

As we announced last December, we have been preparing to introduce the integration module for Sendinblue, the leading CRM and email marketing platform in Europe.

This module adds Sendinblue to the Integration with Other Services menu page (Contact > Integration). See Sendinblue integration for details and the usage.

  • New filter hook: wpcf7_sendinblue_collect_parameters
  • wpcf7_mask_password() used in the Integration menu page has been improved, and now you can set unmasked text lengths for both the right and left sides.

Overhaul of frontside JavaScript

In 5.4, we make drastic changes in the JavaScript used on the frontside (non-admin area) of a website, which has long been unchanged jQuery-based scripts. The new JavaScript coding relies on the @wordpress packages that are bundled with WordPress, and it uses no jQuery, with only a few exceptions such as one used for the date picker fallback, which is based on jQuery UI.

  • Some features that are outdated and unnecessary today are removed. These include the placeholder polyfill and the number field polyfill.
  • New DOM event type: wpcf7reset (fires when resetting the form)
  • Previously, the event target of the wpcf7* events was the parent div element of the form element. In 5.4, it has changed to the form element itself. However, since the wpcf7* events bubble up toward the document root, this change does not affect actual uses of those DOM events, so you can continue targeting the parent div element.
  • reCAPTCHA retrieves a new token before the submission of a form. This should fix the token expiration issue.

Improved process for uploaded files

In previous versions of 5.4, most of the process for uploaded files was implemented in the file module (modules/file.php). This approach becomes troublesome when you attempt to develop a custom file-uploading module as you have to redundantly implement the entire process in your module. 5.4 moves this process into a separate file independent from modules (includes/file.php), and introduces a new approach that allows you to be able to process uploaded files in a more secure way.

  • add_uploaded_file() and remove_uploaded_files() of the WPCF7_Submission class become private methods, meaning you cannot call them from your custom module functions. Instead of calling these methods, make your custom form-tag support the file-uploading feature, just as the built-in file module does.
  • Uploaded files are processed after anti-spam verification. The process consumes a relative amount of time and resources. You can and should abort it when you know the submission is a spam.
  • Input constraints validation (required field, file type & file size check, etc.) is done in a newly introduced function, wpcf7_unship_uploaded_file(). This function returns a WP_Error object when the input is invalid, or an array of file paths when it is valid.
  • Output of wpcf7_unship_uploaded_file() is passed to a validation filter function through its third parameter. When the output is WP_Error, the function should call invalidate() to send the error to the form.
  • wpcf7_unship_uploaded_file() is designed to be able to handle multiple files simultaneously uploaded through a single field.
  • There is a change in the output from WPCF7_Submission::uploaded_files(). Previously it was an array of file paths but, in 5.4, the output is an array of arrays of the file paths.
  • The third parameter passed to the wpcf7_upload_file_name filter functions has now changed. Previously, it was a WPCF7_FormTag object. In 5.4, it is the $args array passed to wpcf7_unship_uploaded_file(). You can still access the WPCF7_FormTag object through $args['tag'].

New spinner icon with modern CSS

5.4 revamps the spinner (a.k.a. Ajax-loader) icon from the ground up. Previously, an animation GIF was used for the icon. However, the new icon has been implemented by leveraging several CSS tricks that are available on all modern browsers.

  • assets/ajax-loader.gif has been removed.
  • Contact Form 7, in previous versions, set the is-active class on the span element of spinner icons to control the icon’s visibility. In 5.4, the use of is-active class is removed. Instead, the submitting class of the form element is used for this purpose.