Hope someone can help me : )

What Im trying to do is, get the first visit referrer and send it to form. We user Contact form 7 plugin, so I created a hidden input, get the referrer URL and assign that value of referrer to that hidden input field.

Everything was working fine, till I enabled the caching.

This is the function I use (in case anyone will need it)

function getRefererPage( $form_tag ){

    if ( $form_tag['name'] == 'referer-page' ) {
        $form_tag['values'][] = $_COOKIE['external_referrer_cookie'];
    return $form_tag;
add_filter( 'wpcf7_form_tag', 'getRefererPage' );

Where "referer-page" is the name and ID of the hidden field in Contact Form 7 form.

Once I enabled cache, I had to think of a Javascript of jQuery solution to set the cookie.

I added jQuery Cookie Plugin (https://github.com/carhartl/jquery-cookie) and added then tried multiple different variations of the code below to create a cookie and set the cookie value.

My Goal is: When website visitor comes to first time, set the cookie value to the referrer url, but then keep the value, for example if visitor comes to website from google.com and then moves around the pages on website, once he fills the form, the value in the hidden field still should be the google url with its parameters.

This is the JS code I have in the footer.php of theme now.

jQuery(document).ready(function($){  // BEGIN CUSTOM JQUERY NO CONFLICT
    // $.cookie('mysite_referrer', document.referrer);
    // var initreferrer = document.referrer;
    // $.cookie('mysite_referrer', initreferrer);
    //console.log('current cookie ref:'+$.cookie('external_referrer_cookie'));
    if ($.cookie('external_referrer_cookie') == 'undefined' ) { 
        // console.log('setting cookie for'+ document.referrer); 
        $.cookie('external_referrer_cookie', document.referrer);
        console.log('current cookie ref:'+$.cookie('wsg_external_referrer_cookie'));
    // $('#referer-page').val($.cookie('external_referrer_cookie'));
    console.log('current cookie out of function ref:'+$.cookie('external_referrer_cookie'));

    var cookieName = 'cookietest';
    $(function() {

    function checkCookie() {
        if (document.cookie.length > 0 && document.cookie.indexOf(cookieName + '=') != -1) {
                // do nothing, cookie already sent
        } else {
                // handle jQuery animation

                // set the cookie to show user has already visited
                document.cookie = cookieName + "=1";


As you can see in commented out lines, I tried lots of approaches I found in several website tutorials. Ive been struggling on this for couple days now, please help : ))

Thank You

  • It look like you use older version jQuery Cookie Plugin, as the page note This project was moved to github.com/js-cookie/js-cookie so maybe you need to update your code again.
    – Jevuska
    Commented Mar 24, 2016 at 19:55

1 Answer 1


I don't have the answer build on cookie, but I think this isn't sensitive data, you can try localStorage.

    var initreferrer = document.referrer;
    if(initreferrer.indexOf('yourdomain.com') === -1 ) { // Check if the referer is your site or not. If not( return -1 ) set the localStorage.
        localStorage.setItem("mysite_referrer", initreferrer);

Then you can use a javascript function (instead of a filter like you did) to fill your hidden field with the referer saved in browser localStorage. We can get it by localStorage.getItem("mystite_referer").

  • Hi @Tung Du thanks for response. Can you please tell me how would I be able to fill the value of hidden field with javascript? I tried $('.referrer-page').val(localStorage.getItem("mystite_referer")); but it didnt work. Also, console.log(localStorage.getItem("mystite_referer")); << gives value NULL in console.
    – Domeniko
    Commented Mar 24, 2016 at 19:06
  • NULL mean that the localStorage hasn't been set yet. So you can't fill the hidden field. You must change to your domain in the condition to protect the first referer. Here I skiped the referer from your website. Just outside of your website. You can first comment out the if condition to make sure everything work. You can also do the console.log(initreferrer) to check the document.referer for easier debugging.
    – Tung Du
    Commented Mar 24, 2016 at 19:13
  • I was able to get the value in console log, there were some typos in the code like ID name etc, that I didnt notice initially. Anyways, situation I have now is following. When I go to my website from google, nothing in console, If I navigate to any other pages, no matter how many pages i change around, in console it shows google.com as referrer url, so thats great! But, console.log is blank on first page load, and another problem is that Im not able to fill the hidden field value with js, this is the code I have: codeshare.io/tiirU
    – Domeniko
    Commented Mar 24, 2016 at 19:24
  • could you please send me the document.referer at first pageload?
    – Tung Du
    Commented Mar 24, 2016 at 19:32
  • I think I got it working, at least on first 5 tests on cached pages, it seems to be working fine. This is the code I have: jQuery(document).ready(function($){ var initreferrer = document.referrer; if(initreferrer.indexOf('mydomain.com') === -1 ) { localStorage.setItem('mysite_referrer', initreferrer); } document.getElementById("page-referrer").innerHTML=localStorage.getItem('mysite_referrer'); document.getElementById("page-referrer").value = localStorage.getItem('mysite_referrer'); });
    – Domeniko
    Commented Mar 24, 2016 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.