Hi All,
Here is the version of the RTP Popup with a form 2.0 embedded in it (form embed at the bottom).
Two Notes:
1) <script src="..."></script> calls seem to fail in the popup source, I think RTP might strip them out or something. That is the reason for the jQuery getScript call to load the forms2.0 JS file. If you don't do it this way, you'll see a javascript error on the page saying MktoForms2 is an undefined object (because the external JS file didn't load).
2) The RTP form completion module (to add firmographics to form fills automatically) doesn't seem to work with RTP popups. When you start typing a company name and then choose one of them from the company name list that pops up, that click closes the RTP popup so the user never has a chance to complete the form. I don't know how to disable this, so instead we just commented out the form_completion JS file so form completion doesn't work on these popup forms. A reasonble workaround for now but if anyone knows how to make these two modules play together, let me know.
So far, this approach is working well - streamlining downloads for known users because it hides the form and just shows a Download button for known users.
Here is the HTML source of the RTP popup campaign:
===============================================================
<table>
<tbody>
<tr>
<td style="vertical-align: top; text-align: left;">
<div>
<div style="float: right;"><img alt="" src="http://www.onvia.com/sites/default/files/icon_whitepaper_sled_report_q3_2014.png" /></div>
<div style="padding: 5px; margin-bottom: 15px;">
<h3 style="text-align: left; font-size: 21px; color: #2053a4; display: block; line-height: 25px; margin-top: 5px;">Complimentary Report for Government Vendors</h3>
<h3 style="text-align: left; font-size: 18px; color: #666666; display: block;">Q3 2014</h3>
</div>
</div>
<hr style="clear: both; height: 0px; border: 1px solid #eee; margin-bottom: 10px;" />
<p style="font-size: 14px; color: #666666;"><strong>Highlights from this quarter's report:</strong></p>
<ul style="font-size: 12px; color: #666666; list-style-position: outside; margin-left: 20px;">
<li>Slight decline in contracting opportunities for Q3 but positive YTD growth</li>
<li>Slowing trend during 2014 influenced by greater cooperative purchasing</li>
<li>Software and public safety had the strongest growth rates for the quarter</li>
<li>Guest column from industry expert Mark Amtower</li>
</ul>
</td>
<td style="vertical-align: top;">
<div class="alignright-form">
<p class="form-title rtecenter white">Request Report</p>
<form id="mktoForm_1249"> </form>
<script type="text/javascript">// <![CDATA[
// RTP form completion dismisses the RTP popup so disabling on these popup offer forms
// $j.getScript("//info.onvia.com/rs/onvia/images/onvia_form_completion_insightera.js");
$j.getScript("//app-sjo.marketo.com/js/forms2/js/forms2.js",function() {
MktoForms2.loadForm("//app-sjo.marketo.com", "971-RSF-621", 1249, function (form) {
//Add an onSuccess handler
});
MktoForms2.whenReady(function (form){
form.onSuccess(function (values, url){
// Send a "Event" to google analytics to trigger a premium content download for this piece of content
_gaq.push(['_trackEvent', 'Premium Content', 'White Paper', 'RTP Offer - Q3 2014 State & Local Contracting Snapshot']);
// This opens the form's Follow Up URL on successful completion (the asset itself that is specified in the Marketo form config)
window.open(url, 'myWindow');
form.getFormElem().hide();
// add the custom thank you message and download link to the actual asset
var thankYou = "";
form.getFormElem().before("<p style='padding:10px;width:283px;font-size:14px;color:white;height:100px;text-align:center'>Thank you for downloading.<br/><br/>Your content will open in a new window.</p>");
return false;
});
$j("form.mktoForm button.mktoButton").click(function() {
// This is required to get around the popup blocker since the onSuccess event fires asynchronously and the browser thinks it isn't a user-initiated click
window.open('','myWindow');
return true;
});
});
});
// ]]></script>
</div>
</td>
</tr>
</tbody>
</table>
.png)