Standard image used for Required attribute for Marketo form field
Custom image used for Required attribute for Marketo form field
Quick jump links
Marketo has recently provided some additional form templates, allowing more options than the current out-of-the-box offering.
Check them out: Update the Look and Feel of Your Forms by Checking Out the Marketo Form Library (login required)
For most of the code snippets on this page can be put in one of two place within the landing page editor:
Any javascript libraries, i.e. jQuery, should be loaded either by the landing page template in the <head> OR in the Action area. The Action area will also inject the code into the <head> just above the <body> line and allows per landing page customizations. This allows the browser to load and initialize all the javascript code that will be required to render or update the visible content.
Always use the jQuery.noConflict() statement to prevent interference from other sources. Your web design team may be using jQuery for all sort of requirements and the best way to keep the code implementations apart is the use the jQuery.noConflict().
code
<-- Load latest js from the Google API CDN (fastest method) -->
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
One of the most useful parts of jQuery is the .ready(). It provides one of the best, most widely used and browser independant methods of letting you know when the page has been fully rendered. This is important because it notifies you know when all of the parts of the page can be safely manipluated without "Object not found" errors.
If you use the jQuery .ready() function, then it's best to put it into a Custom HTML element for easy of editing and making sure it's inserted into the <body> section. I can't stress this enough, as it's one of the most common problems that I see Marketo users make. Please don't put the .ready() function in the template.
Although you can technically have multiple .ready() functions within a single webpage and jQuery will chain them all together, it makes it harder to debug and read the code if there are multiples. Given a choice, please try to only use one .ready() function per page.
Due to the form/landing page editors in Marketo, it seems an enormous waste to clone a form just to change the submit button text. With the code below, it's not necessary.
code
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
$jQ('#mktFrmSubmit').val('... your text here...');
})
This is a little more difficult because you must break the normal behaviour in the template and import your own copy of Marketo's landing page support javascript: <script type="text/javascript" src="/js/mktFormSupport.js"></script> into your page and then change the appropriate text in the file. A word of caution, if Marketo ever improves this script and they have, then you will not get upgraded automatically. Case in point recently, support for iPhones and other iOS devices was added.
Please read the Marketo community article: How to change the "Please Wait" message of the Submit Button to something else for details
Sometimes, you want to allow a previously register visit access to gated portion of your website. Auto-submitting on the visitor's behalf is a very lightweight approach to solve this problem. Be warned, this only works on a Marketo form because they are processing the submit via a function instead of the usual browser form submit. In general, browsers prevent this as it can be used as click-fraud to the unaware/unsuspecting
code
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
/* mktFrmButtons - parent id
don't submit if we are in the lp edit/preview */
if (location.href.search('lpeditor') == -1) {
// old method, must be customized per form
// Mkto.formSubmit(document.getElementById('my form name here'));
// new method, dynamically get the html DOM element of the parent form of the submit button
Mkto.formSubmit($jQ('#mktFrmSubmit').parents('form:first').get(0));
}
})
If you would like to dynamically change the destination of the return URL after the visitor clicks submit, you can use the code below.
code
if (typeof $jQ == 'undefined') { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
/* process the form return by updating the return vars to parent by setting
the field attribute to a previously defined variable */
var ReturnUrl = '...redirect url...'
$jQ("input[name='returnURL']").attr('value', ReturnUrl );
$jQ("input[name='retURL']" ).attr('value', ReturnUrl );
});
This is especially useful for where you're gating access to your valuable collateral such as a resource centre. As an example, use a URL paramaeter to change the destination URL based upon a URL parameter like http://pages.example.com/whitepapers/?asset=bestwhitepaperever
asset parameter example code
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" language="Javascript" src="/jquery.string-2.0.4.js"></script>
<script type="text/javascript" language="Javascript">
// set document.domain to allow in-domain javascript access
document.domain='example.com';
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
// get the asset parameter if there is one
var asseturl;
var assetparam = $jQ.getQueryString({ ID: asset }).trim().tolower();
switch (assetparam) {
case 'bestwhitepaperever':
asseturl = '/whitepapers/best-whitepaper-ever.pdf';
break;
case 'prettestwhitepaperever':
asseturl = '/whitepapers/prettest-whitepaper-ever.pdf';
break;
default:
asseturl= '/thankyou.html';
}
// update Marketo's return parameters
$jQ("input[name='returnURL']").attr('value', asseturl );
$jQ("input[name='retURL']" ).attr('value', asseturl );
});
</script>
There are two cases where you might want to open a new window on submit:
Case A:
code
if (typeof $jQ == 'undefined') { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
$jQ('.lpRegForm').attr('target', '_blank' );
});
Case B:
code
function preSubmit() {
// create new window, syntax window.open(URL, [window name], [window options]);
window.open('... asset url ...');
return false;
}
/* override the submit function
see Adding custom validation to a Marketo form before submitting it
http://community.marketo.com/MarketoArticle?id=kA050000000Kyxo */
function formSubmit(elt) {
if (!preSubmit()) {
return false;
}
return Mkto.formSubmit(elt);
}
Sometimes, especially on confirmation or thank-you pages, you would like to redirect the visitor on to the resource or back to the main website. You can accomplish this with a timed redirect.
code
if (typeof $jQ == 'undefined') { var $jQ = jQuery.noConflict(); }
var redirectTime = 10000;
var redirectURL = '... my new url ...';
function timedRedirect() {
setTimeout('location.href = redirectURL;',redirectTime);
}
$jQ(document).ready(function(){
// don't redirect if we are in the lpeditor
if (location.href.search('lpeditor') == -1) {
timedRedirect();
}
});
Although you can override the choices on a form select element, if your field is connected to Salesforce, then a Salesforce field update will remove an customization you have put in place. One method around this is to use jQuery to modify the input options after the fact. The code below illustrates how to add a "Please select one..." to the top of every Marketo form select element
code
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
$jQ('.mktoSelect').prepend('<option value="" selected="selected">Please Select one...</option>');
})
If you would like to change the graphic used for the Marketo "Required" indicator, then upload a new 16x16 transparent gif to your files and images area and update the code sample below:
Standard image used for Required attribute for Marketo form field
Custom image used for Required attribute for Marketo form field
code
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
$jQ('.mktFormReq label').css("background-image", "url(/rs/..marketo customer name.../images/... my new required image 16x16.gif)" );
})
Sometimes you might want to add a link to form inputs for privacy policys or terms and conditions. With this bit of jQuery you can update the field's label to anything you want
Marketo Form Label before update
Marketo Form Label after update including hover text
code
// setup jQuery.noConflict
if ( typeof $jQ == 'undefined' ) { var $jQ = jQuery.noConflict(); }
$jQ(document).ready(function() {
$jQ('#... your field id ...').closest('li').children('label').html('I accept the website <a target="_blank" title="Example.com Terms and Conditions" href="http://example.com/TandCs.html">terms and conditions</a>.');
})
Most people will just drop the Google AdWord conversion code on to their thankyou page which is the simplest approach but this approach is prone to false positives. To prevent it, there are two methods:
1. Google AdWords conversion use URL parameters
On the landing page, set the returnUrl to include a URL parameter. I use form_submit=1 so the follow-on URL looks like
http://cname/thankyou?form_submit=1
On the thank you page, wrap the AdWords conversion code with an if statement.
Thankyou page example code for a custom html element
code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/js/public/jQueryString-2.0.2-Min.js"></script>
<script type="text/javascript">
// wait for the doucment to load
jQuery(document).ready(function($){
// get the submit param from the url
formSubmit = $.getQueryString({ "ID": "form_submit" });
//test if form_submit is valid
if ( formSubmit == 1 ) {
// inject the google adword conversion code
var google_conversion_id=... your google adwords id ...,
google_conversion_language="en",
google_conversion_format="3",
google_conversion_color="ffffff",
google_conversion_label='... your google conversion label ...",
google_conversion_value=0;
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
}
})
</script>
2. Fire the Google AdWords conversion on the landing page capture form submit event
code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// bind to the form submit
$('#mktFrmSubmit').submit(function(event) {
... test to see if at least one of the fields is filled in ...
// inject the google adword conversion code
var google_conversion_id=... your google adwords id ...,
google_conversion_language="en",
google_conversion_format="3",
google_conversion_color="ffffff",
google_conversion_label='... your google conversion label ...",
google_conversion_value=0;
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
});
});
</script>
3. use Marketo's pre-submit
code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// bind to the form submit
$('#mktFrmSubmit').submit(function(event) {
... test to see if at least one of the fields is filled in ...
// inject the google adword conversion code
var google_conversion_id=... your google adwords id ...,
google_conversion_language="en",
google_conversion_format="3",
google_conversion_color="ffffff",
google_conversion_label='... your google conversion label ...",
google_conversion_value=0;
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
});
});
</script>
There are several additional tips available in Marketo's community site (login required):
Connect with me on: