SOLVED

Re: RTP - Can you put a form in the dialog box?

Go to solution
Dory_Viscoglio
Level 10

RTP - Can you put a form in the dialog box?

Hi All, would anyone more familiar with RTP know if you can add a form to a dialog box? Or is it just for a CTA that will link somewhere?
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

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">&nbsp;</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>

View solution in original post

12 REPLIES 12
Kenny_Elkington
Marketo Employee

Re: RTP - Can you put a form in the dialog box?

Hi Dory,

It's not typical but, you should be able to.  Are you encountering any issues with this?
Dory_Viscoglio
Level 10

Re: RTP - Can you put a form in the dialog box?

Hey Kenny, we don't have RTP yet, but having the capability would be very helpful for us. Would it be by adding the code to the HTML section, or can you drag a Marketo form in? I'm thinking the differentiator there would be ability to prefill?
Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

Hi Dory,

We're successfully using a form in the RTP dialog box.  It works great for getting form fills but, because it is a form and not a simple link/image, the form fills don't report as "Clicks" in RTP so you can't easily see how well it is performing from the RTP dashboard.
 

You should be able to see an example of the popup on the page below if the campaign is still live.  The form in the popup is still a Forms 1.0 Marketo form (iframes, etc) so, it is slow to load which you may see when the visit the link:

http://www.onvia.com/blog/government-agencies-look-to-mobile-device-management-for-BYOD-and-mobile-security

Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

Travis this is an excellent use of RTP & Forms!

Have you by chance built something with Forms 2.0 yet? If so i would love to see it.
Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

Hi Travis,

Could you please share the HTML you used in your popup? I'm trying to implement something similar and I am not that good with code.

Thanks,
Masha
Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

Danny: We haven't tried this with Forms 2.0 yet.  We will hopefully have that completed in the next few weeks and I'll update this thread if we have any interesting experiences with that.  

Maria, here is the HTML source from the campaign on RTP.  Note: We did need to build a seperate version of the landing page to house the RTP popup version of the form (and the resulting "Thank You" page) because the RTP form dimensions are smaller than what we normally use on our site but, beyond that, nothing particularly unusual here. 

We're excited to move this to Forms 2.0 as that should be quite a bit faster for the user (no additional iframe to call).

RTP campaign source for our RTP Popup form:

<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;">Onvia's New 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>
<div style="text-align: center;"><iframe src="http://info.onvia.com/SLED-Report-RTP-Popup-Q3-2014.html" width="385" height="370" scrolling="no" frameborder="0"></iframe></div>
</td>
</tr>
</tbody>
</table>

Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

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">&nbsp;</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>
Dory_Viscoglio
Level 10

Re: RTP - Can you put a form in the dialog box?

Hey Travis,

I worked with support on this a little bit, and I was able to get to a point where we added the Forms 2.0 form to a popup using the following jquery: 

<form id="mktoForm_1589"></form> 
<script> 
$.ajax({ 
cache: true, 
async: true, 
url: "//app-sj05.marketo.com/js/forms2/js/forms2.js", 
dataType: "script", 
success: function(){ 
MktoForms2.loadForm("//app-sj05.marketo.com", "867-SLG-901", 1589); 

}); 
</script>

What I'm struggling with now, is doing something similar to what you've done where you replace your form with text upon submission. I don't have any background in scripting, but I'm assuming what I'd want to do is set the form to stay on the page after submission, and create a script to hide the form and present the new text. Any ideas how I might go about this?

Any help or insight that you could provide would be SOOOOO appreciated!!
Anonymous
Not applicable

Re: RTP - Can you put a form in the dialog box?

Hi Dori,

I know it has been a while since you posted but I have a working solution that addresses your questions specifically. Just copy and paste the code below into the RTP dialog WYSIWYG editor (while in HTML mode) and then replace the messages, form IDs and Marketo server URL and you should be good to go.

You've probably found a solution already but I figured I'd post this to save others a ton of time figuring this out in the future.

<div id="resub_form" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; display: block;">Get updated with news and offers via email.</div>

<div id="confirmform" style="display: none; font-size: 16px; font-weight: bold; margin-bottom: 20px;">Thank you for subscribing to receive updates!</div>

<form id="mktoForm_xxxx"></form>

<script type="text/javascript">// <![CDATA[

$.ajax({

cache: true,

async: true,

url: "//xxx.marketo.com/js/forms2/js/forms2.js",

dataType: "script",

success: function(){

MktoForms2.loadForm("//xxx.marketo.com", "xxx-xxx-xxx", xxxx);

MktoForms2.whenReady(function (form){

form.onSuccess(function(values, followUpUrl){

form.getFormElem().hide();

document.getElementById("resub_form").style.display = "none";

document.getElementById('confirmform').style.display = "block";

return false;

           });

});

}

});

// ]]></script>