Embedding Global Forms Without Losing Tracking: Part III

[Anonymous]

This blog is the third and final part in a series on ways of tracking lead acquisition and program success when you are embedding global forms on a non-Marketo landing page or website.

The first option we covered was dependent on having a generic/tokenized thank you landing page that can be used for anyone who filled out the form. The second approach was modified to allow for separate thank you landing pages. The third and final approach uses the Form 2.0 API with loadForm and onSuccess handlers so that you can control the follow up page activity from the website, rather than from within the form settings. This also has the benefit of not requiring people to remember URL parameters in their email links.

1. Create a global content form in Design Studio.
2. Embed the global content form on your website on each landing page.
3. Create follow up/thank you landing page(s) as desired.
4. On the webpage that hosts the form, add a customized version of this code, so that when the form is loaded, you add a hidden field (highlighted in green) and pass a value into it to indicate which piece of content was retrieved (highlighted in yellow). Be sure to customize the code with your pod (highlighted in red), your account string (highlighted in purple) and the form ID (highlighted in blue).
   
5. On the webpage that hosts the form, add a customized version of this code, so that when the form is submitted, it redirects to the URL highlighted in yellow. Be sure to customize the code with your pod (highlighted in red), your account string (highlighted in purple) and the form ID (highlighted in blue).
6. Create a Web Content program for White Paper A with a success campaign that triggers off the form fill.
   1. In the smart list, use the “Fills Out Form” trigger and add a filter for that specific ContentName. This is where you should populate the value you’re entering in the URL Parameter
   2. Then in the flow, send out the follow up email, change the program status, and set acquisition as normal.
      

Is this article helpful ?

YesNo

[Ande_Kempf4]

Amazing. We just did this. And your post was extremely helpful! Thanks!

[Anonymous]

Glad you found it useful; that's the goal!

[Mark_Rentschle3]

Thank you for putting this together - I am currently trying to use a global form in several pages on my wordpress site, and I need to be able to redirect to unique confirmation pages. I am having trouble getting the code to work on my pages along with the form embed code - it is putting the form on the page twice. Is the code above meant to be used in place of the form embed code?

[SanfordWhiteman]

The loadForm in the code above duplicates the loadForm call in the standard embed code, yes. You don't want that.

Instead (and this is a better, more portable practice anyway) include custom form behaviors in a call (or calls) to MktoForms2.whenReady.

MktoForms2.whenReady(function(form){
  // ... your startup code (like addHiddenFields()) here ...
  form.onSuccess(function(values,followUpURL){
     // ... your onSuccess code here ...
  });
});

[Mark_Rentschle3]

Thanks, Sanford. That makes perfect sense. I was able to get the 'ContentName' hidden field populate, along with the form loading properly, using this code:

<script src="//app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_111"></form>

<script>MktoForms2.loadForm("//app-xxxx.marketo.com", "111-XXX-111", 111, function(form){

//Add the hidden fields, "contentName"

form.addHiddenFields({"contentName":"eBook"});

});</script>

To simplify the process for me, rather than using code to redirect to the follow up URL, I added a choice in the Thank You Page area of the form settings: If ContentName IS 'eBook' Follow Up With 'External URL'.

Do you think there is an advantage to using the whenReady call instead of putting it all in the loadForm call?

Do you think there would be an advantage to using code for the redirect over using the flow step functionality in the form settings?

[SanfordWhiteman]

Do you think there is an advantage to using the whenReady call instead of putting it all in the loadForm call?

Yes. The advantage is that whenReady can always be used even when (as on Marketo LPs) there is a hard-coded loadForm().

In addition, there are situations where you may want whenRendered as opposed to whenReady. The loadForm callback can't offer an equivalent event.

Do you think there would be an advantage to using code for the redirect over using the flow step functionality in the form settings?

Solely depends on how complex your logic is. The Advanced Thank You (I wouldn't call it a flow per se) in Form Editor does simple matching against form fields. If you want to take additional data into account, like other stuff from the pageview context, browsing history, cookies, other lead fields, complex partial matching tables... those are better/only done using JavaScript in the onSuccess.

A subtle advantage of the Advanced Thank You is that it keeps the possible choices private (as they are only stored in the instance).  This means that you can't check out the possible options by looking at the page source -- a relatively rare need but certainly pertinent when it comes to coupon codes and the like.

[Anonymous]

This is amazing, Kristen. Thank you for sharing this. My company built a website with the same form embedded on 30 different pages, but wanted to collect data on what page the visitor was on upon completing the form. Now instead of having to maintain 30 different forms in Marketo, I've built only one and used the form.addHiddenFields({"fieldname":"uniqueID"}); line of code to track where folks are completing the form. Fantastic stuff!

[Anonymous]

Couldn't we just use the Referrer constraint? Or is their a benefit in using both?