Marketo Hack: Pre-fill fields where you embed the form

Marketo is an incredibly powerful marketing automation tool with an easy-to-use interface for form creation & workflow setup. Many Marketo users would, of course, be familiar with the ability to pre-fill a form field (hidden or otherwise) within the Marketo form builder – but sometimes this isn’t flexible enough.

What if you want to use the same web form across multiple pages, on multiple websites, but you want to collect some variable data specific to each implementation (or instance) of the form, that you can hardcode at the time of embedding the form? Some examples of this could be:

• the page URL the form is on
• the domain name the form is on
• a hard-coded ‘industry’ field

Good news… you’re in luck!

It’s quite easy actually! When you go to embed the form on your web page, Marketo will give you some code that looks a bit like like this:

<script src="//app-sn99.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_12345"></form>
<script>MktoForms2.loadForm("//app-sn99.marketo.com", "123-ACB-456", 12345);</script>

That’ll work fine if you have a standard form implementation – but we want to pass additional data to the form. To do this, we need to alter the data inside the final <script> </script> section slightly, to include some additional code. Here’s what the altered element would look like:

<script>
MktoForms2.loadForm("//app-sn99.marketo.com", "123-ABC-456", 12345, function(form) {
 form.vals({ "the_name_of_your_field_goes_here":"DATA_TO_POST_GOES_HERE"});
});
</script>

Notice there’s a few new elements near the end, too. Replace “the_name_of_your_field_goes_here” with the name of the field you want to pre-populate when the form loads. Note the field in question can be a visible (eg. text) field, or a hidden one …but more on that shortly.

Let’s say we have a field in Marketo called “industry” that you wanted to pre-populate depending on where the form is on your website. If the Marketo form is on your Insurance page, then you’d want to pre-populate this field’s data to be “insurance”… and on your Electrical page, you could pre-populate this field’s data to be “electrical”.

This is how’d you achieve that:

<script>
MktoForms2.loadForm("//app-sn99.marketo.com", "123-ABC-456", 12345, function(form) {
 form.vals({ "industry":"insurance"});
});
</script>

Of course, on your Electrical page, you’d embed the same form and just change the industry to “electrical”.

You can also send multiple variables by separating them; as per this example where I’m also sending an animal variable…

<script>
MktoForms2.loadForm("//app-sn99.marketo.com", "123-ABC-456", 12345, function(form) {
 form.vals({ "industry":"insurance","animal":"dog"});
});
</script>

One more thing…

Just don’t forget to add a corresponding field to the Marketo Form (in the Form Builder) – otherwise Marketo will ignore this field completely! If you want the field to be hidden from the form submitter, create a new hidden field and make the field name (in our case) “industry”. Set the default value to blank in Marketo, otherwise Marketo will ignore what you’re pushing to it and will revert to the default instead.

If you DO want the user to visually see the pre-filled field with the data in it, you can the field a text field. Set it to a read-only text field if you want them to see it, but not be able to edit it. I hope this post helps!