How to Save the Referring Page in a Form

It’s often very helpful to know where someone has come from when they fill out a form on your website. In this tutorial, you’ll learn how to embed and populate a hidden field with the referring URL for any form you choose.

Video

 

Instructions

  1. Create an HIDDEN FIELD – with a one word name (makes it easier – you’ll see why in a minute – I called mine ‘ref’ just to be easy.
  2. Create an HTML FIELD. Doesn’t matter what you call it.
  3. Inside the PROPERTIES tab, paste the following:
    <script>
    var formName = 'contactrod'; 
    if (typeof MauticFormCallback == 'undefined')
      {var MauticFormCallback = {};}
      MauticFormCallback[formName] = {onValidateStart: function ()
      {document.getElementById('mauticform_input_contactrod_ref').value = document.referrer; },
    };
    </script>
    
  4. CHANGE “contactrod” to the machine name of your form. To find this, you’ll need to save the form and click on the MANUAL COPY button in the green section (top right) and scroll down to find the line that’s the same in the image – it will be something like formid=9" id="mauticform_contactrod"… the part after id=mautciform_ is what you need. So in this example, use contactrod (it’s also the value of the data-mautic-form attribute).
  5. In the script on the last line – change “contactrod_ref” to the name of the form and the name of the field FORMNAME_FIELDNAME
  6. In the attributes tab – add the css
  7. In the form actions, add the hidden field to the email body
  8. Fill out your form and you’ll see the referrer URL in your email! (See the video for more).