Contact Form 7 : How to enable shortcodes in Form and Mail Template

In a previous post, we learned how to enable WordPress shortcode in excerpts and custom fields. We also mentioned how to enable them in 3rd party plugins and in this article, we will go into more detail about this and show how to enable shortcodes in the Contact Form 7 plugin. We might want to add the custom shortcodes in the Mail Template, such as mail body, or use them in the Form Template to style the contact form to our liking.

Enable shortcodes inside the Form Template

When we create a new Contact, we customize our form In the Form Template section of Contact Form 7.

We could use here our own custom shortcodes or third-party plugins like WordPress Shortcodes Plugin to customize the styling of the Form Template.

So, how do we enable the shortcodes in the Form Template? We can achieve these in two different ways.

Solution 1 - using wpcf7_form_elements filter

With the wpcf7_form_elements filter, we can modify the HTML output of the form. Since the output will contain shortcodes that were added in the Form Template, all we need to do is bind do_shortcode function as a callback to this filter inside functions.php, like so:

add_filter( 'wpcf7_form_elements', 'do_shortcode' );

Solution 2 - using Contact Form 7 Extension Plugin

If you are uncomfortable with editing functions.php file, there is a plugin available Contact Form 7 Shortcode Enabler that does exactly the same thing.

Enable shortcodes inside the Mail Template

We customize the mail that will be submitted with the Mail Template section of Contact Form 7.

Here, we use the form-tags we added in the Form Template. In addition, the Contact Form 7 also gives us a list of special mail tags that we can use. The [_time] for example will display the time of the submission.

Custom shortcodes, on the other hand, don't work in Mail Template. To make them work, we need to use another filter, which is shown next.

Solution - using wpcf7_special_mail_tags filter

The wpcf7_special_mail_tags filter is used to customize the output of form-tags and special tags of Contact Form 7. Luckily, this filter also detects the custom shortcodes that are found in the Mail Template as well, so we can use this filter to process those shortcodes too.

We need to add the following code inside the functions.php file:

function my_special_mail_tag( $output, $name, $html ) {
	if ( 'myshortcode' == $name )
		$output = do_shortcode( "[$name]" );

	return $output;
}
add_filter( 'wpcf7_special_mail_tags', 'my_special_mail_tag', 10, 3 );

Line by line code explanation:

• Line 1:

  The wpcf7_special_mail_tags filter has three parameters:

  • $output
    With the special mail tag, the $output will contain the output of that tag. For example, [_time] would have the time of the submission. With the custom shortcode, the $output will be empty.
  • $name
    The $name contains the name of the tag. With the custom shortcode, it will have the name of the shortcode.
  • $html
    The $html has a value of 0 or 1, depending on the "Use HTML content type" checkbox inside the Mail Template.

• Line 2-3:

  Here, we check if the name tag contains our custom shortcode (without the [] brackets). In our case, name of the shortcode is myshortcode. Simply replace it with the name of your shortcode. If our shortcode name is found, we call do_shortcode function and store the result in $output variable.

• Line 5:

  Finally, we return the $output variable.

Conclusion

Sometimes, we will want to make WordPress shortcodes work inside contacts of the Contact Form 7 plugin, either in Form Template or in Mail Template such as email body. Luckily, the CF7 plugin supports filters, which we can use to enable shortcodes. All we need is to add a few lines of code inside functions.php theme file and in the case of a Form Template, we can even skip modifying the template and just use a plugin.