Customize The WordPress Contact Form 7 Plugin
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 !!!
For .kml files go to: http://www.fileextensionkml.net.
For .3g2 files go to: http://www.fileextension3g2.net.
For .itl files go to: http://www.fileextensionitl.org.
For .bup files go to: http://www.ifileextensionbup.com.
For .svg files go to: http://www.fileextensionsvg.net.
For .part files go to: http://www.fileextensionpart.net.
For .pdf files go to: http://www.ifileextensionpdf.com.
For .jnlp files go to: http://www.fileextensionjnlp.net.
For .ithmb files go to: http://www.fileextensionithmb.com.
Related posts
Posted in Technology | View Comments
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!
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/
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-form-7-thank-you-page-after-submit/
Hi. I have installed the Contact Form 72.07 what do I do next? I am so new to wordpress and things like this. Would appreciate step by step instructions. I do have a lot of fields to put on the form. Thanks so much for any help
This plugin has given me nothing but headaches.
screw it.
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’);
}
thanks for your tip bro
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.
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.
I am using Ver 2.1.1 and the redirect does not work for me either.
Hey,
I am back… And the redirect does not work anymore in new versions. Any Ideas?
Thanks,
Dan
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.
Happy that I discovered your site, fantastic information. I will bookmark and try to visit more frequently.
Thnx for your tip bro
Thank you! Worked like a charm!
It does'nt work. What version cf7 you are using?
thanks
Thanks, It worked for me also! Thumbs Up!
You can also use a javascript redirect to your thank you page.
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!
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!
Thanks for pointing me in the right direction Jake.
And this is what I've done for different “thank you” pages for different forms.
1. I added a “hidden” field in with the name “thank-you” for each form
ex:
[textarea your-message]
<input name=”thank-you” type=”hidden” value=”http://www.your-domain.com/thank-you-for-contacting-us/” />
[submit "Send"]
2. In scripts.js, I grab that value
if (1 == data.mailSent) {
jQuery(data.into).find('form').resetForm().clearForm();
var url = jQuery(data.into).find('input[name="thank-you"]').val();
if (url) {
location.href= url;
}
wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ok');
This should redirect the success page!
Additionally, in the messages section of the form, for “# Sender's message was sent successfully”, I put in “Please Wait…” because the redirect to the thank you page may take a second or two
Thnx for your tip bro
if the page redirect to 404 error use the below mathod
i sorted this by adding the below function in footer.php file
wp_footer();
Note wp_footer(); function should be in php tag like:
< ?php wp_footer();?>