Custom Landing Page for Contact Form 7

Customize The WordPress Contact Form 7 Plugin

Posted on March 13th, 2009 by Jake

I ran into an interesting problem the other day. I’m a big fan of the WordPress Plugin Contact Form 7. I’ve used it on many of the wordpress sites I’ve developed, and appreciate the plugin for its simple integration, nice admin interface, and the pretty ajax functionality.

Unfortunately, I recently discovered that the plugin does not allow you to specify custom landing page urls, or Thank You pages for the contact form. Some of you may wonder why I care about reloading the page to say thank you vs. the sleak Ajax popup confirming that your message has been delivered. The answer: Because I’m trying to measure performance of the contact form within my Google Adwords CPC account.

You can use javascript to fire the tracking code to create a virtual page view in analytics, but you cannot properly implement the conversion tracking from Adwords without loading a separate page. As you can imagine, I was slightly frustrated until I discovered a very quick and simple solution.

Important.. This solution only works if you have/want a designated landing page for all forms you are using with Contact Form 7.

Step 1: Browse to wp-content/plugins/contact-form-7

Step 2: Open the contact-form-7.js file in your favorite text editor.

Step 3: Look for the function: wpcf7ProcessJson (line 63)

Step 4: Look for the if statement: if (1 == data.mailSent) (line 90)

Step 5: Insert this line after the jquery (line 92) – location.href=”http://www.yourdomain.com/yourthankyoupage”;

Step 6: Save the file to your server, and test out the form.
Ideally, the author of this plugin will make a change in the next release that allows a custom variable (url) to be stored for each contact form. But until then.. here’s your fix !!!

Tags: contact form, customize, development, edit, modify, plugin, programming, template, theme, wordpress

Posted in Technology | View Comments

Dee Wilcox

Thanks for all of the responses posted here! This site seems to have the best support for this particular problem. I can see that it's been a while since anyone posted, but I'm running into an issue and thought I'd try here first.

I'm running the latest version of CF7, and the redirect isn't working for me. I have two forms and only need a redirect for one, so this is the code I've pasted under Additional Settings:

on_sent_ok: "location.replace('http://yourdomain.com/thank-you/');"

When I test the form and submit it, it sends (I receive the submitted form via email), but on the user side, the button doesn't appear to do anything. A spinning symbol comes up to show that it's working, but that's it - no re-direct.

I also tried this variation:

on_sent_ok: "window.location=''http://yourdomain.com/thank-you";

Any ideas on what I'm missing? I appreciate any ideas you might have!
Matt

This is awesome...SO close to what I'm looking for.

I want to be able to call a script but ONLY if a certain value is checked in a checkbox on the form.

I want to be able to give people the choice of submitting their email to AWeber (mailing list opt in) as a checkbox option on the form. So, CF7 would send me the message, and if they have the box checked, also add their email to my mailing list.

Any ideas?

Thanks!
Make Money Pro

You can also use a javascript redirect to your thank you page.
Audee Velasco

Thanks, It worked for me also! Thumbs Up!
Paul

It does'nt work. What version cf7 you are using?
thanks
Weili Wang

Thank you! Worked like a charm!
rap dinle

Thnx for your tip bro
211.138.124.211:80

Happy that I discovered your site, fantastic information. I will bookmark and try to visit more frequently.
Tony

It does work in the new versions... if you're newly copying and pasting it, be 100% certain you get rid of the fancy quotes. Replace them with normal ones.

It doesn't work otherwise, but it does work if you fix that.
Daniel Jones

Hey,

I am back... And the redirect does not work anymore in new versions. Any Ideas?

Thanks,

Dan
Kelly

I am using Ver 2.1.1 and the redirect does not work for me either.
Jho

I'm using Version 2.1.1 of contact form 7, but the redirect not work.

What I can do?

Please help...

Any help would be very appreciated.
Gayan Menikpura

In the older versions of the plugin, you had to edit some of the source code to include a redirect rule, but it is much simpler with the latest version. The following steps show you how.
1. Log in to your WordPress dashboard, and go to the settings page for the Contact Form 7 plugin.
2. Scroll to the bottom of the page and ’show’ the Additional Settings
3. Insert the following code:
on_sent_ok: "location.replace('http://www.website.co.uk/thank-you/');"
Obviously replacing ‘www.website.co.uk/thank-you/’ with the URL to your website thank you page.
Once you save the settings, that is all you should have to do. When a user next sends an enquiry, they will be redirected to your customised thank you page.
wieyoga

thanks for your tip bro
Neil Matthews

I have used this tutorial every time contact form 7 is updated, I can never remember the fix, thanks a miliion for it.

The new version 2.1 uses a differernt js files called scripts.js, do a search for (1 == data.mailSent) and add the redirect command as shown below

if (1 == data.mailSent) {
jQuery(data.into).find('form').resetForm().clearForm();
wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ok');

if (data.onSentOk)
jQuery.each(data.onSentOk, function(i, n) { eval(n) });
location.href="http://YOUR REDIRECT URL";
} else {
wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ng');
}
overit

This plugin has given me nothing but headaches.

screw it.
George

I have tried everything and nothing have worked until I read this post, is the same "hack" but you put location.href="http://mywebsite/my-thank-you-page/";
immediately after the code (line: 91):

if (1 == data.mailSent) {

Complete post here:
http://wordpresstips.googlethem.com/contact-for...
Ahem

Contact Form 7 is great in theory, but this problem makes it blow hard. To get around it, I decided to use Gravity Forms...Ahhhhhhhhhhhhhhhhhhhhhhh

Stop wasting your time with CF7:
http://www.gravityforms.com/
Jordan McClements

Thanks everyone for all the effort.
But I tried everything (twice) with no luck, and ended up removing Contact Form 7, and reverting to the standard contact form supplied with the iCompany theme from iThemes.
This was a dawdle to modify to include the AdWords conversion code....
(You'd think something fundamental like this would be easy! :-)
Adam Wood

The WP support forums had this slight tweak to Doug C's approach:

on_sent_ok: "window.location='http://www.domain.com/nextpage';"

Insert that into the "Additional Settings" window.
Works great.
Alexandre

It would have been sweet if Doug C's solution worked.

Too bad for me it didn't.

I'm using version 2.0.6.
Doug C.

Sorry, I forgot this part. You must paste it into the box like this ...

on_sent_ok: "location.replace('http://yourdomain.com/thank-you/');"

replace "yourdomain" with you own, of course.
Doug C.

You just make a thank you page, grab the URL of that page, and paste it into the "Additional Settings" box at the bottom of the Contact Form 7 settings screen. This works great for me, no problems.
רופא שיניים

nice solution by Andrew!
James - New York Themes

Everyone, I have a simple solution, that will alleviate all your headaches ...you can thank me later.

STEP 1: Deactivate Contact Form 7 Plugin
STEP 2: Remove & Delete CT 7
STEP 3: Download & Activate the G Forms Management Plugin
STEP 4: Welcome to How Professionals Create Forms

Congratulations !!!
Andrew Bleakley

Found a much easier solution and is much more flexible and easier to implement and manage than any of the above

Open contact-form-7.js

about 10 lines from the bottom find the line

wpcf7ResponseOutput.append(data.message).fadeIn('fast');

replace it with

if (data.message.match(/^http/) == null) {
wpcf7ResponseOutput.append(data.message).fadeIn('fast');
}else{
location.href=data.message;
}

If you would like the user redirected to a thank you page change the successful send message to the full url (including http://) of the page you would like them redirected to
Jen Rotar

Thanks for this quick & easy solution. Just tested it and my redirect page works great!
Michael

I finally got the code to work so that it redirects to a new page when someone requests a quote from my site at this URL:
http://valupump.com/advertise/pricing/

However, the green message pops up right before it redirects to the thank you page.

1. Is there any way to stop the green message from appearing before it redirects?
2. It seems like it takes a long time for the form to submit and load the success page. Any suggestions on speeding it up?

Thanks!

Michael
Chris

You can also setup a custom 'thank you" page for each form using the method listed above, just add these 2 steps:

1: Change the redirect line to:
location.href="http://www.yoursite.com/"+data.message;

2: On each form, change the message that would normally display to the path you want appended to your site.

Works like a charm!
Alisa

Thank you so much. I was having the same problem as some above (namely, it was not redirecting, just popping up the same old "success" message) when I removed this line: wpcf7ResponseOutput.addClass(’wpcf7-mail-sent-ok’); it worked fine.
Jake

@Steve.. each form has the additional settings section so that you can specify a different .js redirect for each one.. (see JennyB's comment for example).
Steve

Is there any way to have two auto-redirects. One form on a page gets filled out and the sender sees a reditrect page. A different form on another page goes to a different Thank You page.
Possible?
jennyb

hi guys,

@jake is right, under additional settings you can redirect however you need :

on_sent_ok: "location.replace('http://www.mysite.com/mypage.html');"

works brilliantly :)

i'm currently testing adding a conditional to redirect to different according to the choice of a radiobutton (to send to paypal).
Jake

Rumor has it that in the new version of contact form, within each form, there is a field for additional settings.

To track page views, you can set multiple instances of on_set_ok to trigger various codes. For example, paste this code (on one line) to trigger a pageview in google analytics.

on_sent_ok: "pageTracker._trackPageview('/contacted-form-1');"

I'm not sure if this works for redirects.
Daniel Jones

I guess my other question would be about the header.php file...

How would we put that code in the header if each header would in theory be the same?
Daniel Jones

Jake or Chris,

Do you still have a copy of the code for multiple thank you pages to be sent from the forms.

I have a site I am working on. I would like to have 3 forms. Each form will forward to a new page. Would chris' idea work?

Thanks,

Dan
Venkat

Hi Jake,

Thank you very much. This is what I'm looking for. You save lots of time on an urgent assignment. ;)
Frankos

Thanks for the tip Jake.. got it working flawlessly.

Acos.. you can put the converstion tracking code anywhere on the thank you page.. You do not want to put it in the general footer, or you will register a conversion for every page view on your entire site.
Acos

OK, I got it working. Now for my next question: Where do I put my Conversion Tracking Code for that one Thank-you page? I don't want it in the general footer.
Acos

Davide, I tried that and things really didn't work. I'm assuming because I don't have a page called thank-you.php. Where does that come from?
Davide

Version: 1.9.5.1
File: wp-contact-form-7.php
Line: 275

Insert this line before 'return true;' in function mail

header("location:http://www.mysite.com/thank-you-page.php");
exit();
Chris

ok the code disappeared :(

here it is in non script format

Within the landing page you are directing to, add the below into the header..

openphp $formorigin = $_SERVER['HTTP_REFERER']; closephp

Then, on your landing page use the below code to display different messages depending on which page they came from.

openphp if($formorigin =="http://domain.com/form1/")
{ closephp
html p thankyou message for form 1 html close-p
openphp }
elseif($formorigin =="http://domain.com/form2/")
{ closephp
html p thankyou message for form 2 html close-p
openphp }
else
{ closephp
html p Content to display if visiting the page from anywhere other than your form page
openphp } closephp

Basically replace the openphp, closephp, html p and html close-p with the relevant markup
Chris

I have the hack working fine, and although can't offer much advise to those who don't have it working.

What I can offer is a solution to those still wanting to keep the messages different depending on what form is completed.

Within the landing page you are directing to, add the below into the header..

Then, on your landing page use the below code to display different messages depending on which page they came from.

thankyou message for form 1

thankyou message for form 2

Content to display if visiting the page from anywhere other than your form page

Obviously you can have as many elseif's as you like depending on how many forms you have, and yoo can change the messages displayed with whatever you like.
Darrin

I am not sure when the last post in here was but has anyone found out anything new? I changed both files as stated in this post and still get the message at the bottom and no redirect to the Thank You landing page. I really hope someone comes up with a solution.
Thanks for the hard work.
jake

@Danyel... did you find a solution... I'm guessing that you have an older version of the plugin, or are looking at the wrong file.

@Brandon... the above fix works if there are not any conflicts with other .js scripts running for other plugins.. try disabling all plugins except contact form and see if that makes a difference.
Brandon Costa

I have done all of the above and still getting the generic "thank you" and not the re-direct to my thank you page... Can you help?
Danyel Little

The work around @ comment 11... When I take a look at that PHP file. The only thing that is at line 929 is "break;" Was there ever a PHP solution?
Danyel Little

Ok... I disable limit post and it caused an error in my entire theme. So... limit post is mandatory for my theme. I'll have to try something else. Thanks for the suggestion.
Danyel Little

Thanks for your fast response! :) I'll try disabling limit posts and test to see what happens...
jake

Hi Danyel.. try disabling limit posts.... I am running all-in-one, so you shouldn't have any problem there...

We were testing the work-around (comment 11).. but he found the issue...
Danyel Little

Hello Jake...
I am having the exact same issue as Daniel Jones. I didn't see his solutions posted. I only saw a thank you post stating that one of his plugins was pulling in another jquery library. Was there a fix for this via PHP? Did he tell you what plugin was causing the issue? And how can you check to see if your plugins are pulling in jquery libraries?

I'm only using the following pugins:
*all-in-on-seo
*contact form 7
*limit posts

That is it, plus I have the latest update to the Contact Form 7 Plugin and I'm running WP 2.7.1

Thanks for any further help you can provide.
Daniel Jones

Jake,

Thanks for all of the help. One of my plugins was pulling in another jquery library. It was causing my contact-form-7 plugin to ignore the .js file entirely. It was then going to the default code in the php file.

Thanks for all of the help. The hack now works.

Dan
Jake

Hi Claude,

We've been thinking about tackling this for a while, as it is really not that difficult, and it would definitely be beneficial, as you would be able to have multiple conversion point tracking, more customization in the thank you pages, etc..etc..

A while back I modified Alex King's Popularity Contest Plugin to add support for a sidebar widget (seen above and to the right).. It seems that the changes I made have now been integrated back into the plugin, duplicated, or whatever.. point being that the feature is now available and supported.

I'll pass the idea around with our development team tomorrow and see if anyone wants to take it on, but most likely this will stay back-burner for the pro's until they get bored, or we get hired to build out the functionality.

If you (or anyone else) has any programming knowledge and a desire to tinker with it, I would say the best place to start would be to create a custom tag for a hidden input field (this functionality already exists) with the value set to the redirect url... this way, you could pass it as a variable to the javascript using the $POST data which would be unique to each form.
Jake

FYI to all.. I am working with Dan via email to address this issue. If you are having similar problems, please make note of whether your page reloads before displaying the "ajax" message (after submitting the form, see if your url now has a string appended that looks like #wpcf7-something)

If it does (as is the case with Dan's form)... then it means that the ajax part of the form is not working, and the plugin is defaulting to the functions specified in wp-contact-form-7.php at line 929.

Here's what I told Dan:

Regarding the problem you are having, I think I've narrowed it down a bit. It appears that for some reason (beyond my knowledge), your site isn't using the ajax functionality for your form. Apparently for that "same" reason, the author of this plugin made a method for handling the form if the ajax didn't work. This can be found at line 929 of wp-contact-form-7.php.

From what I see.. you have 2 options
<ol>
<li>Figure out why the ajax isn't working and fix it. (I know.. tall order)</li>

<li>Add -
header('location: http://blalba/thankyou');<br />exit();
at line 929 and see if that solves the prob</li>
</ol>

I'm sorry I can't do more at the moment to help you. Let me know what happens!
Daniel Jones

Jake,

What other plugins are you running...? I still can not get this hack to work

I have these running:

akismet
all-in-one-seo-pack
contact-form-7
google-analyticator
google-sitemap-generator
tinymce-advanced
wp-super-cache

window.location = "http://mysite.com/thank-you/"; also does not work...
Daniel Jones

Still fires.... I deactivated the other plugins on my site. I have 3 very large forms and 1 simple contact form. Each does the exact same thing. It still sends the green message of mail being ok.
Claude Gelinas

Thanks for this fix but before implementing it, I'd like to know if someone with more advanced PHP credentials could build some kind of conditional code around this.

Along the lines of...

Form 1 = http://.../success-page_1.php
Form 2 = http://.../success-page_2.php
Form 3 = http://.../success-page_3.php

...and so on!

I don't think it's that hard but I'd like for a real pro to do it so there are no loose ends.

Many thanks.
Jake

FYI.. it might be wise to go ahead and remove the wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ok'); since it shouldn't actually fire now.
Jake

Hi Daniel,

I just added this at line 92:
> location.href="http://www.xxx.com/thank-you-contact-form";

right before this, which is now line 93:
> wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ok');

Are you using an updated version of the plugin. I tested in chrome
Daniel Jones

Which browser did you test this in?
Daniel Jones

I tried replacing line 92 and putting the code after...
Daniel Jones

Nope... It did not work. It still takes me through to the ajax message.

I have wp-super cache running, and i reset it prior to trying.

location.href=”http://www.yourdomain.com/yourthankyoupage”;

That's the code i used.
Jake

Hi Dan,

No, I only wrote it out for those using text editors without line numbers - to help them find the right function to edit.

Please let me know that it also works for you!

-Jake
Daniel Jones

Hi,

Do we have to do anything to line 63?

Thanks

Dan

Customize The WordPress Contact Form 7 Plugin

Related posts

Grape Ideas

Recently Written

Recent Comments

Grape Thinkers

Categories

Archives