Capturing Full URL from Referring Web Page to Form Submit

[Brenda_Denting1]

Hello all. I am having a similar issue that others have had regarding capturing referral URL on form submit. We've read a bunch of other threads about this topic and we can't figure out exactly how to apply those instructions to our special circumstance. 

We have a custom Wordpress site and we are moving from ContactForm7 to Marketo Forms. Current ContactForm7 captures full referrer URL and includes it in the email alert to sales, which is super helpful information.

The behavior I want:

1) User clicks on a product page, then clicks the "request info" button.

2) We want to pass that product page URL to the WordPress landing page with the new Marketo form embedded on it.

3) User submits the form and the URL from the product page gets passed to our unique custom field (Form URL) we created to capture the URL. 

4) Email alert uses the custom field (Form URL). 

Questions: 

1) What type of field should the URL field be? String or URL? 

2) Other posts said to create an HTML block and put in the java script. Where does the HTML block go? On the Marketo form (rich text) or the WordPress product page, or the WordPress form landing page? 

3) What is the javascript I would use? 

Thanks in advance!! 

Brenda

[SanfordWhiteman · Accepted solution]

OK, that code has exactly the same effect as the code posted above. In fact it's more fragile because the hidden field needs to be added to the form in Form Editor if you use setValues() or vals(). Using addHiddenFields() doesn't require the field to be on the form to begin with.

whenReady() adds the value to all forms, while the final argument to loadForm() adds the value to only that form.

Other than that, these 2 pieces of code are are not substantively different. They both set the value of a hidden field when a form is ready:

#1

MktoForms2.whenReady(function(mktoForm){
  mktoForm.addHiddenFields({
    lastFormReferrerURL : document.referrer
  });
});

#2

MktoForms2.loadForm("//app-ab37.marketo.com", "525-EAQ-286", 1056, function (form) {
  form.vals({
    "lastFormReferralURL" : document.referrer
  });
});

[SanfordWhiteman]

---

1) What type of field should the URL field be? String or URL? 

String.

---

2) Other posts said to create an HTML block and put in the java script. Where does the HTML block go? On the Marketo form (rich text) or the WordPress product page, or the WordPress form landing page? 

---

I wouldn't recommend putting it in the form, because Marketo recently introduced a bug that makes that much more difficult. it should be a separate <script> on the WP page hosting the form, placed anywhere after the form embed code.

---

3) What is the javascript I would use? 

---

MktoForms2.whenReady(function(mktoForm){
  mktoForm.addHiddenFields({
    lastFormReferrerURL : document.referrer
  });
});

replacing lastFormReferrerURL with the SOAP API name of your new String field. 

[Brenda_Denting1]

Ok, I tested the script and it didn't work. I put the script directly under the form script. I put the lastFormReferrerURL hidden field in the form but didn't specify a Referrer Parameter or a URL Parameter. Any advice? 

[SanfordWhiteman]

The field doesn't even need to be on the form for this (addHiddenFields takes care of it).

What page is this on?

[Brenda_Denting1]

Had to get our external developer to help on this as I'm not good with JS. Here is the script that they ended up using from the Marketo doc: 

/*MktoForms2.whenReady(function(mktoForm){
mktoForm.addHiddenFields({
lastFormReferrerURL : document.referrer
});
});*/

This worked. Thanks for your help!! 

Brenda

[SanfordWhiteman]

That code isn't doing anything, as it's completely commented out.

[Brenda_Denting1]

Opps, here is the code (I must have copied the wrong one). 

<script>
MktoForms2.loadForm("//app-ab37.marketo.com", "525-EAQ-286", 1056, function (form) {
  form.vals({
    "lastFormReferralURL":document.referrer
  });
});
</script>

[SanfordWhiteman · Accepted solution]

OK, that code has exactly the same effect as the code posted above. In fact it's more fragile because the hidden field needs to be added to the form in Form Editor if you use setValues() or vals(). Using addHiddenFields() doesn't require the field to be on the form to begin with.

whenReady() adds the value to all forms, while the final argument to loadForm() adds the value to only that form.

Other than that, these 2 pieces of code are are not substantively different. They both set the value of a hidden field when a form is ready:

#1

MktoForms2.whenReady(function(mktoForm){
  mktoForm.addHiddenFields({
    lastFormReferrerURL : document.referrer
  });
});

#2

MktoForms2.loadForm("//app-ab37.marketo.com", "525-EAQ-286", 1056, function (form) {
  form.vals({
    "lastFormReferralURL" : document.referrer
  });
});

[Akhila1994]

Hi,

I have tried using the codes give, after I embed, my form is not displaying

Please help

[SanfordWhiteman]

We’d certainly need more information to look into this. Please provide the URL of the your page.

[Akhila1994]

I am trying to capture source web page through lead.original referrer token in my flow.

But I am only getting half of the URL displayed.

My actual form code is 

now where do I add the referer code ?

If I add the below code

I m not able to see the form in my website.

[SanfordWhiteman]

---

I am trying to capture source web page through lead.original referrer token in my flow.

---

You’re confusing the system field Original Referrer with the custom field used here, lastFormReferrerURL. You can’t change the Original Referrer field with a form post (nor should you care about that field).

You can add the custom JS directly to a script directly after the standard embed.

<script src="//pages.sensen.ai/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1045"></form>
<script>
MktoForms2.loadForm("//pages.sensen.ai", "147-RDY-169", 1045);
</script>
<script>
MktoForms2.whenReady(function(mktoForm){ 
  mktoForm.addHiddenFields({ 
    lastFormReferrerURL : document.referrer 
  });
});
</script>

[Akhila1994]

Hi Sanford,

I have tried using your script, it still not working.

My entire goal here is to capture the full URL of the website in Salesforce CRM where the Marketo form is filled.

In my smart list: I kept a trigger called fills out form and chose the designated form

In my flow: I kept added few steps that involve syncing person to SFDC and assigning to sales owner,  create task and add to campaign.

In task comment I have added to capture lead.original refferer.

Until last week this flow worked, once we deployed the form in different pages, it stopped working.

I am only able to capture half URL (Example: sensen.ai is the website, if the form filled in sensen.ai/solution/retail, I am only capturing sensen.ai/)

Please help me.

[SanfordWhiteman · Accepted solution]

---

I am only able to capture half URL (Example: sensen.ai is the website, if the form filled in sensen.ai/solution/retail, I am only capturing sensen.ai/)

---

That’s not “half“ of the referrer URL. It’s the protocol + hostname, i.e. the origin.

Which is exactly you’d expect to see because https://sensen.ai sends this CSP referrer-policy:

referrer-policy: origin

Also please remember to use the syntax highlighter when posting code so it’s readable.

[Akhila1994]

Hi Sanford,

Sorry about not using syntax

But, can you please advise on how I can capture the entire web page URL

I have copied the script given by you, it is still not working

[SanfordWhiteman]

You cannot because your website has set the referrer-policy above, which instructs the browser to only pass the origin of the previous page, not the whole URL.

[SanfordWhiteman]

Remembered I wrote a whole blog post about this: https://nation.marketo.com/t5/product-blogs/here-s-why-your-autofill-from-referrer-parameter-setup-s...