Welcome to Grapethinking

Grape Thinking is a lifestyle that enhances enjoyment and pleasure while connecting people to their environment.

We offer millennial marketing and technology development services to everyone from the grape grower to the eco-capitalist.

Featured Client

Tastevine.com
Check out Tastevine.com for great wine recommendations.

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

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

    Related posts

    Comments

    1. Daniel Jones Said,

      Hi,

      Do we have to do anything to line 63?

      Thanks

      Dan

    2. Jake Said,

      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

    3. Daniel Jones Said,

      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.

    4. Daniel Jones Said,

      I tried replacing line 92 and putting the code after…

    5. Daniel Jones Said,

      Which browser did you test this in?

    6. Jake Said,

      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

    7. Jake Said,

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

    8. Claude Gelinas Said,

      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.

    9. Daniel Jones Said,

      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.

    10. Daniel Jones Said,

      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…

    11. Jake Said,

      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

      1. Figure out why the ajax isn’t working and fix it. (I know.. tall order)
      2. Add –
        header('location: http://blalba/thankyou');
        exit();

        at line 929 and see if that solves the prob

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

    12. Jake Said,

      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.

    13. Daniel Jones Said,

      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

    14. Claude Gélinas Said,

      Many thanks for your answer, Jake!

      I guess I could piece up a few lines of code here and there to create some kind of conditional treatment for different “thank you” pages — if I do, I’ll post back a link here.

      Since I’m not yet an expert in PHP, I’d feel more comfortable is a real pro took a look at Contact Form 7 to include this feature in such a way that it would be rock solid.

      It seems to be a worthwhile feature but I understand that pros have other things to look after ; )

      Nevertheless, I greatly appreciate your drive to see this done.

    15. Conversies bijhouden voor AdWords met Contact Form 7 | echthelder Said,

      [...] van de Contact Form 7 plugin komt. Tot die tijd kan deze oplossing uitkomst bieden. Met dank aan Grapethinking Deel het met [...]

    16. Danyel Little Said,

      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.

    17. jake Said,

      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…

    18. Danyel Little Said,

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

    19. Danyel Little Said,

      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.

    20. Danyel Little Said,

      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?

    21. Brandon Costa Said,

      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?

    22. jake Said,

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

    23. Darrin Said,

      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.

    24. Chris Said,

      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.

    25. Chris Said,

      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

    26. Davide Said,

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

    27. Acos Said,

      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?

    28. Acos Said,

      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.

    29. Frankos Said,

      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.

    30. Venkat Said,

      Hi Jake,

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

    31. Daniel Jones Said,

      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

    32. Daniel Jones Said,

      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?

    33. Jake Said,

      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.

    34. jennyb Said,

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

    35. Steve Said,

      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?

    36. Jake Said,

      @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).

    37. Alisa Said,

      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.

    38. Chris Said,

      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!

    39. Michael Said,

      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

    40. Jen Rotar Said,

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

    41. Andrew Said,

      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

    42. James - New York Themes Said,

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

    43. רופא שיניים Said,

      nice solution by Andrew!

    44. Conversies bijhouden voor AdWords met Contact Form 7 | SEO Consultant Said,

      [...] Op de bedankpagina, die je als nieuwe pagina kan aanmaken, kan dan een eigen boodschap worden geplaatst net als de conversion tracking code. Nadeel is dat deze oplossing dezelfde landings/bedankpagina geeft voor elk aangemaakt formulier. Het is te verwachten dat deze functionaliteit in een toekomstige update van de Contact Form 7 plugin komt. Tot die tijd kan deze oplossing uitkomst bieden. Met dank aan Grapethinking [...]

    45. Alex88 Said,

      Rather, he endorses efficient policies to save their souls. ,

    46. Doug C. Said,

      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.

    47. Doug C. Said,

      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.

    48. Contact Form 7 – Thank You Page | SEO & Social Media | Web Toastie Said,

      [...] don’t take any credit for finding this solution, as I eventually find out in the comments section of an article on the GrapeThinking [...]

    49. Alexandre Said,

      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.

    50. Adam Wood Said,

      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.

    51. Jordan McClements Said,

      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! :-)

    52. Ahem Said,

      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/

    53. George Said,

      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/

    54. marcia Said,

      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

    55. overit Said,

      This plugin has given me nothing but headaches.

      screw it.

    56. Neil Matthews Said,

      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’);
      }

    57. wieyoga Said,

      thanks for your tip bro

    Add A Comment

    Contact Us |  RSS