SOLVED

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

Go to solution
Dory_Viscoglio
Level 10
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
Anonymous
Not applicable
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
Dory_Viscoglio
Level 10
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

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>

Dory_Viscoglio
Level 10

Thanks for the reply, Jeff! Without digging into the campaigns that we've created, this looks very similar to what Yanir and the rest of the RTP team ended up creating for us, and I believe they posted it for all to use.

Anonymous
Not applicable

Do you know where it is posted? We searched pretty thoroughly for an answer to this question and didn't find any posted solutions that worked.

Anonymous
Not applicable

Hi Jeff,

We are working on a solution that will allow users to easily insert forms into RTP campaigns.

Until we'll release it you can submit a support case with the name of the form you want to use and the team will assist you with that.

Best,

Yanir.

Anonymous
Not applicable
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>
Anonymous
Not applicable

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
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
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

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

Dory_Viscoglio
Level 10
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?
Kenny_Elkington
Marketo Employee
Hi Dory,

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