As you know, Contact Form 7 redirects to the same URL as the form’s URL after form submissions in the default settings. However, in very rare cases, you might need to change this to make it redirect to another URL after submissions. I’ll write in this post how you can set up Contact Form 7 to do just that.

By the way, I’m often asked by users that how they can redirect to so-called “Thank You Page”. In most cases, they want to know it because they assume that redirecting to “Thank You Page” is necessary for tracking form submissions with Google Analytics. That’s not necessary at all. In fact, it’s an outdated and nonsense custom. Today you can track submissions with Google Analytics without any redirection.

So you have other reason for redirecting to another URL? Okay. I’ll show you the procedure.

The simplest way is using on_sent_ok JavaScript action hook. By using this hook, you can specify a JavaScript code that you wish to run after the form is successfully submitted. You will find the Additional Settings field at the bottom of the contact form management page. Simply insert the following line into it:

on_sent_ok: "location = 'http://example.com/';"

Obviously, you need to replace the http://example.com/ to the URL you want to redirect to.

That’s it. So simple, isn’t it? Try it and check if it works.

If it doesn’t work, check if Ajax is correctly working on your site. It is a JavaScript hook, so it needs JavaScript to work. You’ll need another hack if you need to redirect on non-JavaScript environments.

The typical place to define constants is in the wp-config.php file. You will find that many lines defining constants such as, define('XXX', 'xxx'); exist in the file. You can append new lines after them. Note that your lines must be placed before the last line.

Example (wp-config.php):

define ('WPLANG', '');

define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

/* That's all, stop editing! Happy blogging. */

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

The rest of this post describes a variety of constants.

See also:

• Loading JavaScript and Stylesheet Only When it is Necessary
• Restricting Access to the Administration Panel
• Selectable Recipient with Pipes
• CAPTCHA
• File Uploading and Attachment

Note that the [_post_*] tag has value only when you put the contact form into content of a post or a page. They are not available if the contact form is put inside a sidebar widget.

The form of those special mail tags has been changed in Contact Form 7 2.2. Old form ([wpcf7.*]) are still supported and able to work.

Using Contact Form 7 in your language

You can translate the administration panel of Contact Form 7 into your language by setting the WPLANG constant. You will find a line defining the WPLANG constant in the wp-config.php file and you can edit this line to change the language. For example, to change it to Japanese (‘ja‘ is its locale code), define it as shown below:

define ('WPLANG', 'ja');

After this is accomplished, your administration panel will show Japanese descriptions. But please note that this doesn’t mean the existing contact forms function in Japanese.

Creating contact form in different languages

With bundled translations, you can create contact forms in different languages very easily. To obtain a translated contact form, simply click the Add new link, and select the language from drop-down menu.

For example, if you are managing a multilingual blog with English and Japanese contact pages, you should create two contact forms — an English contact form for the English contact page and a Japanese contact form for the Japanese contact page.

If you have new translation

If you have created your own language pack, or have an update of an existing one, you can send gettext PO and MO files to me so that I can bundle them into Contact Form 7. You can download the latest POT file from here.

[select your-recipient "ceo@example.com"
                    "sales@example.com"
                    "support@example.com"]

into the form template); second, enter a corresponding mail tag [your-recipient] into the To: field in the Mail section. This ensures that the email is sent to the specific address that the sender selected.

However, there has been a problem with this. By using this procedure, the email addresses are revealed over the Internet and this is not good. These addresses could then become targets of evil spammers very quickly.

So, what you need is a way to allow senders to select from closed data safely. The pipe (‘|’) support is just for this very purpose.

Change the form tag of drop-down menu to:

[select your-recipient "CEO|ceo@example.com"
                    "Sales|sales@example.com"
                    "Support|support@example.com"]

If you insert a pipe (‘|’) character in the middle of the option value, only the part before the pipe will be open to the outside, and the part after the pipe will be used for mail replacement.

You can use this usage of pipe only in the drop-down menu values, radio buttons or checkboxes. If you don’t like this feature, you may define the constant WPCF7_USE_PIPE as false to disable it.

The response message is shown at the bottom of the form by default. You can change the location by putting a response message placeholder [response] inside the form. You can insert this [response] tag into any place of your choice. You can use it multiple times in a form. The response message will be shown within the placeholder after submission.

Demo

Note: This is a demo. This form doesn’t send a mail practically.

View source of above form:

[response]

Your Name (required)
[text* your-name]

Subject
[text your-subject]

Your Message
[textarea your-message]

[response]

[submit "Send"]

_trackPageview()

If you’ve set everything up correctly, Contact Form 7’s contact form behaves as an Ajax application and its form submission is an Ajax event. Google Analytics’ _trackPageview() JavaScript function is able to track an Ajax event without a real page view or redirection.

For example, let’s say that the name of your page tracker object is pageTracker, and you want to track the form submission as a virtual page view of the virtual URL /mysite/thank-you.html. In order to do this, you will need to run the following JavaScript code when the submission event occurs:

pageTracker._trackPageview('/mysite/thank-you.html');

Note that the /mysite/thank-you.html is not necessary for it to be a real URL. It can be any value, which will then be displayed as a page filename in your Analytics reports.

Using on_sent_ok action hook

You don’t need to edit any JavaScript files for running the above _trackPageview() function. Contact Form 7 provides a JavaScript action hook named on_sent_ok, and by utilizing this action, you can specify a JavaScript code that you wish to run after the form is successfully submitted.

It is quite a straightforward process for you to specify the aforementioned _trackPageview() with the on_sent_ok hook. You will find the Additional Settings field at the bottom of the contact form management page; now simply insert the following line into it:

on_sent_ok: "pageTracker._trackPageview('/mysite/thank-you.html');"

Note that you need to quote the codes properly and the code must be in one line.

Now, if you have set everything up correctly, when someone makes a submission via your contact form, Google Analytics will track it as an access to /mysite/thank-you.html.

To verify that this is working correctly, you can check your Top Content report 24-48 hours after a submission. At that point, you should be able to see the assigned page name (/mysite/thank-you.html) in your report.

External resources

• Facebook conversion tracking with Contact Form 7 — Explains how to track facebook ads on your WordPress site using Contact Form 7.

How was it? Did it work like the contact form on your site? Some of you might be surprised to note the differences between your form and this demo form, and think, “My form doesn’t show such nice pop-up error messages.” “My form always reloads the page after submitting, but this form doesn’t.”

If your form doesn’t work like this demo form does, it is probable that Contact Form 7’s JavaScript is not functioning on your site. I’ll show you a few possible causes for this.

• JavaScript file is not loaded

  This is the cause that I’ve been seeing the most recently. This is due to your template, which is missing calling functions for queuing JavaScript. The functions required are wp_head() and wp_footer(), and they are in header.php and footer.php, respectively, in most correct themes.

• Conflicts with other JavaScript

  Many plugins and themes load their own JavaScript. Some of them may have been created incorrectly and therefore conflict with other plugins. In most cases, you can find JavaScript errors with Firebug, an add-on for Firefox, when such conflicts occur.

• HTML structure is not valid

  Like other JavaScript, Contact Form 7’s JavaScript traverses and manipulates the structure of HTML. Therefore, if the original HTML structure is not valid, it will fail to work. You can check whether your HTML is valid or not with an HTML validator. I recommend XHTML-CSS Validator for use in such a case.

Step 1: Stop loading the JavaScript and CSS stylesheet on all pages

When the value of WPCF7_LOAD_JS is set to false (default: true), Contact Form 7 does not load the JavaScript. You can set the value of this constant in your wp-config.php like this:

define ('WPCF7_LOAD_JS', false);

Likewise, you can control the loading of the CSS stylesheet with WPCF7_LOAD_CSS. Contact Form 7 does not load the CSS stylesheet when the value of WPCF7_LOAD_CSS is false (default: true). You can set it in the wp-config.php like this:

define('WPCF7_LOAD_CSS', false);

Now you have succeeded in stopping the loading of the JavaScript and CSS stylesheet, but, unfortunately, you’ve also killed them on pages that contain contact forms — so we really need to get them back on the right pages. So, the next step is what you’ll need to load the files on to the explicit pages in which you need them.

Step 2: Load the files on pages which contain contact forms

For example, let’s say you have a page named “Contact” and it is the only page that contains a contact form. And suppose that you have a template file for the “Contact” page named ‘contact.php’ in your theme folder. Now you will need to load Contact Form 7’s JavaScript and CSS stylesheet specifically on the “Contact” page.

To do this, you must edit the ‘contact.php’ template file and insert the following lines into it:

<?php
	if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
		wpcf7_enqueue_scripts();
		wpcf7_enqueue_styles();
	}
?>

Note that wpcf7_enqueue_scripts() and wpcf7_enqueue_styles() must be called before wp_head() is called.