Customize The WordPress Contact Form 7 Plugin

I ran into an interesting problem the other day.    I’m a big fan of the 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 .p7m files go to: http://www.fileextensionp7m.com.
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.

Tags: , , , , , , , , ,

Posted in Technology | 138 Comments »

  • 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-form-7-thank-you-page-after-submit/

  • http://underconstruction marcia

    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

  • overit

    This plugin has given me nothing but headaches.

    screw it.

  • overit

    This plugin has given me nothing but headaches.

    screw it.

  • http://wpdude.com 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’);
    }

  • http://wpdude.com 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’);
    }

  • http://www.getbalivillas.com wieyoga

    thanks for your tip bro

  • http://www.getbalivillas.com wieyoga

    thanks for your tip bro

  • http://www.ibcscorp.com 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.

  • http://www.ibcscorp.com 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.

  • 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.

  • 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.

  • Kelly

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

  • Kelly

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

  • Daniel Jones

    Hey,

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

    Thanks,

    Dan

  • Daniel Jones

    Hey,

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

    Thanks,

    Dan

  • http://radish.me 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.

  • http://radish.me 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.

  • http://www.bustersanimation.com 211.138.124.211:80

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

  • http://www.bustersanimation.com 211.138.124.211:80

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

  • http://www.turkrapci.com rap dinle

    Thnx for your tip bro

  • http://www.turkrapci.com rap dinle

    Thnx for your tip bro

  • http://www.acupunctureclinichouston.com Weili Wang

    Thank you! Worked like a charm!

  • http://www.acupunctureclinichouston.com Weili Wang

    Thank you! Worked like a charm!

  • Paul

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

  • http://twitter.com/adooylabs Audee Velasco

    Thanks, It worked for me also! Thumbs Up!

  • http://twitter.com/makemoneydotpro Make Money Pro

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

  • 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!

  • http://woodfilecabinet.org 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!

  • karlikdesign

    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 🙂

  • Rap

    Thnx for your tip bro

  • Mazgar_matto

    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();?>

  • Anonymous

    Fantastic karlikdesign.. I’m doing this right now..

  • Uira tiago

    hello dear
    how i put to redirect to different pages according to the choice of a radiobutton?
    please tell me uiratiago@gmail.com

  • Bob

    THANK YOU! I found a lot of “solutions” that were wrong, but you nailed it!

  • Fahadusman41

    it does’nt work… why is it?

  • Especialist

    Check out the comments and see if you can find your answer there. Cheers

  • Brandy Q

    The newest update has this in “script.js” and on line 91.  Thank you so much for your fix!  It made my life waaayyy easier.

Categories

Archives