How do I create a shortcode that outputs the value of an Advanced Custom Fields plugin field.

UPDATED 14-02-2019

We love using the WordPress plugin Contact Form 7 for the websites we build for our clients. It is extremely easy to use but very powerful and has reasonable documentation. A big plus for us is that it is a much loved plugin in the WordPress community and so answers and solutions can be found for almost all issues on sites like Stack Overflow and WordPress support.

At Storyteller Design we help out clients drive traffic to their sites through SEO and Google AdWords as well as the other search engine marketing like Bing Ads. One of the most important metrics for us is the conversion of these visitors to our client’s sites. A conversion is whenever someone completes a contact form, downloads a pdf or information sheet or calls the client.

We use Contact Form 7 for most of our contact forms and download forms. Once the form has been completed and the submit/download button clicked we want to redirect the visitor to a page where we can log that conversion in Google Analytics and pass that information back to our Google AdWords campaign.

Contact Form 7 used to suggest using an easy copy and paste technique to redirect to your thank you page. However this method has been depreciated by Contact Form 7 and will no longer work after the end of 2017. This leaves two options.

 

1. If you are not familiar with coding you can use a plugin called Contact Form 7 Redirection. They have both a free option available through WordPress but their Pro version adds some fantastic functionality that we often use for our clients.

This plugin uses the “wpcf7_mail_sent” action hook to redirect to the thank you page, and this hook shouldn’t be depreciated soon. This plugin has been tested to WordPress version 5.0.3 so it will continue to work well for you. It requires Contact Form 7 version 4.8 or later.

We suggest you try this plugin first and if it doesn’t work then move onto the second option.

2. Use some php in your child-themes functions.php file.

The method now recommended in the Contact Form 7 documentation is to use javascript to redirect when the wpcf7mailsent event occurs. The code to use is:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>

If you only use one contact page, or only use on thank you page then all you need to do copy and paste the code below into your child theme’s function.php file.

//This function prints the JavaScript to the footer
function cf7_footer_script(){ ?>
 
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>
 
<?php } 
 
add_action('wp_footer', 'cf7_footer_script'); 

Again remember to replace the http://example.com/thank-you with your thank you page.

However we often use multiple contact form 7 forms on a website with multiple thank you pages. This is because we want to know exactly which pages, forms and calls to actions are converting our website visitors into leads so we send more traffic there, and optimise our conversion funnels.

In order to redirect different contact form 7 forms to different thank you pages you need to use the code below:

<?php
//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

Here is an example of the code for two different pages.

<?php

//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>

<?php } else if ( is_page('download')) /* if page name is download */ {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

We hope this helps. It is important to note that this code will redirect all contact forms one a page to the same thank you page.

Please let us know if you have any questions in the comments below.